小程序初踩坑

RyanHoo 发布于2019-08-26 11:53 / 1078人阅读

摘要：写在前面一直有在关注小程序，也做过一些，不过一直没上正式项目，刚好这次公司有小程序的项目就入坑了。是美团刚出的小程序框架，也很不错，可以直接用的写法去进行开发，学习成本较低，缺点是刚推出，虽然美团内部有在使用，不过社区还没起来。

写在前面

一直有在关注小程序，也做过一些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同级。

坑二：小程序默认页

小程序是以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修复

未完待续。。。

超融合服务器私有云初踩坑小程序小程序小程序附近小程序门店小程序小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107774.html

小程序踩坑记录

摘要：小程序踩坑记录小程序现阶段缺陷还很多，在安卓手机上的性能也是很糟糕，估计实用性还不高。路由设置必须有序小程序的页面都必须在注册，但这不是随便登记一下就行了，页面登记的顺序一定是有层级关系的。小程序踩坑记录小程序现阶段缺陷还很多，在安卓手机上的性能也是很糟糕，估计实用性还不高。一步一步都是坑，这里作为个人踩坑收集用（内含吐槽），也是经验分享，欢迎issues讨论。框架部分 1、残念...

lily_wang 2019-08-20 15:41 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 评论0 收藏0
FE.WX-小程序“无聊广场”游戏前端性能优化与踩坑攻略

摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。背景一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...

qpal 2019-08-22 18:26 评论0 收藏0