微信小程序之音视频踩坑

产品：需要做个音视频相关的产品
我：哇哦，那可太兴奋了，没有做过的领域，那肯定非常有意思？
产品：巴拉巴拉过需求
我：吭哧吭哧写需求，为什么这么多坑？？？

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

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高度

js 复制代码

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里面的参数的？

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

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