wepy是由微信官方研發(fā)的一個類vue小程序框架，語法基本與vue相同。它有什么優(yōu)點，大家可以到它的官網(wǎng)看微信是怎么吹的。
至于缺點，相信只有使用過它的朋友們才有發(fā)言權，作者也是wepy小白。在社區(qū)看到的討論，主要有三個缺點：
- 畸形的循環(huán)限制（當然wepy官方也給出了相應的方案，但仍然讓大家無法接受）
- 類vue，而不是單純的vue，讓強迫癥的朋友們很難受，當然一定程度上也增加了學習成本。這大概也是為什么不少人投身美團的
mpvue的原因之一 - 執(zhí)行效率問題，看到一些人反饋wepy生成的項目出現(xiàn)卡頓甚至觸發(fā)了系統(tǒng)的內(nèi)存警告導致小程序被強制關閉
stpe 0: 安裝npm
在使用wepy之前，首先要有npm，npm是Nodejs下的包管理器，大家可以直接到Node.js官網(wǎng)下載。
（成功安裝完Node.js后就可以擁有npm，具體步驟本文不進行贅述)
step 1: 安裝wepy
擁有npm之后，使用下面的命令安裝wepy
npm install wepy-cli -g
安裝成功后，在命令行下確認：
PS E:\prj\tmp> wepy --version
1.7.3
看到版本號證明已經(jīng)安裝成功了。
step 2: 創(chuàng)建項目模板
安裝完成之后，就可以使用wepy來創(chuàng)建項目了。1.7.0之前的版本創(chuàng)建的方式如下：
wepy new myproject
1.7.0之后的版本的創(chuàng)建方式如下：
wepy init <template_name> [project_name]
其中 template_name是必選的，project_name是可選的，可以在后面進行初始化配置的時候設置。
我們使用標準模板
wepy init standard project_name
只需要把project_name替換成你自己的項目名稱即可。這里我們創(chuàng)建的是一個標準的wepy項目模板，更多創(chuàng)建方式及模板的獲取方式，參見wepy-cli的文檔
如果想要使用其它模板，可以通過wepy list查看其它模板，再根據(jù)需要進行選擇。
PS E:\prj\tmp\my_prj> wepy list
Available official templates:
e.g., wepy init empty myproject
+--------------------+------------------------------------------------------------+
| Name | Description |
+--------------------+------------------------------------------------------------+
| empty | 空模板 |
+--------------------+------------------------------------------------------------+
| standard | 模認模板，開啟了promise、Async Function等 |
+--------------------+------------------------------------------------------------+
Available github projects:
e.g., wepy init wepyjs/wepy-wechat-demo myproject
+------------------------------+--------+------------------------------------------------------------+-------------------------+
| Repository | Stars | Description | Last Updated |
+------------------------------+--------+------------------------------------------------------------+-------------------------+
| wepyjs/wepy-wechat-demo | 415 | wepy仿微信聊天界面 | 2 months ago |
+------------------------------+--------+------------------------------------------------------------+-------------------------+
| wepyjs/wepy-weui-demo | 321 | WeUI 在 WePY | 1 year ago |
| | | 中的使用示例，同一份代碼可以運行在小程序上和Web上 | |
+------------------------------+--------+------------------------------------------------------------+-------------------------+
| brucx/wepy-zanui-demo | 215 | 基于zanui-weapp移植的一套wepy界面框架 | 8 months ago |
+------------------------------+--------+------------------------------------------------------------+-------------------------+
這里我創(chuàng)建了一個，名為 my_prj的項目
PS E:\prj\tmp> wepy init standard my_prj
? Project name my_pry
? AppId touristappid
? Project description A WePY project
? Author 1lin24 <1lin24@****.com>
? Use ESLint to lint your code? Yes
? Use Redux in your project? Yes
? Use web transform feature in your project? Yes
wepy-cli · Generated "my_prj".
看到wepy-cli · Generated "my_prj".說明你已經(jīng)成功了。
但在運行命令的時候，會出現(xiàn)好幾個問號開頭的交互式命令，讓用戶對基本進行基本配置。
這里我們只需要一路按Enter就可以了，這些配置可以在項目內(nèi)對應的配置文件里面進行修改。
我們簡單說一下每個配置的作用：
-
? Project name my_pry項目名稱（顯示在微信小程序開發(fā)工具上面的） -
? AppId touristappid我們是demo，直接使用 游客id 即可，正式的項目需要輸入微信小程序?qū)腶ppid, -
? Project description A WePY project這里你可以輸入關于項目的簡介 -
? Author 1lin24 <1lin24@****.com>這里寫的是項目的信息 -
? Use ESLint to lint your code? Yes是否將ESLit加入到項目中，ESLit是一個代碼格式化檢查工具，用于規(guī)范代碼的書寫 -
? Use Redux in your project? Yes是否將Redux加入到項目中，Redux是一個系統(tǒng)狀態(tài)管理工具 -
? Use web transform feature in your project? Yes這個我就不知道，誰知道評論指點一下，謝謝了
step 4: 安裝依賴包
創(chuàng)建好項目模板之后，會在當前目錄下生成一個與項目名稱一致的文件夾
PS E:\prj\tmp> ls
目錄: E:\prj\tmp
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/1/7 11:30 my_prj
-a---- 2019/1/7 11:07 27 package-lock.json
進入到文件夾內(nèi)：
cd my_prj
查看目錄結構
PS E:\prj\tmp\my_prj> ls
目錄: E:\prj\tmp\my_prj
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/1/7 11:51 node_modules
d----- 2019/1/7 11:30 src
-a---- 2019/1/7 11:30 147 .editorconfig
-a---- 2019/1/7 11:30 7 .eslintignore
-a---- 2019/1/7 11:30 719 .eslintrc.js
-a---- 2019/1/7 11:30 28 .gitignore
-a---- 2019/1/7 11:30 26 .prettierrc
-a---- 2019/1/7 11:30 1714 .wepycache
-a---- 2019/1/7 11:30 46 .wepyignore
-a---- 2019/1/7 11:51 104394 package-lock.json
-a---- 2019/1/7 11:30 1520 package.json
-a---- 2019/1/7 11:30 254 project.config.json
-a---- 2019/1/7 11:30 1400 wepy.config.js
這里面有兩個比較重要的：
-
src這個文件是我們使用wepy開發(fā)項目的源碼文件，日后大量的工作都會在這個目錄里面 -
package.json這個是項目依賴包的信息
安裝項目相關的依賴
npm install
這個命令的作用是讀取項目根目錄下的package.json文件，安裝這個文件里面的依賴包。后續(xù)如果需要更多的依賴，你最好使用
npm install package_name --save 進行安裝，這樣在安裝依賴后，會把依賴對應的信息加入到package.json中，方便項目協(xié)作。
stpe 4: 編譯
現(xiàn)在我們假設已經(jīng)完成一階段的開發(fā)工作，那么怎么把wepy項目的代碼轉(zhuǎn)換成微信小程序開發(fā)工具可以跑起來的代碼呢?
使用下面的命令
wepy build
運行后，你大概率會看到以下信息：
如此完美，一個錯誤都沒有報，舒服。
這時候我們發(fā)現(xiàn)項目目錄下多了一個dist文件：
PS E:\prj\tmp\my_prj> ls
目錄: E:\prj\tmp\my_prj
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/1/7 11:59 dist
d----- 2019/1/7 11:51 node_modules
d----- 2019/1/7 11:30 src
-a---- 2019/1/7 11:30 147 .editorconfig
-a---- 2019/1/7 11:30 7 .eslintignore
-a---- 2019/1/7 11:30 719 .eslintrc.js
-a---- 2019/1/7 11:30 28 .gitignore
-a---- 2019/1/7 11:30 26 .prettierrc
-a---- 2019/1/7 11:59 6631 .wepycache
-a---- 2019/1/7 11:30 46 .wepyignore
-a---- 2019/1/7 11:51 104394 package-lock.json
-a---- 2019/1/7 11:30 1520 package.json
-a---- 2019/1/7 11:30 254 project.config.json
-a---- 2019/1/7 11:30 1400 wepy.config.js
這個文件就是我們編譯的產(chǎn)物，接下來我們要使用微信小程序開發(fā)工具來運行這個目錄下面的內(nèi)容。
step 5: 運行
打開微信小程序開發(fā)工具
選擇項目的
dist文件夾為項目目錄，填寫好AppId及項目名稱，點擊確定。安靜地等待幾秒。
發(fā)現(xiàn)出現(xiàn)如下錯誤
是因為babel編輯器不支付ES5, 應該將微信開發(fā)工具的ES5選項關閉。具體操作如下：
微信開發(fā)工具 -> 設置 -> 項目設置 -> 不鉤選 ES6轉(zhuǎn)ES5
step 6: 實時編譯
成功運行之后，我們發(fā)現(xiàn)在調(diào)試過程中都要重新運行wepy build，wepy給出的解決方案是，使用wepy build --watch 這個命令會監(jiān)測源碼文件的變動，當源文件發(fā)生變動之后會自動重新進行編譯。
更多wepy知識，詳見官方文檔
