微信小程序踩坑

1,521 阅读2分钟

入职第一个接触的项目就是微信小程序了,在经历过断断续续的几个月开发后,最大的感受就是.......小程序真的真的真的太多坑了。

在这里插入图片描述
下面总结一下个人在实战中真实踩过几个的坑,希望大家可以尽快避开雷区,早日完成开发任务~

1小程序canvas画不出东西,始终是空白

场景:在自定义组件中使用小程序自带的方法来创建canvas,结果不管怎么调试始终都是空白...

解决:wx.createCanvasContext只传一个参数是不够的,需要再传入第二个参数this,如下: var context = wx.createCanvasContext(mycanvasid,this)

但是...性能实在是太差了...很卡顿!!后来果断放弃使用小程序自带的canvas,直接通过webview嵌套一个h5页面进去。

02 小程序webview发送post请求返回403 Invalid CORS request

场景:项目中有个功能是截屏保存到手机中,截屏用的是html2canvas,转成base64,通过接口转成网络图片,再使用小程序的api(wx.saveImageToPhotosAlbum)来保存到本地,而base64太长了!!需要 通过post请求传json数据(base64图片)到body中,格式如下:

在这里插入图片描述
解决:去掉header里面的Content-Type字段即可
在这里插入图片描述
在这里插入图片描述

03跳转遇到的坑

页面跳转中,通常存在的以下几个问题:

①、首先检查页面是否在app.json中注册,不注册是找不到页面。 ②、查看一次性跳转页面的层级数量是否超过5层(是,选择wx.redirectTo)。 ③、查看要跳转的页面是不是tabBar页面(是,选择 wx.switchTab)。

04组件引用wxss样式错乱

警告:Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

解决:在微信开发者工具设置调高版本即可,步骤如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

05 子组件WXSS样式文件失效处理

场景:父组件里面引用子组件,子组件样式失效

解决: 1.在全局app.wxss中引入子组件的样式,如

@import "pages/路径/子组件样式文件.wxss";

2.在子组件的js文件里面添加上下列代码

在这里插入图片描述
以上!!!欢迎一起交流学习,评论区见~~