準備
了解微信小程序是什么?微信小程序官方文檔
了解應用狀態管理方案:Redux, 也是Flux架構的具體實現
了解Javascript打包工具:webpack
了解ES6/7代碼轉譯(transcompile)工具:Babel, 原理大致是借助語法分析工具(Esprima之類的), 將代碼解析成抽象語法樹, 再"重寫"成最終的代碼.
Javascript測試工具: jest, mocha等等, 請根據需要選擇.
TL;DR;
微信小程序目前版本的API實現需要兼顧方方面面, 所以仍然使用callback寫法, 眾所周知的Callback-Hell是傳統js語法上的歷史問題, 但畢竟稱手的工具是開發效率的源泉. 因此筆者對當前版本的微信小程序API做了簡單的封裝weapp.
同時, 微信小程序框架本身專注于交互和UI的實現, 并未提供內置的狀態管理, 如果眾多的異步操作都直接在App或者Page中一一實現, 相信寫起來會是一場噩夢, 而且不易于測試, 筆者又因此針對微信小程序實現了一個基于Redux方案的狀態管理模塊, 用以方便的在小程序中實現應用狀態管理redux-weapp.
特別地, 微信小程序構建(編譯)時不支持從App scope之外require文件, npm在此就不好用了. 所以, 我們需要實時build依賴到應用本地, 在微信小程序中引用本地的modules, 對于這種構建場景, 筆者認為webpack算是最方便的方案. 大家都說COPY到本地是最最最方便的方式~~
安裝工具和依賴模塊
開發者工具是用nwjs模擬的環境, 實際在微信中是JavascriptCore環境, 不過不用擔心, 只是兩個不同的vm, 本質是一樣的.
nwjs可能存在一些小bug, 寫代碼的時候注意一下就好.
下載微信小程序開發者工具
由于除了小程序運行時需要的模塊, 還有構建所需要的模塊, 看起來會比較多, 不過不用擔心, 大多數都是聲明性的, 不需要你直接調用.
為了方便經驗少些的同學理解, 我將這些依賴分步安裝.
代碼轉譯工具, Babel
```shell
npm install --save-dev babel-cli babel-core babel-loader babel-plugin-add-module-exports babel-polyfill babel-preset-es2015 babel-preset-stage-0
```
有了上面這些模塊, 就可以在構建時將ES6/7的代碼轉譯為ES5的代碼了(其實解釋器都只認ES5).
安裝打包工具, webpack
在此, 我們只需要對代碼進行打包, 不需要dev server和hot module replace功能, 因此只需要安裝webpack module本身, 無需安裝其他擴展和插件.
安裝Redux
由于在實際應用中, 我們經常會需要異步調用API服務器的接口, 所以需要redux-thunk這個模塊來處理[異步action](http://redux.js.org/docs/advanced/AsyncActions.html).
安裝開發小程序的輔助模塊
其中, weapp模塊是對微信小程序API的wrapper, 提供了更易于使用的API, redux-weapp是基于Redux對微信小程序進行狀態管理.
首先得寫webpack.config.js, 這個是必須的, 由于這個構建是為了本地化微信小程序的依賴, 因此只處理js文件, 若需要打包其他諸如css, image等資源, 請讀者自行研究. 實際上, 微信小程序包有1MB的上限.
test 筆者比較喜歡jest, 所以在此就用jest做范例了.
build 這里就是構建的命令了, 成敗在此一舉 :)
總算進入正題了(工欲善其事,...), 借助上述的weapp和redux-weapp, 希望你會感到很舒服~~.
在這個范例中, 我們目標是去查詢 github/octokit 的開源項目, 并顯示在小程序中.
定義store: /es6/store.js
這里只是簡單的范例, 實際中會有比較復雜的store shape, 需要引入更多的middleware來處理動作和狀態的變化.
定義reducers: /es6/reducers.js
Reducer就是處理因Store dispatch actions時發生的狀態變化的function, 參數總是為(state, action)
定義actions: /es6/actions.js
Action通常是個Plain Object, 總是被Store dispatch, 描述了"發生了什么, 結果是什么"的邏輯
myapp模塊入口: /es6/myapp.js
入口文件: app.js 和 app.json
app.json
頁面邏輯: projects.js
如上定義, 小程序的啟動頁面是projects
頁面UI: projects.wxml
后記
范例代碼未實際運行, 僅用以表示開發步驟, 我會盡快把這個范例實現完整, 放到github上.
最后, 謝謝您耐心閱讀至此!
參考
https://github.com/nwjs/nw.js/issues
http://redux.js.org
https://webpack.github.io
https://facebook.github.io/jest/docs
https://babeljs.io
https://github.com/xixilive/weapp
https://github.com/xixilive/redux-weapp
推薦閱讀
2016 年度最受歡迎中國開源軟件 TOP 20，看看你最愛的軟件排第幾？
點擊閱讀原文查看更多精彩內容
關注微信
