小程序开发中的漏洞[初学者必备]
小程序开发
浏览：756 次
前言
前段时间，我加入了开发小程序的团队，我踩下了所有的漏洞。
现在，让我们与合作伙伴分享开发过程中的注意事项。
1、 小程序无法同时上载多个图像
uni.uploadFile只能支持单个地图的上传，每次上传都会调用一次接口。因此，建议发送承诺中的所有请求。
注：
uploadFile需要设置域名
编辑图片以获取图片信息时，您需要使用getImageInfo来获取小程序临时为我们保存的图片的路径。同时设置域名。
当小程序在真实机器上调试时，图像可以成功上传。未打开调试，无法上载体验版。这个问题也是上传图像的域名的问题。背景给出的图像域名可能在线和离线不同。
2、 当小程序Json.parse遇到特殊字符时，会报告错误
场景：页面A跳转到页面B，携带大量在url之后拼接和传输的信息。
在跳转之前，将大量信息转换为json字符串，然后单击B页面上的json.parse。
第A页
let transferData=JSON.stringify（数据）；
第B页
让getData=JSON.parse（transferData）；
解决方案1
首先在Stringify之后对数据进行编码，然后在转换之前对其进行编码。这可以解决特殊字符串的jsonparse错误报告问题。
第A页
let transferData=JSON.stringify（数据）；transferData=编码URI组件（transfer数据）；
第B页
让getData=JSON.parse（decodeURI组件（transferData））；
缺点：但是因为数据是在url之后拼接的，所以如果数据太长并且被截断了怎么办？所以让我们看看解决方案二
解决方案II
使用uni$发射以进行通信。此方法不适用于此场景。因此，页面A跳到页面B，而页面B尚未加载。
此方法用于在页面A上侦听。当打开页面B时，页面B触发页面A上的侦听事件。此时，页面A从页面B接收数据。
//第A页
加载（）{
//倾听事件（在B页获取数据）
uni.$on（'login'，（usnerinfo）=>{
this.usnerinfo=usnerinfo；
})
},
//第B页
Uni公司$exit（'login'，｛data:'这是我要给页面A的数据'｝）；
显然，此方法不适用于此场景
解决方案3
与vuex通信
解决方案IV
使用globalData。
GlobalData是使用全局变量的一种相对简单的方法。
小程序中有globalData的概念，uni app也实现了这个功能。在App.vue中，可以定义globalData。
<脚本>
导出默认值{
全局数据：{
文本：'lxc'
},
方法：{
··· ···
}
}
任务：
第A页
getApp（）.globalData.text=“别名”
值：
第B页
console.log（getApp（）.globalData.text）//“别名”
页面呈现：
globalData的数据呈现可以在页面的onShow生命周期中执行。
缺点：但是！！如果在当前页面上刷新了globalData，则定义的globalData将无效。
原因很简单。这不是本地缓存，而是可变缓存刷新。
最终计划
最后，我们决定使用本地缓存来解决这个问题
Uni公司。setStorageSync（'传输的数据密钥的名称'，encodeURI组件（JSON.stringify（数据）））；
JSON.parse（codeURI组件（uni.getStorageSync（'数据名称密钥传输'）））；
缺点：目前，该解决方案的缺点如下：小程序数据缓存最多支持10M。我们需要传输的数据是字段字符串类型，不超过10M。因此，这种方法暂时是安全的。[如果后续需求发生变化怎么办]
3、 本机组件遮挡弹出问题
封面视图可用于替换弹出框中的视图，以解决弹出框被本机组件遮挡的问题，但这将改变弹出框的显示效果，并且需要修改弹出框的样式。
更好的选择是：
如果本机组件是canvas，则在弹出对话框时可以使用图像而不是canvas。
如果本机组件是textarea，则可以改用view
4、 小程序为滚动视图设置vh
在iphonex的大小下，滚动视图的固定高度设置为100rpx，这不会影响页面其他部分的滚动
｛F179638｝
然而，当切换到其他设备（如iPhone 5）时，记分视图仍将占据相同的高度，这将导致底部的数据[红色块]无法显示。您只能滚动页面以查看此页面上的所有数据。
因此，将XXXrpx设置为XXvh。
Vh是相对于视口的高度。视口分为100个vh单位
h1｛字体大小：8vh；｝
如果视口的高度为200mm，则上述代码中h1元素的字体大小将为16mm，即（8x200）/100
