五一、微信小程序开发中踩过的坑（遇到的bug）

CSS

1. 能使用calc
2. 官方组件的样式可以通过!important覆盖

JS事件

1. 需要注意微信提供的接口是否为异步的，跨页面的异步数据可以通过app.globalData 或者在app这个变量上添加回调来通信
2. 授权和登录是两回事。登录是用户无感知的，获取到code 和后端通信获得openid来定位用户。而授权才能获取用户头像和名字等信息

3. 事件冒泡和捕获的bug:如果是view绑定事件，会存在子组件触发事件，即使用事件捕获也没法阻止。但是用button就不存在这样的问题。建议有点击事件的都应该使用button

   //给当前view绑定一个tapNav事件<view class="btn" bindtap="tapNav" data-nav="1"></view>//给当前view绑定一个tapNav事件<view class="btn" bindtap="tapNav" data-nav="1">  <view data-nav="2"></view></view>// 读取当前执行事件的view data-nav值打印出来// 第一个打出1// 第二个如果点击的位置是子view的话，会打印出2.tapNav:function(event){  console.log(event.target.dataset.nav)},

4. 单次设置的数据不能大于1024KB，否则会崩掉
5. 无论是bindscrolltoupper 还是 bindscrolltoupper做上拉下拉刷新都需要注意这两个事件是会多次调用的。需要一个标识符来拦截多次调用。下拉刷新建议用
6. this.setData()修改数据是异步的，因此不能用它来做上下拉刷新的标识符
7. 页面路径只能是五层，请尽量避免多层级的交互方式。
8. 路由传递参数bug: 比较长的字符串作为参数应该放在最后。
   javascript
const TestUserData = {
header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90",
name: "哈哈哈哈",
text: "红鲤鱼和绿鲤鱼与驴",
}
// 跳转之后只能读取到header
wx.navigateTo({
url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`,
})
// 跳转之后三个参数都能读取
wx.navigateTo({
url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`,
})

   
   1. 授权弹窗如果用户很久不响应的话，就会调用失败

模拟器bug

1. 在路由跳转的时候，模拟器偶尔会系统报错。频繁跳转出现概率比较高，但仅仅在模拟器出现。可以无视

   经过测试，因为页面跳转是有动画时效的，在动画进行中当前页面还能操作。如果双击当前跳转按钮机会进行两次跳转。第二次点击的时候小程序内置的路由栈是已经定位到了新的页面了，而这时候在按照原来的路由栈去定位当前页面，因此会报错。所以页面跳转按钮需要进行短时间多次点击的限制

2. 跳转客服页面的功能绑定在普通的button上在模拟器点击是没有任何效果

素材

1. 素材引入使用相对路径
2. 支持image内src放置svg。但是不支持直接在wxml里面直接使用svg
3. 录音音频，旧版的是silk格式,和公众号开发的时候一致。而新版可以自己选择aac