美文网首页
小程序入坑指南

小程序入坑指南

作者: 萨默塞特酱 | 来源:发表于2017-06-14 23:20 被阅读0次

    小程序原理

    小程序本质上也是一个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之间是异步的,如果用户点击太快那么很可能stopRecordstartRecord的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
    • 背景图不支持本地图片

    相关文章

      网友评论

          本文标题:小程序入坑指南

          本文链接:https://www.haomeiwen.com/subject/lfaxxxtx.html