wepy-小程序開發框架學習（一）

時間 2020-12-13

標籤 php css html java node es6 sql npm 編程 json 欄目 PHP 简体版

原文原文鏈接

原文連接： https://blog.csdn.net/u010263035/article/details/80393393

1、安裝npm

因爲新版的NodeJS已經集成了npm，咱們能夠安裝NodeJS來實現安裝npm。php

首先去nodejs官網(https://nodejs.org/en/)上下載最新版的nodejs，以下圖，點擊下載css

下載完成之後，一路next便可安裝，如需更改安裝目錄，請自行配置。html

安裝完成之後驗證npm是否安裝成功：運行cmd命令java
npm -v
獲得以下圖所示，個人版本是6.0.0node

表示安裝成功。es6

2、安裝wepy

用管理員身份打開cmd命令窗口，而後執行cmd命令sql
npm install wepy-cli -g
進行全局安裝wepy（此命令也是更新wepy的命令），以下圖所示，表示wepy安裝成功，標紅處爲版本號

此處需注意的是要用管理員身份運行cmd命令，如非管理員身份運行可能會出現權限問題致使安裝失敗，以下圖：npm

3、開始一個小程序

wepy提供一些小程序的模板，就是一些小例子，下面咱們來看看這些模板編程

運行cmd命令進入本身想要下載的目錄，而後輸入json
wepy list
回車查看官方提供的模板，以下圖（標紅處爲模板，標黃處爲下載模板的命令）

下面咱們來下載一份空模板來看看，在cmd命令窗口輸入
wepy init empty myproject
以下圖：

出現一些亂碼，編碼格式的問題，不影響下載代碼，能夠忽略，咱們繼續

命令執行會讓你輸入Project name，AppId等等，我直接回車使用默認

最後一行問你是否使用ESLint，咱們先選擇否（輸入n便可），先拿到一個最簡單的模板看看，具體後面再說

而後咱們去咱們的模板看看它的結構（我用的Sublime Text3編程工具打開文件夾，這個編程工具根據本身的喜愛選擇就好）

首先咱們看一下項目結構（這是編譯以前的結構）
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項目的package配置
另外還有一些配置文件如

project.config.json：對應小程序裏的project.config.json文件裏的某些屬性配置

wepy.config.js：wepy編譯方面的某些配置

下面執行cmd命令來下載npm依賴
npm install
以下圖所示

下面咱們來對這個模板編譯一下看看，繼續執行cmd命令：
wepy build -w
此命令表示開啓實時編譯，咱們對這個項目所作的更改都會實時編譯到編譯目錄裏

報了個WARNING,未安裝wepy-eslint，但不影響編譯，查看了一下是上面選擇是否使用eslint，上面咱們選擇了否，而下載的模板中使用了這個，咱們能夠找到相關的配置文件，關掉後就不報警了，即將wepy.config.js裏的eslint的屬性值改成false便可，以下圖所示：

在上圖，咱們同時也看到了，多了一個dist目錄，這個目錄就是編譯的目錄

還有一個node_modules目錄，是npm下載依賴的目錄（這個目錄在執行npm install時就已經建立）

編譯完成後，咱們就能夠把項目的根目錄加到小程序開發工具上查看，以下圖所示：

這樣，一個hello world就完成了，可是項目可能運行會報錯，解決方法以下圖，點擊右上角詳情按鈕，會出現被我標藍的窗口，將es6轉es5取消選擇便可

之因此將項目的根目錄加入小程序開發工具中便可運行，是由於1.7.0 以後的版本init新生成的代碼包會在根目錄包含project.config.json文件，這個文件中設置了小程序的根目錄，因此直接把項目的根目錄加入到小城西開發工具上能夠運行，如果1.7.0以前版本，也能夠經過手動編寫該文件，而後這樣加入小程序開發工具運行，編寫內容以下
{
"description": "project description",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram",
"appid": "touristappid",//小程序的appid
"projectname": "Project name",//小程序的項目名稱
"miniprogramRoot": "./dist"//根目錄
}