小程序原理

小程序本質(zhì)上也是一個MVVM框架，virtual dom，view和model的雙向綁定，配合小程序豐富的SDK可以搭建豐富的應(yīng)用。和React和Vue一樣，小程序也是數(shù)據(jù)驅(qū)動的，比他們更絕的是，小程序直接屏蔽了Dom操作。

開發(fā)環(huán)境搭建

開發(fā)環(huán)境的搭建主要參考了一下兩種方案：

• https://github.com/wepyjs/wepy Wepy
• https://github.com/lijiliang/wxApp 小程序gulp腳手架
  WePY 是一款讓小程序支持組件化開發(fā)的框架，提供類Vue的開發(fā)風(fēng)格。不過其引入了額外的語法，框架使用中可能存在不穩(wěn)定性。gulp腳手架提供了scss/less編譯和圖片base64轉(zhuǎn)碼，這里采用了gulp腳手架和VScode（搭配小程序相關(guān)插件）來搭建開發(fā)環(huán)境。

Feature和Bug

• 小程序的API大多是異步的，某些環(huán)境下可能造成API調(diào)用失敗。

touchstart() {
    wx.startRecord({
      success: function (res) {
        this.tempFilePath = res.tempFilePath
      },
      fail: function (res) {
        //錄音失敗
      }
    })
  },
  touchend(){
    wx.stopRecord();
    console.log(this.tempFilePath)
  }

這里實現(xiàn)一個按下錄音，抬手錄音成功的功能。由于API之間是異步的，如果用戶點擊太快那么很可能stopRecord比startRecord的callback先調(diào)用，因此造成錄音失敗。如果在touchend中獲取錄音臨時文件路徑很有可能也是獲取失敗的。

• 小程序支持ES6，但是Promise需要引入額外的polyfill。由于小程序接口的異步性，為了監(jiān)聽API的狀態(tài)需要接入大量的回調(diào)函數(shù)。代碼組織上非常不優(yōu)雅，回調(diào)也會造成維護上的困難，為此我引入了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
• 背景圖不支持本地圖片