小程序入坑指南

小程序原理

小程序本质上也是一个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
• 背景图不支持本地图片