小程序項目構建（一）

當咱們在準備開發微信小程序以前，首先要進行框架選型。如今微信小程序框架有好幾種，咱們該怎樣來選擇一個適合本身項目的框架呢？

1. 框架選型

下面列出原生框架和一些主流框架之間的對比：

	原生	mpvue	wepy	taro
語法	小程序	vue.js	類vue.js	react.js
標籤	小程序	html + 小程序	小程序	小程序
組件規範	小程序組件	vue 組件規範	小程序自定義組件	react 組件規範
樣式規範	wxss	sass, less, stylus	sass, less, stylus	sass, less, stylus, CSS Modules
多端複用	小程序	H5, 小程序	H5, 小程序	H5, RN, 小程序
數據管理	無	Vuex	Redux	Redux/Mobx/Dva
自動構建	無	webpack	框架內置	webpack
成本	學習小程序	學習 vue	學習 vue 和 wepy	學習 react

能夠看到：原生框架在自動構建、 css 預處理、數據管理和多端複用有必定的欠缺。

可是綜合考慮到咱們的業務需求和團隊成員，仍是選擇了使用原生框架進行開發：

1. 對多端複用的需求較弱;
2. 團隊裏熟悉 vue 和小程序語法的同窗較多;
3. 時間有限，不想踩太多坑。

其實使用原生框架還有下面幾個好處：

1. 小程序特性更新迭代較快，能夠儘快使用新特性而不須要考慮三方框架更新的問題；
2. 排查問題、性能調優更方便。

那麼，既然選擇了原生框架，那麼接下來幾個明顯的短板問題須要解決。

2. 自動構建

小程序開發者工具其實已經提供了部分能力:

• ES7/ES6 轉 ES5
• 樣式補全
• NPM 包管理
• 壓縮混淆
• ...

剩下的構建工做涉及文件處理比較多，使用 gulp 開發效率較高，因此咱們使用 gulp 來進行工程化處理。

3. css 預處理

通常來講使用 less / sass / stylus 均可以。這裏使用 less 舉例：

gulp.task('wxss', function() {
    return gulp.src(['src/**/*.less'])
        .pipe(less())
        .pipe(minifyCss())
        .pipe(rename({
            extname: ".wxss"
        }))
        .pipe(gulp.dest('dist'))
});
複製代碼

4. 數據管理

小程序自己缺乏全局狀態管理和跨頁通信。 若是業務和邏輯沒那麼複雜，咱們可使用 globalData 或 localStorage 做爲數據中轉。 若是數據管理比較複雜，能夠考慮接入 westore 來解決這個痛點。

5. 經常使用方法的封裝

5.1 環境變量的控制

Env.js 中進行統一管理：

module.exports = {
  dev: {
    api: 'https://dev.api.com/'
  },
  test01: {
    api: 'https://test01.api.com/'
  },
  test02: {
    api: 'https://test02.api.com/'
  },
  production: {
    api: 'https://pro.api.com/'
  }
}
複製代碼

在請求時根據當前環境選擇相應配置：

let Env_config = require('./env/index')
let env = 'dev'

console.log(Env_config[env])
複製代碼

5.2 request 封裝

wx.request 是咱們向後端請求接口的 API。 在項目中，咱們要對其進行封裝，在 header 或 data 中加入公共參數，還須要對錯誤進行統一攔截，以及根據環境請求不一樣的接口。

getRequest: function(data) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: Env_config[env].api + data.url,
        method: data.method || "GET",
        header: Object.assign({
          "Content-Type": "application/json",
          "Server-Token": "xxxxxx"
        }, data.header),
        data: data.data,
        success: (res) => {
          if (res && res.statusCode === 200) {
            resolve(res)
          } else if (res.statusCode === 401) {
            wx.showToast({
              title: '登陸失效，請從新登陸',
              icon: 'none',
              success: function () {
                // 登陸失效的回調
              }
            })
          } else {
            wx.showToast({
              title: res.msg || '服務異常，請稍後重試',
              icon: 'none'
            })
            reject(res)
          }
        },
        fail: (err) => {
          wx.showToast({
            title: err.msg || '服務異常，請稍後重試',
            icon: 'none'
          })
          reject(err)
        }
      })
    })
  }
複製代碼

這樣咱們就能夠對封裝的接口進行 promise 化的處理：

app.getRequest({
    url: "api/test",
    data: {
      span: 30
    }
}).then(res => {
    // 成功回調
}).catch(err => {
    // 失敗回調
})
複製代碼

咱們也能夠對其餘的微信 API 作 Promise 化的處理封裝，避免在複雜的業務邏輯中陷入回調地獄。

若是想支持 async/await 的語法，能夠嘗試引入 facebook 的 regeneratorRuntime。

wx-promise-pro 這個將小程序異步 API Promsie 化的工具庫，也不失爲一種不錯的選擇。

5.3 多環境切換

由於小程序只會存在一個預覽版本，因此測試同窗須要在其餘環境測試時，都須要找到開發同窗手動更改環境並從新發布體驗版，很是之麻煩。 因此打算利用微信搖一搖來實現環境的切換。 因爲這周時間比較緊張，因此下次再貼代碼實現吧！

其餘的相關問題想到再補充，你們也能夠提一提本身的見解。