微信小程序填坑篇 2

微信小程序开发的时候，很多接口都不太能信任，需要作一些额外的兜底处理。保证程序在什么情况下都能尽可能健康的运行。也要有一套健全的异常收集反馈机制，方便迅速发现问题解决问题。小程序生态的异常监控体系，主要包含小程序后台的代码运行报错，小程序告警群的使用，具体用户的信息收集上报，代码逻辑中可能的预警上报统计，微信新版本的内测跟进等方面。

1.css支持。

在ios12上 css3的支持不够好。有时候动画animation的forward无效。现象是动画结束后突然回到初始状态。

极少数ios机型会出现animation-delay失效的情况。

不同组件之间的animation-name如果一致的话会被覆盖，整个小程序中需要确保没有重复的animation-name。

2.横竖屏问题

rpx单位计算错误问题，比如从竖屏页面进入横屏页面，再返回竖屏页面，页面元素可能变得特别大，超出屏幕。横竖屏切换时小程序内部的rpx单位计算错误，解决办法是不使用微信小程序的rpx单位，使用vh,vw单位。横屏页面一般使用vh,竖屏页面一般使用vw。如果小程序已经使用rpx开发完了，可用node脚本替换单位。

早期的微信版本不支持横屏。

3.canvas问题

触摸事件失效。在canvas和canvas外层绑定touchend事件。业务逻辑中作事件的去重处理。

canvas上画的线条层级比正常元素高，如果正常元素要显示在上层，可以用cover-view放在canvas上层。但是cover-view的pointer-events:none;不生效，事件无法穿透到canvas上。可以在cover-view上层使用一个与canvas同样大小的cover-view来承接事件并作坐标转换处理。

4.音频支持。

播放音频不完整。锤子手机百分百出现。小米手机小概率出现。可能使用mp3格式音频会好一些。

获取音频播放进度的接口不准确，一个是更新频率不一定能满足，二个是有时候播放结束之后进度会突然跳到不正确的位置。对于做单词高亮效果等效果影响比较大。解决方案是不用原生的接口获取播放进度，而是使用定时器自己获取从播放开始的时间到当前时间的时间差，从onPlay事件触发的时候开始计时，到onEned事件时结束。需要小程序音频提前下载好再播放，否则拿到的也不准了，如果暂停了或被打断了，就重新播放。

onEnd事件不执行。解决办法在播放结束需要执行回调的情况，需要设置一个最大的预期播放时间（如果能拿到duration就用duration加一点点），超过了这个时间无论它有没有执行onEnded事件，都执行一下回调。保证回调能执行到。注意控制回调只执行一次。

5.ios音频问题。

微信7.0.5 对下载好的音频的临时地址无法播放。

微信7.0.12 出现音频0.5倍速播放的情况。与代码中onPlay之前的定时器有关系。

6.录音支持。

有时候设备首次调起录音时间很长，可能超过30s。本地模拟的话在网特别差的情况能重现出来。解决办法是进入小程序之后先调起一次录音。真正要调用录音的时候就会比较快了。

部分机型调起录音失败，会报一些录音机内部的错误，需要重启手机。

录音分片接口onFrameRecorded不稳定。
有时候最后一帧isLastFrame会返回false。可结合定时器和stop接口作一些兜底处理，保证相关回调一定能执行。

7.小程序自带tab组件可能导致黑屏。

可自己实现tab组件。

8.网络接口有时候不太稳定。可增加重试机制。

9.华为平板问题。

微信小程序对华为平板的兼容不是很理想，多个微信版本上华为平板上出现了横屏显示问题。7.0.13，7.0.14，7.0.18等。可以通过引导用户修改机器的一些设置来解决。

华为平板进小程序的时候，如果设备处理横放状态，可能无法进入小程序。需要竖屏进入。

10.部分机型7.0.9之后的版本容易出现闪退。

主要是vivo x7 x6,x5，以及部分小米低端机型。可以考虑安装旧版本微信。

11.黑白屏、闪退问题。

可以尝试清下微信缓存。关闭后台程序。重启设备等方案。

12.接口获取到的数据不准确问题

小概率微信接口拿到的设备型号不对，比如部分ipad机型识别不出来是ipad，可以用屏幕长宽比来加强判断。确保ipad适配生效。

获取右侧胶囊位置不正确的情况。可能需要一些校正。

github地址：微信小程序填坑篇 2 https://github.com/liusaint/ls-blog/issues/42