前言
前段时间加入了开发小程序的队伍,我可算是把所有的坑的踩了。
现在把开发中那些注意点和各位小伙伴分享下。
一、小程序无法多图同时上传
uni.uploadFile只能支持单图上传,没上传一张调用一次接口,因此建议使用将所有请求放在promise里面进行发送。
这块要注意的点:
uploadFile需要设置域名
编辑图片获取图片信息时,需要用getImageInfo获取小程序帮我们暂存的图片路径。同时也要设置域名。
- 小程序在真机调试的时,图片可以成功上传,体验版本不打开调试无法上传。这块问题定位也是上传图片的域名问题,可能后台给的图片域名线上和线下不同。
二、小程序Json.parse时遇到特殊字符报错
场景:页面A跳转到页面B携带大量信息拼接在url后传送。
跳转之前将大量信息转成json字符串,然后在B页面Json.parse。
A页面
let transferData= JSON.stringify(data);
B页面
let getData = JSON.parse(transferData);
-
解决方案一
先将Stringify后的数据进行编码,然后再转换之前进行编码,这样可以解决特殊字符串jsonparse报错问题。
A页面
let transferData= JSON.stringify(data);transferData = encodeURIComponent(transferData);
B页面
let getData = JSON.parse(decodeURIComponent(transferData));
弊端:但是因为数据是拼接再url后面的,数据过长被截掉了怎么办?因此让我们看下解决方案二
- 解决方案二
使用uni.$emit进行通信,这种方法不适用此场景。因此A页面跳转到B页面,B页面还未加载。
这种方式使用在A页面监听,打开B页面时,B页面触发A页面的监听事件,这时候A页面接收到B页面的数据。
// A页面
onLoad(){
// 监听事件 (获取B页面的数据)
uni.$on('login',(usnerinfo)=>{
this.usnerinfo = usnerinfo;
})
},
// B页面
uni.$emit('login', {data:'这是我要给A页面的数据'});
很明显这种方法不适用于此场景
-
解决方案三
使用vuex进行通讯
解决方案四
使用globalData。
globalData是一种比较简单的全局变量使用方式。
在小程序中有globalData的概念,uni-app也实现了此功能,在App.vue可以定义globalData。
赋值:
A页面
getApp().globalData.text = 'aliasName'
取值:
B页面
console.log(getApp().globalData.text) // 'aliasName'
页面渲染:
globalData的数据渲染,可以在页面的onShow生命周期进行操作。
弊端:但是!!globalData如果在当前页面刷新,定义的globalData就失效了。
原因很简单,这个不是本地缓存,是一种变量缓存刷新就会消失。
- 最终方案
最后决定用本地缓存在解决
uni.setStorageSync('传输的数据名称key', encodeURIComponent(JSON.stringify(data)));
JSON.parse(decodeURIComponent(uni.getStorageSync( '传输的数据名称key')));
弊端:目前这种解决方式的弊端查了下:小程序的数据缓存,最大支持10M。我们需要传输的数据是字段串类型,不会超过10M,因此此种方式暂时安全。【万一后续需求改了呢】
三、原生组件遮挡弹出框问题
弹出框被原生组件遮挡的问题可以在弹出框中使用cover-view来代替view,但是这会导致弹出框的显示效果发生变化,需要修改弹出框的样式。
更好的替代方法是:
如果原生组件是canvas,可以在弹出对话框时用image代替canvas。
如果原生组件是textarea则可以使用view来代替
四、小程序给scroll-view设置vh
在iphonex的尺寸下,scroll-view设置固定高度为100rpx,不会影响页面其他地方的滚动
{F179638}
但是切换到别的设备比如iphone5,scorll-view还是会占据相同的高度,会导致底部的数据【红色块】无法显示,只能通过页面滚动查看这个页面所有的数据。
因此设置将XXXrpx设置为 XXvh。
- vh是相对于视口的高度。视口被均分为100单位的vh
h1{font-size:8vh;}
如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
五、微信小程序运行的时候总是提示Uncaught TypeError: Cannot read property 'call' of undefined
场景:刚开始代码小不出现错误,到后来项目越来越大,代码和创建的页面多了起来,差量编译就开始报错了,而且越来越频繁,仅仅是我在js中删除了一行空格再ctrl+s 差量编译都开始报这个错误,特别是速度很快连续的ctrl+s 差量编译 时特容易报错,非常影响开发效率,报出来错误只能在uni中ctrl+f5重新整个编译,干等时间非常长。
ps:查了一下目前官方还没给出解决方案。也有说是运营商的问题。。。 在此记录下