小程序 ----踩坑 ---安卓iOS兼容等

关于小程序一些小功能的代码都在这个GitHub上，感兴趣的可以去看看，
https://github.com/huihuijiang/miniProgram 目前有：列表左滑删除，拖拽浮标

 

一、小程序坑
1.scroll-view横向滚动的时候，包含文字图片等，元素错位，第二个元素掉下去；
hack：给子元素添加 vertical-align:top;

当使用scroll-view横向滚动时要注意几点：
父元素设置宽度，加上这两个样式overflow: hidden; white-space: nowrap;自元素设置成display: inline-block;vertical-align:top;

二、android 和 ios 兼容
1.不定宽高元素使用全铺背景图片，ios没有问题，安卓手机背景图片显示空白
hack: background-size:cover;(元素加上这一属性） 

2.安卓手机缓存严重问题

hack:在图片后再加上一串随机数

在wxs中：（有些iOS手机不能识别小数的随机数，所以最好用整数  var random = Math.floor(Math.random() * 10 + 1) * 9;

3.ios不支持默认最小定时时间（0或不写）

4.截取字符串遇到表情，安卓没问题，ios会报错；
hack:(判断是否有表情)

　　　　　　var reg = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;
　　　　　　var re = new RegExp(reg);
　　　　　　var en = str.slice(27, 29);
　　　　　　if (re.test(en)) {
　　　　　　　　title = str.slice(0, 27)
　　　　　　} else {
　　　　　　　　title =str.slice(0, 28)
　　　　　　}
5.getTime()时候，iOS必须把时间格式00-00-00转换成00/00/00

6.小程序获取胶囊按钮返回值（一直在变，目前的兼容代码

const self = this;
wx.getSystemInfo({
success: function (res) {
self.globalData.phonexh = res.model.indexOf("iPhone X");
var menuButton = wx.getMenuButtonBoundingClientRect();
//导航栏高度
self.globalData.totalTopHeight =
menuButton.height == menuButton.bottom ?
menuButton.height :
res.model.indexOf("iPhone") == 0 || (res.platform == 'android' && res.version == '7.0.3') ?
menuButton.top + menuButton.height + (menuButton.top - res.statusBarHeight) :
menuButton.top + menuButton.height + menuButton.top + res.statusBarHeight
//状态栏高度
self.globalData.statusBarHeight = res.statusBarHeight;
//标题栏高度
self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;

}
})

7.iOS使用overflow：auto；滚动会卡顿

hack：
-webkit-overflow-scrolling: touch

8.转发到微信列表的转发信息卡片图，iOS当图片尺寸不对时，会出现空白，安卓会自动截取左上角

9.iOS橡皮筋事件
hack：在page.json文件中
"disableScroll": true

10.iOS短时间多次扫码进入不会执行onload

11.new number（）强制转换结果为undefined
hack：用parsefloat
12.iOS图片加上阿里云编辑参数加载失败
Hack:binderror事件中对src重新复制，记得带上随机数，不然会因为路径一样不请求，有时候不是一次就能重新请求成功的，所以下一次获取的时候记得去掉随机数

loadimgerror: function (e) {
console.log("图片加载失败")
this.setData({
Src: e.target.dataset.src.split("?")[0] + '?' + Math.floor(Math.random() * 10 + 1) * 9
})
},

 

 

原文链接:https://www.cnblogs.com/jzh1991/p/11242737.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有