小程序初踩坑

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

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

写在前面

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

未完待续。。。

云服务器 GPU云服务器初踩坑小程序小程序小程序附近小程序门店小程序小程序

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

转载请注明本文地址：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