教你提升微信小程式開發效率的步驟來詳解

微信小程式的 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，寫程式碼的時候要注意一下就好。

用npm 指令開始一個微信小程式專案

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')
      }
    })
  ]
}

定義 npm 指令

首先是程式碼測試指令 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中文網其他相關文章！