小程序项目构建（一）

当咱们在准备开发微信小程序以前，首先要进行框架选型。如今微信小程序框架有好几种，咱们该怎样来选择一个适合本身项目的框架呢？

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

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

其余的相关问题想到再补充，你们也能够提一提本身的见解。