五一、微信小程序开发中踩过的坑(遇到的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. 支持imagesrc放置svg。但是不支持直接在wxml里面直接使用svg
  3. 录音音频,旧版的是silk格式,和公众号开发的时候一致。而新版可以自己选择aac
发布了82 篇原创文章 · 获赞 56 · 访问量 16万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览