likes
comments
collection
share

微信小程序踩坑

作者站长头像
站长
· 阅读数 17
  • 产品：需要做个音视频相关的产品
  • 我：哇哦，那可太兴奋了，没有做过的领域，那肯定非常有意思？
  • 产品： 巴拉巴拉过需求
  • 我：吭哧吭哧写需求，为什么这么多坑？？？

下面来介绍一下遇到的坑：

1.微信原生组件swiper 在IOS中可能造成滑动时swiper-item上文字闪动消失？

解决方案：文字闪动的标签上加上样式will-change: transform;

2.live-player有时候会出现黑屏？

解决方案：用wx-if进行销毁再重新渲染

3.之前都正常，忽然有一天用授权摄像头，声音授权的时候报错“{ "errMsg": "A:fail api scope is not declared in the privacy agreement", "errno": 112 }”？

解决方案：使用到了 A 隐私接口，但是开发者未在[mp后台-设置-服务内容声明-用户隐私保护指引]中声明收集 A 接口对应的隐私类型。补充的隐私类型声明, 将在5分钟后生效。

4.样式穿透问题，微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上？

解决办法： 最靠谱的解决方法是弹出时，就把input框设置为view框，不能单纯的隐藏掉input框，因为当页面滑倒弹出框没有遮住的位置时，就什么都看不到了，这样也算是bug。

5.微信小程序有的组件固定在顶部，如果写死高度，每个手机高度不一致，导致不兼容？

解决方案： view都设置一个id属性，动态获取view高度

let query = wx.createSelectorQuery().in(this)
          query.select('#search').boundingClientRect().exec(function(res) {
  console.log("rect", res[0].height)
})

6.live-player获取网络质量，远端断网，获取的网络质量还是1（网络很好的状态）？

暂时还没解决：我们换了另一种方案

7.live-player比live-pusher先展示，进房之后远端会黑屏，远端还会收到我本端退房的消息？

暂时还没解决，换方案了

8.如果不打开调试工具，不配置合法域名，这个项目会跑不起来

解决方案： 老老实实去微信公众平台上-开发管理-开发设置-服务器域名上设置下

9.不是合法的域名，在本地怎么开发？

解决方案： 微信开发者工具-右上角详情-本地设置-勾上不校验合法域名那个选项

微信小程序踩坑

10.有的时候ios手机上好的，安卓手机上运行报错？

解决方案：我发现我的代码有可能会同步，所以我改成了异步，但是不知道为啥ios为啥一直ok

11.小程序切后台后，远端一直收到小程序退房消息（集成的腾讯音视频）？

解决方案：在页面存在 mode='RTC' 的 live-pusher 和至少一个 live-player 时，小程序在后台运行的情况下可以正常采集和播放音频，否则小程序在切后台时会终止音视频通话。

  • 看下这两个组件是不是都设置了mode='RTC'，我心大，以为默认RTC呢

  • 看下是否页面存在live-pusher 和至少一个 live-player

12.wx.uploadFile在微信真机调试看参数的时候，你是看不到formData里面的参数的？

解决方案：无，虽然看不到参数，但好在他传到服务端了，不慌

13.在ios手机上有个上下滑动，导致下面滑动滑动不了，给卡住似的？

解决方案：默认，安卓手机是没有问题的，而ios手机是可以的，因此需特别控制，在页面的xxx.json代码如下：


{
  "usingComponents": {},
  "navigationStyle": "custom",
  "disableScroll": true
}

14.json解析偶现报错:JSON Parse error: Unterminated string

SyntaxError: JSON Parse error: Unterminated string？

解决方案：这个报错是里面包含特殊字符导致的，下面方式完美解决


 wx.navigateTo({
      url: `../businessHandling/business/business?orderInfo=${encodeURIComponent(JSON.stringify(newDetail))}`,
    })
    
 在onload里面
 JSON.parse(decodeURIComponent(options.orderInfo));

15.用这个scroll-into-view实现页面触底，安卓手机有时候不生效？

解决方案：可能是this.setData执行导致的


// 我本来的代码
this.setData({
      msgList: list,
      prevTimestamp: newMessage.timestamp,
      isNewChat: true,
      scrollToView: 'scroll-bottom' // 滚动条置底
    })
    
 // 我后面改成下面这样ok了
 this.setData({
    msgList: list,
    prevTimestamp: newMessage.timestamp,
    isNewChat: true,   
   }, () => {
     this.setData({
       scrollToView: 'scroll-bottom' // 滚动条置底
     })
  })

16.用web-view预览pdf，pdf地址域名，在小程序配置中加了的，ios手机预览正常，安卓手机白屏？

解决方案：用web-view怎么都不行，我先encodeURIComponent再decodeURIComponent也不行，最后只能不用web-view了，最后如下解决的

const url = 'https://pre.kyvbank.weixintong365.com/upload/cache/pdfTemplate/1671095077346549760.pdf';
wx.downloadFile({
      url,
      success: function (res) {
        const filePath = res.tempFilePath
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      }
    })

17.用image标签写相同的宽高，图片看起来还给变形似的？

解决方案：给image标签加上这个mode="widthFix"这个属性，1s解决

18.有个需求是协议要用web-view打开预览，这个协议是word,之前提到过安卓预览word是白屏，因为安卓手机内部没有预览pdf或者word的东西，但是ios有的？

解决方案：我首先把给的word文件转成html文件，再用web-view打开，yyds，完美解决

18.wx.createSelectorQuery().in(this).select('#speak-box').boundingClientRect,这个page里面获取的位置是准确的，但是在component里面ios获取的位置不准确？

解决方案：一般情况下看来bottom是不准确的，我就判断手机有安全条的情况下bottom加上220，这个方案感觉有可能导致其他ios手机有兼容性问题，准确性，暂未验证，大家如果有啥好的方法填坑，可以评论告诉我下，大家一起探讨

 touchOnEnd: function({changedTouches}) {

    let {pageX,pageY} = changedTouches[0]
    console.log(pageX, pageY, '3333333')
    wx.createSelectorQuery().in(this).select('#speak-box').boundingClientRect((res) => {
      console.log(res,'2222')
      this.setData({
        speaking: false,
        canCancel: false
      })
      const bottom = this.data.isSafeArea ? res.bottom + 220 : res.bottom
      if (pageX >= res.left && pageX <= res.right && pageY >= res.top && pageY <= bottom) {
        console.log('取消')
        this.setData({
          isSendRcorder: true
        })
       this.triggerEvent('stop', true)
      }else{
        console.log('发送')
        this.setData({
          isSendRcorder: false
        })
        this.triggerEvent('stop', false)

      }
    }).exec()
  },
  1. 页面底部加了tabbar，发现wx.navigateTo跳转不了了？

解决方案：使用wx.switchTab进行跳转

  1. 使用进行wx.navigateTo跳转，来回切换，发现跳转不了了？

解决方案：使用**# wx.redirectTo**进行跳转，因为wx.navigateTo他小只支持页面栈最多十层，保留当前页面，跳转到应用内的某个页面。wx.redirectTo是关闭当前页面，跳转到应用内的某个页面

最后：有的想不起来了，再遇到继续更新

转载自:https://juejin.cn/post/7298926584123588635
评论
请登录