uniapp开发多端小程序(主要是微信和头条小程序)遇到的问题总结,纯干货!!!

1,083 阅读4分钟

uniapp不用多说了,开发小程序快捷方便,会vue就能上手,一套代码多端运行。uniapp官方文档对于不同平台的api兼容问题有做平台差异说明,自行查找各平台文档api再写条件编译即可,下面主要想说一下运行为头条小程序上遇到的自定义组件兼容问题和其他没说到的兼容问题。

1.使用了微信小程序自定义组件但是运行为头条小程序的时候组件找不到报错!!!

解决:这是因为区分了小程序组件存放目录,编译的时候区分平台直接复制过去了,将微信小程序自定义组件放在头条开发者工具中一键搬家功能即生成了头条小程序组件,放在src下面的ttcomponents里面,即便是这样还是会有组件属性不兼容的问题就需要具体排查了,如果还有一些样式在头条上不起作用可以尝试写在内联样式里面。

2.使用uni-popup第三方组件时里面的scroll-view组件在真机上滚动失效

解决:尝试了各种修改scroll-view组件的方法通通没用,最后发现去掉uni-popup.vue文件中控制滑动穿透事件的阻止事件冒泡就好了,@touchmove.stop.prevent改为@touchmove.prevent="clear",没办法只能折中一下了。

3.uni-popup里使用了自定义组件,不做任何操作关闭弹窗后第二次弹出,在头条上自定义组件样式状态并不随着组件内部data的改变而改变,然而微信小程序是完全没有任何问题的。。。

解决:在自定义组件标签上加上v-if="控制弹窗显示的变量",相当于每次弹出时强制刷新组件状态

4.uni.getClipboardData获取系统剪贴板内容,复制成功并不弹出提示

解决:虽然文档中说明设置剪贴板内容后,小程序平台会自动弹出轻提,但是实际上微信小程序只在ios手机上弹出提示,安卓手机不弹出,头条小程序则在ios和安卓上都不弹出,所以还是老老实实自行加toast提示吧,并不会重复弹出。

5.在头条小程序上canvas生成海报保存到本地后安卓手机上背景颜色显示为黑色问题,苹果手机倒是没啥问题,吐血。。。

解决:导致这个问题就在于canvas自己的fillStyle属性和小程序api canvasContext.setFillStyle属性的差异,微信小程序不同手机能兼容fillStyle属性,但是在头条小程序就不起作用了,把fillStyle改成setFillStyle就完美解决了,还是应该注意一下有时候原生api用习惯了。

6.保存canvas图片到本地模糊问题

解决:接着上一个问题而来的,在真机调试和开发工具上看着没问题了,但是头条小程序上保存到手机后发现非常的模糊,排查了各个api,最后发现是uni.canvasToTempFilePath(object, component)的问题,把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。canvasId是必穿的,其他都是非必传有默认值的,我传了canvasId,width和height,一开始以为是fileType和quality的原因,传了也没用,最后又把destWidth和destHeight也传了默认值才对了,最后发现就是这两个参数需要必传的原因,这也很坑爹明明不是必传的。

7.查看位置需要用户授权且不支持地图组件,这个没办法了头条没这个组件。

8.获取小程序二维码,扫码进入制定页面失败。

解决:头条小程序官方文档说小程序的 path 要 encode 一次,如 pages%3fparam%3dtrue,于是我用了encodeURIComponent对url进行编码,因为小程序还未上线也没法测试跳转对不对,结果等上线之后才发现跳转失败默认进入首页了,试着把encodeURIComponent去掉或者换成encodeUri后测试扫码终于进入了正确的页面。再次被官方坑了。

补充一下:encodeUri是对整个uri进行编码,encodeURIComponent 是对.com后面的一段进行编码。
encodeUri不会对本身属于uri的特殊字符进行编码(: / # ?),encodeURIComponent是对所有非标准字符进行编码


结语:目前总结了这几个问题,后面有新问题再更新,如果你们也遇到一些奇葩问题可以留言,大家一起交流探索。