小程序原理
小程序本质上也是一个MVVM框架，virtual dom，view和model的双向绑定，配合小程序丰富的SDK可以搭建丰富的应用。和React和Vue一样，小程序也是数据驱动的，比他们更绝的是，小程序直接屏蔽了Dom操作。
开发环境搭建
开发环境的搭建主要参考了一下两种方案：
- https://github.com/wepyjs/wepy Wepy
-
https://github.com/lijiliang/wxApp 小程序gulp脚手架
WePY 是一款让小程序支持组件化开发的框架，提供类Vue的开发风格。不过其引入了额外的语法，框架使用中可能存在不稳定性。gulp脚手架提供了scss/less编译和图片base64转码，这里采用了gulp脚手架和VScode（搭配小程序相关插件）来搭建开发环境。
Feature和Bug
- 小程序的API大多是异步的，某些环境下可能造成API调用失败。
touchstart() {
wx.startRecord({
success: function (res) {
this.tempFilePath = res.tempFilePath
},
fail: function (res) {
//录音失败
}
})
},
touchend(){
wx.stopRecord();
console.log(this.tempFilePath)
}
这里实现一个按下录音，抬手录音成功的功能。由于API之间是异步的，如果用户点击太快那么很可能stopRecord比startRecord的callback先调用，因此造成录音失败。如果在touchend中获取录音临时文件路径很有可能也是获取失败的。
- 小程序支持ES6，但是Promise需要引入额外的polyfill。由于小程序接口的异步性，为了监听API的状态需要接入大量的回调函数。代码组织上非常不优雅，回调也会造成维护上的困难，为此我引入了Promise。
var Promise = require('../libs/bluebird.min')
function wxPromisify(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
resolve(res)
}
obj.fail = function (res) {
reject(res)
}
fn(obj)
})
}
}
var getLocationPromisified = wxPromisify(wx.getLocation)
getLocation({
type: 'wgs84'
}).then(function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}).catch(function () {
console.error("get location failed")
})
模块中export出去即可再其余页面引用
- 小程序打包体积不能超过1M
- 背景图不支持本地图片
