小程序初踩坑

写在前面

一直有在关注小程序，也做过一些demo，不过一直没上正式项目，刚好这次公司有小程序的项目就入坑了。项目开发完，记录一下遇到的一些坑吧。

框架选用

框架方面有关注wepy和mpvue，wepy是腾讯内部的框架，发布时间较久，社区也较完善，相对稳定。mpvue是美团刚出的小程序框架，也很不错，可以直接用Vue的写法去进行开发，学习成本较低，缺点是刚推出，虽然美团内部有在使用，不过社区还没起来。项目比较赶，还是选择较稳定的wepy了。

下图为美团提供的一张框架对比图，具体对比可以参考下，需要注意的是wepy目前也可以用wepy-redux进行数据管理了。

正文

坑一：wepy methods function

wepy的methods与Vue中的methods使用方式不太一样。wepy的methods主要存放响应wxml中所捕获到的事件的函数，如果想在onLoad或者其他函数中调用methods中的方法，使用this.funcname()是没办法调用到的，需要this.methods.funcname()。想把函数挂载在实例下，可以直接在class中定义函数就可以了，与onLoad同级。

<template>
    <button @tap="function1"></button>
</template>

<script>
    import wepy from 'wepy';
        
    export default class Page extends wepy.page {
    
        methods = {
            function1() {
                console.log('function 1');
            }
        };
        
        function2() {
            console.log('function 2');
        }
    
        onLoad() {
            this.methods.function1();
            this.function2();
        };
    }

</script>

坑二：小程序默认页

小程序是以config中的pages数组的第一个元素作为默认页的，如果需要更改默认页则需要更改对应的数组顺序。

{
  "pages":[
    "pages/index",
    "pages/page2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

坑三：wx.drawImage使用网络图片

当使用网络图片进行wx.drawImage的时候会出现黑色的底图，原因是wx.drawImage无法直接加载网络图片，需要先使用wx.downloadFile下载文件资源到本地，在回调函数里使用tempFilePath进行wx.drawImage，或者页面初始化时预加载，保存tempFilePath。

const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success: function(res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    ctx.drawImage(res.tempFilePath, 0, 0, 150, 100)
    ctx.draw()
  }
})

坑四：在 微信6.6.1版本，wx.drawImage 当 sy > sHeight 绘制不出图片

官方bug，已在微信6.6.2修复

const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(img, 0, 999, 800, 950, 0, 0, 400, 475) // 出现黑色底图

坑五：放大canvas尺寸后首次wx.drawImage，图片会出现黑边

原因是更改canvas尺寸后，canvns还没重绘完成就执行了wx.drawImage，所以会出现图片绘制不全的情况。解决方案是使用一张足够大的画布，在上面进行drawIamge，wx.canvasToTempFilePath的时候输出图片大小传drawImage的宽高。

坑六：invokeCanvasMethod 数据传输长度为 1372965 已经超过最大长度 1048576

需求是操作三张图片的imageData进行合成图片，但是结果canvasPutImageData的时候报数据传输长度超出最大长度1M，
但是压缩到1M后图片质量又很模糊（最大只有510*510像素）。
解决方法是将imageData通过JPEG库转成ArrayBuffer，再通过wx.arrayBufferToBase64转成base64，一顿操作之后终于没有1MB的限制了，但是操作数据也不宜过大，不然会导致页面卡死。

let arrBuffer = new JPEG().encode(resultImgData, 100, true)
let res = `data:image/jpeg;base64,${wx.arrayBufferToBase64(arrBuffer)}`

坑七： iOS 微信6.6.2分享后页面点击不响应

官方bug，已在微信6.6.3修复

未完待续。。。