小程序 ----踩坑 ---安卓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中的单选 ...
随机推荐
- CentOS7下安装php-redis扩展
yum -y install php70w-pecl-redis
- LODOP设置纸张无效问题
有的打印机不支持自定义纸张,或不支持当前设置的纸张尺寸,会造成纸张尺寸和代码里设置的尺寸不一致的情况.现象:1.代码一样,纸张语句设置正确,有的打印机纸张正常,有的打印机不正常.2.代码一样,纸张语句 ...
- swift 第十三课 GCD 的介绍和使用
手头的项目中基本没有用到这个,但是还是要探索下.毕竟好多的地方要用这个,而且现在手机和电脑等电子设备都是多核心的,这样就成就了多线程带来更加优越的用户体验. 先记录下,自己看到的两个不错的连接: ht ...
- 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题
参考如下: https://www.ucloud.cn/yun/114228.html
- 机器学习实战笔记——KNN
机器学习实战——读书笔记 书籍奉上
- 编写expect程序报extra characters after close-brace错误或extra characters after close-quote,解决
expect程序报extra characters after close-brace或extra characters after close-quote 可能原因 流程控制语句中的"{& ...
- 单例Bean注册表接口SingletonBeanRegistry
Github: SingletonBeanRegistry.java SingletonBeanRegistry package org.springframework.beans.factory.c ...
- Ubuntu搭建Spring源码环境常见问题
在一心想要学习Spring框架源码时,我们会遇到很多麻烦的问题.开始本文前,你只需要拥有一个装好IDEA的Ubuntu系统就可以愉快启程了.如果还没有IDEA,可以参考在Ubuntu上安装Intell ...
- 【VS开发】fopen 文本文件与二进制文件区别
在学习C语言文件操作后,我们都会知道打开文件的函数是fopen,也知道它的第二个参数是 标志字符串.其中,如果字符串中出现'b',则表明是以打开二进制(binary)文件,否则是打开文本文件. 那么什 ...
- NOIp2012:借教室
题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...