小程序 ----踩坑 ---安卓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
})
},
小程序 ----踩坑 ---安卓iOS兼容等的更多相关文章
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序踩坑之一[thist]使用技巧
刚上手小程序 时,习惯把this当成jquery中的$(this)来用,实际上这两个还是有差别的 在页面方法中调用其他方法,一般是用this.function(),直接调用小程序 的方法或函数则是用w ...
- 微信小程序踩坑之前端问题处理篇
近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在 ...
- 微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...
- 微信小程序踩坑之获取手机号
最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在 ...
- 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器
最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...
- 微信小程序踩坑
微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示
- 小程序踩坑之不同屏幕下动态改变translate值
案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...
- 微信小程序踩坑之一【weui-wxss-master单选按钮图标修改思路】
小程序原生所带的weui框架做小程序UI实在太方便了,但是他的一些细微变化也是让开发中碰到不少头疼的问题 一直以来单选多选的美化都是设计师重点表达的地方之一 而weui-wxss-master中的单选 ...
随机推荐
- 美国药品销售额top200
python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...
- <JavaScript>可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- MySQL SSL配置(mysql5.7和mysql5.6)
专题一:mysql5.7上开启并配置ssl [root@mysqlmaster01 bin]# ./mysql_ssl_rsa_setup --datadir=/data/mysql_data1/ - ...
- Spring Cloud(6.1):搭建OAuth2 Authorization Server
配置web.xml 添加spring-cloud-starter-security和spring-security-oauth2-autoconfigure两个依赖. </dependency& ...
- YUV格式全解
YUV是指亮度参量和色度参量分开表示的像素格式,而这样分开的好处就是不但可以避免相互干扰,还可以降低色度的采样率而不会对图像质量影响太大.YUV是一个比较笼统地说法,针对它的具体排列方式,可以分为很多 ...
- Linux下配置APUE的编译 报错之后如何处理
APUE即Unix环境高级编程,本书中几乎所有的程序都包含一个apue.h的头文件,那如何配置这个apue.h呢? 官方地址:http://www.apuebook.com/apue3e.html 1 ...
- 《MIT 6.828 Lab 1 Exercise 10》实验报告
本实验的网站链接:MIT 6.828 Lab 1 Exercise 10. 题目 Exercise 10. To become familiar with the C calling conventi ...
- Django soft-delete软删除
在django中,实现这个功能很简单,我们采用一个字段用来保存删除的时间.若记录没有被删除,那么设置该值为None,如果被删除,那么设置时间为删除的时间. class BaseSchema(model ...
- 删除重复信息且要保留一条的(roacle的rowid另类用法)
由于表的主键失效了(disable),导致导入了一些主键重复的数据,想保留唯一的一条, 最后发现其实可以用rowid来实现,不知道算不算是rowid的另类用法. delete /*+ parallel ...
- IDEA插件之JavaDoc
作用:用于在Java类元素(例如字段,方法等)上生成Java文档的插件. 1.安装JavaDoc插件 File -> Settings -> Plugins -> Marke ...