微信小程式的 API 實作需要兼顧方方面面，所以仍然使用 callback 寫法。
眾所周知，Callback-Hell（回調地獄）是傳統 JS 語法上的歷史問題。但畢竟稱手的工具是開發效率的源泉，因此筆者對目前版本的微信小程式 API 做了簡單的封裝－weapp。
同時，微信小程式框架本身專注於互動和 UI 的實現，並未提供內建的狀態管理。如果眾多的非同步操作都直接在 App 或 Page 中一一實現，相信開發起來會很困難，而且不容易測試。
因此，我又因此針對微信小程式實作了一個基於 Redux 方案的狀態管理模組，用以方便的在小程式中實作應用程式狀態管理 redux-weapp。
特別地，微信小程式建置（編譯）時不支援從 App scope 以外 require 文件，npm 在此就不好用了。
所以，我們需要即時 build 依賴到應用程式本地，在微信小程式中引用本地的 modules。
對於這個建構場景，我認為 webpack 算是最方便的方案。
從官方文檔，了解微信小程式是什麼；
了解Redux應用狀態管理方案，同時它也是Flux 架構的具體實作；
#了解JavaScript 打包工具webpack;
了解ES6/7 代碼轉譯（transcompile）工具Babel。原理是藉助語法分析工具，將程式碼解析成抽象語法樹後「重寫」成最終的程式碼；
類似 Jest、Mocha 等 JavaScript 測試工具，可以根據需要選擇。
開發者工具是用NW.js模擬的環境，在微信中，則是JavascriptCore 環境。
不過不用擔心, 只是兩個不同的 VM，本質是一樣的。
NW.js 可能存在一些小 bug，寫程式碼的時候要注意一下就好。
mkdir myappcd myapp npm init
由於除了小程式執行時所需的模組，還有建置所需的模組。
看起來會比較多，不過不用擔心，大多數都是聲明性的，不需要你直接呼叫。
為了方便經驗少些的同學理解，我將這些依賴分步安裝。
首先是程式碼轉譯工具Babel：
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：
npm install webpack --save-dev
我們只需要對程式碼進行打包，不需要 dev server 和 hot module replace 功能。
因此，我們只需要安裝 webpack module 本身即可，無需安裝其他擴充功能和外掛程式。
接下來，我們來安裝Redux：
npm install redux redux-thunk --save-dev
要注意的是，由於在實際應用中，我們經常需要非同步呼叫API 伺服器的介面，因此我們還需要 redux-thunk 這個模組，來處理非同步行為。
然後安裝開發小程式的輔助模組：
npm install xixilive/weapp xixilive/redux-weapp --save-dev
其中，weapp 模組是對微信小程式API 的wrapper，提供了更容易使用的API，redux-weapp 是基於Redux 對微信小程式進行狀態管理。
myapp
|- es6 # 源代码
|- myapp.js # 在app.js文件中require此文件
|- lib # 存放编译之后的js文件
|- pages # 小程序页面定义
|- projects
|- projects.js
|- projects.json
|- projects.wxml
|- projects.wxss
...
|- app.js # 小程序入口文件
|- app.json
|- app.wxss
|- webpack.config.js # webpack配置文件#首先得寫 webpack.config.js, 這個是必須的。
由於這個建置是為了本地化微信小程式的依賴，因此我們只處理 JS 檔案。若需要打包其他資源，請讀者自行研究。
而且，值得注意的是，微信小程式包有 1 MB 的上限。
// webpack.config.jsvar path = require('path'), webpack = require('webpack')var jsLoader = {
test: /\.js$/, // 你也可以用.es6做文件扩展名, 然后在这里定义相应的pattern
loader: 'babel',
query: { // 代码转译预设, 并不包含ES新特性的polyfill, polyfill需要在具体代码中显示require
presets: ["es2015", "stage-0"]
}, // 指定转译es6目录下的代码
include: path.join(dirname, 'es6'), // 指定不转译node_modules下的代码
exclude: path.join(dirname, 'node_modules')
}module.exports = { // sourcemap 选项, 建议开发时包含sourcemap, production版本时去掉(节能减排)
devtool: null, // 指定es6目录为context目录, 这样在下面的entry, output部分就可以少些几个`../`了
context: path.join(dirname, 'es6'), // 定义要打包的文件 // 比如: `{entry: {out: ['./x', './y','./z']}}` 的意思是: 将x,y,z等这些文件打包成一个文件,取名为: out // 具体请参看webpack文档
entry: {
myapp: './myapp'
},
output: { // 将打包后的文件输出到lib目录
path: path.join(dirname, 'lib'), // 将打包后的文件命名为 myapp, `[name]`可以理解为模板变量
filename: '[name].js', // module规范为 `umd`, 兼容commonjs和amd, 具体请参看webpack文档
libraryTarget: 'umd'
}, module: {
loaders: [jsLoader]
},
resolve: {
extensions: ['', '.js'], // 将es6目录指定为加载目录, 这样在require/import时就会自动在这个目录下resolve文件(可以省去不少../)
modulesDirectories: ['es6', 'node_modules']
},
plugins: [ new webpack.NoErrorsPlugin(), // 通常会需要区分dev和production, 建议定义这个变量 // 编译后会在global中定义`process.env`这个Object new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development')
}
})
]
}首先是程式碼測試指令 test。
由於我喜歡用 Jest，所以這裡也用 Jest 做範例。
// package.json"scripts": { "pretest": "eslint es6", //推荐进行静态检查 "test": "jest",
...
},
...,// jest允许在package.json中定义配置"jest": { "automock": false, "bail": true, "transform": { ".js": "/node_modules/babel-jest" //用babel转译
}, "testPathDirs": [ "/tests/"
], "testRegex": ".test.js$", "unmockedModulePathPatterns": [ "/node_modules/"
], "testPathIgnorePatterns": [ "/node_modules/"
]
}接下來，就是令人興奮的 build 指令。成敗在此一舉
以上是教你提升微信小程式開發效率的步驟來詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
