微信小程序开发踩坑合集

总结微信小程序开发中出现的bug及解决

---

1. 在手机相册中选择完图片后直接跳转会出现闪回的现象(19.4.9)

发现：在页面A打开系统相册选择图片后，在选择图片的成功回调中立即跳转到页面B进行图片裁剪的时候，会出现跳转到页面B后闪回到页面A的情况

原因：在选择完图片后，会重新执行一遍page的onShow生命周期

解决：在选择完图片后，做一个sleep延时1秒，再进行跳转

2. 通过命令行cli打包，在预览的时候会出现样式丢失的情况(19.4.9)

发现：开发了一个小程序自动打包生成预览码的平台，但是在使用过程中发现有时会出现页面样式丢失的情况，微信开发者工具版本为1.02.1902010

原因：在社区中查找发现有人有类似问题，但无解决方法，可能和开发者工具的版本有关

3. 小程序的点击事件不支持click，而只有tap

若出现点击事件不生效的情况，可以查看一下是否把tap写成了click，在使用wepy的时候很可能出现

4. wepy组件类型代码更新的时候编辑器不会同步更新(19.4.25)

原因：wepy生成代码原因，在修改组件DOM的时候，编辑器中不会同步更新

解决：重新执行npm run dev

5. 一些标签或按钮缺少一边的border(19.4.25)

发现：在6p机型会出现一边的border不显示的问题

原因：因为使用了rpx，1rpx被解析为0.5px，所以不显示

解决：当时按钮通过设置border: content-box解决，tag通过将1rpx设置为1px解决

6. new Date转化不了时间(19.4.25)

发现：在将后端传过来的时间转为timestamp和现在时间进行对比的时候，发现在ios上时间无法转换，接口返回的时间格式为2019-07-01

原因：ios中无法识别以-连接的时间

解决：将-替换为/

7. 输入框设置maxlength时，在输入法中输入拼音时就开始计算，导致文字无法选择(19.4.25)

发现：当为input或textarea设置了maxlength时，在打字时打到最后几个在输入法中拼音超出后就无法输入了，例如当前还可以输入一个字符，你想输入一个“是”，是的拼音“shi”有3个字符，超出了maxlength，导致怎么都输入不了，当一次输入多个词语的时候比较影响

解决：暂无

8. 小程序中的input组件聚焦时placeholder会往下跳一下(19.5.5)

解决：给input添加padding，1rpx即可，原因不明

9. 调试的时候不报错，关闭调试的时候出错(19.5.6)

发现：canvas画图的时候线上出错，开发调试时不出错

原因：头像通过canvas绘制，先将网络图片下载，但是头像的地址不在安全域名中，导致调试的时候没问题，但是线上出错

解决：将域名转为安全域名，遇到这种现象可以先看下是不是安全域名没有配置

10. wepy生命周期不被调用(19.5.31)

原因：wepy在同一个包之间跳转的时候，离开时只执行onUnload不执行onHide；在不同包之间跳转的时候，离开时只执行onHide不执行onUnload；小程序都只执行onHide，当关闭小程序时才执行onUnload

11.小程序中textarea层级太高，弹出层无法遮住

原因：textarea作为原生组件，层级比其他组件都要高，无论怎么设置z-index都是无效的

解决：弹出层使用cover-view组件，而不是view，最好通用的弹出框组件都使用cover-view，这样可以覆盖住所有原生组件