微信小程序開發三宗罪和解決方案

注意 本文章對應版本已通過時，請查閱最新版文檔 https://github.com/maichong/l...

---

QQ交流羣 282140496

---

在微信公佈小程序的文檔和開發工具後，脈衝軟件在第一時間進行了學習和體驗，咱們發現微信小程序的技術架構和開發體驗讓咱們很是失望。

因爲微信小程序的運行環境並非一個標準的瀏覽器環境，並且微信的封裝工做並不完善，因此咱們以往開發中的不少經驗並不適用。

這並不是簡單的開發習慣不適應，更重要的是咱們的開發流程、規範將不適用。

微信小程序開發第一宗罪: 沒法調用NPM包

雖然微信小程序開發工具打包時實現了require函數加載依賴，但並非完整的CommonJS依賴管理。由於require函數僅僅可以加載項目中的JS文件，並且必須嚴格定義JS文件路徑，路徑不支持CommonJS的路徑風格。例如以下加載方式都將出錯：

require('lodash');

require('lodash/map');

require('./foo');

在微信小程序開發工具中，咱們必須對應寫爲以下格式：

require('node_modules/lodash/lodash.js');

require('node_modules/lodash/map.js');

require('./foo.js');

雖然咱們能夠像上面代碼同樣加載node_modules目錄中的庫，可是實際運行時卻發生了：

在調試工具的Network選項卡中，咱們看到運行時加載了1000多個文件，總數據量1.8MB，而咱們僅僅是在代碼中加載了一個lodash庫而已！這是由於微信小程序開發工具會將全部項目下的js文件視爲項目文件，並進行打包。而實際開發中，咱們須要安裝不少的NPM擴展庫，而這些擴展庫中有大量的不須要打包的文件，例如lodash中有上千文件，而咱們只須要用到其中的很是少的一部分。

另外，在開發中，咱們每每須要安裝babal、eslient、webpack、grunt等待開發工具，微信小程序開發工具會一視同仁將這些工具的源碼也進行打包......實測開發者工具將崩潰！開發者將崩潰！我崩潰！

因此不支持NPM包的緣由，是微信開發者工具不支持CommonJS標準，不支持CommonJS標準的緣由，是微信開發者工具想固然地認爲項目目錄下的js文件必定是項目文件，因此只實現了簡單的require函數，想固然的緣由是。。。

微信小程序開發第二宗罪: 沒法使用Babel轉碼

沒法使用Babel轉碼的緣由其實仍然歸結於沒法加載NPM庫。可是後果將十分嚴重。由於你將不能再安全使用ES6/7特性，你將沒法使用async/await函數，你將和無盡的callback作鬥爭，你該怎樣描述本身？回調地獄中的苦逼程序員？

若是你看到這裏不明白Babel爲什麼物，那麼祝賀你，由於未曾見過天堂就不知何爲地獄，你無須爲不支持ES6/7而煩惱。但一旦你的大腦支持了ES6/7，用過了Babel，你就回不去了，像我同樣，無Babel不編碼。

微信小程序開發第三宗罪: 沒法重用組件

其實微信小程序開發是並不是徹底不能重用組件，好比WXML語法中支持import和 include。可是那僅僅是視圖模板可重用，並不是組件可重用，由於咱們認爲組件在應當包含視圖和邏輯。

WXML實際上是基於可重用的組件，可是不容許咱們自定義組件。若是你有React經驗，你就會明白個人意思。

例如，你的小程序是個電商APP，項目中有兩個頁面中同時包含了商品列表組件，好比某分類下商品列表和搜索結果列表，咱們知道這兩個列表其實僅僅是參數不一樣而已。可是在小程序開發中，你只能將列表的模板抽象出來，不能將邏輯抽象出來，因此你就須要在兩個頁面上都實現一遍列表組件的控制邏輯，好比刷新、加載更多。。。

咱們的實踐

只吐槽、管殺無論埋是不道德的，既然發現了微信小程序開發中的各類弊端，咱們脈衝軟件在開發之中總結出了一套流程和工具，專爲解決上述三個問題，並免費發佈到了開源社區，這就是Labrador。接下來咱們一塊兒來嘗試一下咱們脈衝軟件的開發體驗。

安裝Labrador

經過命令 npm install -g labrador-cli 全局安裝Labrador控制行工具。

初始化項目

經過以下命令新建一個Labrador項目：

mkdir demo

cd demo

npm init

labrador init

項目初始化完成後，該目錄是這個樣子的：

圖中的src是咱們的源碼目錄，node_modules是NPM包目錄，dist是目標輸出目錄。請在開發者工具中新建一個項目，並設置路徑到dist目錄，請勿設置爲demo目錄！使用WebStorm或Sublime打開demo目錄，開發過程當中，咱們使用WebStorm或Sublime修改src目錄下的源碼，請勿直接修改dist目錄中的文件，由於dist目錄是經過labrador命令生成的。

在demo目錄中運行 labrador build 命令編譯項目，該命令會將src目錄下的文件一一處理並生成dist目錄下對應的文件。咱們也能夠運行 labrador watch 命令監控src目錄下的文件變化，這樣就不用每次修改後手動運行編譯命令。

加載NPM包

咱們以lodash包爲例，在src/app.js中鍵入代碼 const _ = require('lodash'); 編譯後，咱們看到dist目錄下的文件是這樣的：

咱們看到dist目錄下有一個npm/lodash目錄，該目錄下只有一個lodash.js文件，那麼在微信web開發者工具中打包預覽，lodash的庫將只有這個文件被加載。

這一切是怎麼發生的？

咱們看一下dist/app.js的源碼，發現源碼中const _ = require('lodash'); 被編譯爲 var _ = require('./npm/lodash/lodash.js'); 而後labrador命令將node_modules/lodash/lodash.js 文件複製到了 dist/npm/lodash/lodash.js 。這就是經過labrador能夠調用NPM包的原理。

重要的是，只有真正用到的js文件才被labrador命令加入到項目目錄中。這樣一個小小的改進象徵着咱們的小程序能夠便捷調用NPM倉庫中海量的擴展庫！

Babel轉碼

在初始化的示例代碼src/app.js中的內容是這樣的：

圖中timer和getUserInfo屬性都爲async函數，函數體內使用await調用異步操做。labrador 庫對微信API進行了封裝，使用 const wx = require('labrador'); 覆蓋默認的全局變量wx; 封裝後的wx對象提供的異步方法返回的都是Promise異步對象，結合async/await函數完全終結callback，將異步代碼同步寫，輕鬆逃離回調地獄！

但目前async/await函數是不被瀏覽器支持的，咱們須要使用babel對其轉碼，labrador編譯命令已經內置了babel轉碼，轉碼後的代碼能夠查看dist/app.js，內容過長，再也不張貼。

重用組件

重用組件最須要解決的問題是組件的邏輯代碼怎樣重用。在實例代碼中有一個src/components目錄，用來存放項目內的可重用組件，其結構是這樣的：

子目錄src/components/list中存放着一個可重用的組件。list.js / list.less / list.xml 分別對應微信小程序的 js / wxss / wxml 文件。JS爲控件的邏輯層，其代碼以下：

文件導出一個List類，這個組件類擁有像Page同樣的生命週期函數onLoad, onReady, onShow, onHide, onUnload 以及setData函數。

LESS文件對應微信的WXSS文件，由於微信小程序實現的限制，LESS中沒法使用連級選擇語法，可是能夠定義變量，方便開發。

XML文件對應微信的WXML文件，是組件視圖描述文件，list.xml內容爲：

文件中導出一個名爲list的template。
組件不但能夠存放在src/components目錄內，還能夠單獨作成NPM包，這樣就能夠輕鬆作到跨項目間的組件共享。

組件定義完成後，接下來是在頁面中調用，在 src/pages/index/index.js 中有以下代碼：

代碼中首先引入了labrador庫替換全局的默認wx對象，並使用labrador.createPage方法代替全局的Page函數聲明頁面。而後加載List組件類，在頁面聲明配置中，增長了components屬性，並將List組件類實例化傳入。labrador.createPage方法是對Page方法的一層封裝，目的是在頁面初始化時和組件對象進行關聯。

在 src/pages/index/index.less 中加入代碼 @import 'list' 便可調用list組件的樣式，若是在src/components/list中找不到list.less，那麼編譯命令將在NPM包中尋找 node_modules/list/index.less 。

在 src/pages/index/index.xml 中加入代碼 <component key="list"/> 便可調用list組件的模板文件，component 是Labrador自定義的組件，編譯後對應生成 import 和 template。若是在src/components/list中找不到list.xml，那麼編譯命令將在NPM包中尋找 node_modules/list/index.xml

具體的體驗還須要你親自動手才行，文章到此結束，謝謝！

---

注意 Labrador 已經發布0.3版本，最新接口和此文內容會有出處，若是你未曾瞭解Labrador，那麼你能夠閱讀此文初步瞭解Labrador，若是你已經開始基於Labrador構建項目，請參閱 使用Labrador 0.3構建ES6/ES7標準模塊化微信小程序 一文查看最新的接口。