小程序开发中的那些坑【新手必备】

前言

前段时间加入了开发小程序的队伍,我可算是把所有的坑的踩了。

现在把开发中那些注意点和各位小伙伴分享下。

一、小程序无法多图同时上传

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:查了一下目前官方还没给出解决方案。也有说是运营商的问题。。。 在此记录下

你可能感兴趣的:(小程序开发中的那些坑【新手必备】)