小程序项目构建（一）

当我们在准备开发微信小程序之前，首先要进行框架选型。现在微信小程序框架有好几种，我们该怎样来选择一个适合自己项目的框架呢？

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 多环境切换

因为小程序只会存在一个预览版本，所以测试同学需要在其他环境测试时，都需要找到开发同学手动更改环境并重新发布体验版，非常之麻烦。
所以打算利用微信摇一摇来实现环境的切换。
由于这周时间比较紧张，所以下次再贴代码实现吧！

其他的相关问题想到再补充，大家也可以提一提自己的看法。