【鸿蒙课堂】微信小程序部分组件&API 鸿蒙端兼容适配方案(二)

【微信版本：8.0.15_64】

常见问题1：app.json中配置tabbar属性为position: top时，鸿蒙端和安卓端表现不一致

在鸿蒙端微信小程序中，app.json中配置tabbar时，设置属性position为top时，在鸿蒙端不起作用，安卓端可以正常显示tabbar在顶部。

图1. tabbar设置属性position为top时表现不一致

解决方案：可以使用自定义底部导航栏，通过定位实现位置变化；

常见问题2：wx.canvasToTempFilePath保存图片异常报错

鸿蒙版微信小程序，使用wx.canvasToTempFilePath把当前canvas画布指定区域的内容导出生成指定大小的图片，这个API对于宽高是有限制的，在鸿蒙端不同机型的手机对于宽高的限制不同，超出限制会报错。安卓端的限制远大于鸿蒙端。

经过测试发现：运行 HarmonyOS NEXT 操作系统的华为Mate60，宽高限制是小于等于2520、华为Pura80，宽高限制是小于等于4681；在Android操作系统下小米15手机，不明确具体宽高，但是高度设置到50000时，还可以生成成功，但有卡死闪退的概率，高度设置到60000时会报错。

图2. 微信小程序wx.canvasToTempFilePath保存图片问题

解决方案：建议使用canvas组件绘制图片时，根据wx.getDeviceInfo获取设备的类型进行判断，如果是鸿蒙设备则宽不要超过2520，或者高不要超过4681；安卓设备的高不要超过50000，来控制图片尺寸来暂时规避wx.canvasToTempFilePath保存图片失败的问题。

常见问题3：wx.createInnerAudioContext创建的音频上下文对象，设置src地址包含中文无法播放问题

微信小程序中，使用wx.createInnerAudioContext() 创建内部 audio 上下文，设置src属性的音频链接，当设置的音频链接中存在汉字时，如：https://qcy.tos-cn-beijing.volces.com/ai_travel/voice/普宁寺/山门.mp3，鸿蒙端播放报错触发onError，安卓端可以正常播放。

图3. wx.createInnerAudioContext无法播放问题

解决方案：建议开发者设置地址如果包含中文，可以先通过encodeURIComponent()进行编码，然后赋值到src中，鸿蒙端和安卓端都可正常播放。