小程序本质上是类似 `React` 的 MVC 框架，不过就小程序的 API 来说，很有鹅厂一贯简陋风格。虽然支持 ES6 转 ES5，但支持的不完全，很多功能无法使用。其中一个版本更是把内建 `Promise` 移除，且不支持 require npm 模块。
在抛弃 html、css之后，自己搞了一套 wxml、wxss，不支持类似 less、sass 语法。至于官方的编辑器，采用 `nw.js` 开发，效率低下、各种问题层出不穷，开了一会内存占用就飙高，要不就假死，如果你遇到编辑器有任何不正常的情况，重启总是唯一正确的解决方法，总之用来看效果就行了。
### 异步回调
小程序有很多异步回调的 API，比如这个场景：用户第一次使用，首先获取用户系统信息，判断版本兼容性，获取用户授权信息，上传到服务器，换取服务器授权 token，最后存到本地。这一共是3个回调，代码应该是这样的：
``` javascript
// 获取系统信息
wx.getSystemInfo({
success: function (res) {
// 获取用户微信信息
wx.getUserInfo({
success: function (res) {
// 上传授权信息
wx.request({
url: 'api server url',
success: function (res) {
// 缓存 token
wx.setStorage({
token
})
}
})
}
})
}
})
```
再加入一些逻辑判断，这个异步回调，真的吐血。最好的解决方法是 ES2017 标准中的 Async，代码可以简化成下面的：
``` javascript
async function () {
try {
let systemInfo = await wx.getSystemInfo()
let userInfo = await wx.getUserInfo
let oauthInfo = await wx.request({ url: 'api server url' })
wx.setStorage({ token })
} catch (err) {
console.error(err)
}
}
```
如果想要使用 Async，就必须要 Babel 来把代码装成 ES5。
### NPM 模块
`Promise` 本来是 ES6 标准，被小程序移除之后，需要手工引入一个 js 文件，如果还有其他的模块需求，就又要引入更多 js 文件，这又回到了远古前端的路子上，想要使用 `npm`，那就要 `Webpack` 来实现了。由于文件数量多，最好是自动遍历 `src` 文件夹，找出所有需要编译的 js 文件，需要 `gulp` 支持。
`gulpfile.js` 配置如下：
```
var gulp = require('gulp');
var named = require('vinyl-named');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
// Webpack 配置
var config = {
resolve: {
root: path.join(__dirname, 'node_modules'),
extensions: ['.js']
},
output: {
filename: '[name].js',
},
module: {
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
],
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
// 配置 babel
babel: {
"presets": [
"es2015",
"stage-0"
],
"plugins": [
"transform-runtime",
"transform-es2015-arrow-functions",
"transform-async-to-generator"
],
"sourceMaps": true
}
};
// 编译 ES2017
gulp.task('compileJS', function () {
return gulp.src(['src/**/*.js'])
.pipe(named(function (file) {
var path = JSON.parse(JSON.stringify(file)).history[0];
var sp = path.indexOf('\\') > -1 ? 'src\\' : 'src/';
var target = path.split(sp)[1];
return target.substring(0, target.length - 3);
}))
.pipe(webpackStream(config), webpack)
.on('error', function (err) {
this.end()
})
.pipe(gulp.dest('dist'))
})
```
### Sass 支持
Sass 就比较简单了，使用 `gulp-sass` 编译，然后修改文件后缀成 `wxss` 就行了。