微信小程序踩坑

qm 11/8/2023 wx

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

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

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);
    });

1
2
3
4
5
6
7

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
}

1
2
3
4
5
6
7

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));

1
2
3
4
5
6
7
8

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", // 滚动条置底
        });
    }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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("打开文档成功");
            },
        });
    },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

页面底部加了 tabbar，发现 wx.navigateTo 跳转不了了？

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

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

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

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

判断用户是否已经授权

困芽芽de空间

Choose mode

微信小程序踩坑

微信小程序踩坑