关于小程序一些小功能的代码都在这个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. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  2. 微信小程序踩坑之一[thist]使用技巧

    刚上手小程序 时,习惯把this当成jquery中的$(this)来用,实际上这两个还是有差别的 在页面方法中调用其他方法,一般是用this.function(),直接调用小程序 的方法或函数则是用w ...

  3. 微信小程序踩坑之前端问题处理篇

    近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在 ...

  4. 微信小程序踩坑之一[wx.request]请求模式

    最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...

  5. 微信小程序踩坑之获取手机号

    最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在 ...

  6. 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器

    最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...

  7. 微信小程序踩坑

    微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示

  8. 小程序踩坑之不同屏幕下动态改变translate值

    案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...

  9. 微信小程序踩坑之一【weui-wxss-master单选按钮图标修改思路】

    小程序原生所带的weui框架做小程序UI实在太方便了,但是他的一些细微变化也是让开发中碰到不少头疼的问题 一直以来单选多选的美化都是设计师重点表达的地方之一 而weui-wxss-master中的单选 ...

随机推荐

  1. VUE组件如何通信

    Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...

  2. [go]日志库小例子

    输出日志 //输出日志到console msg := fmt.Sprintf(format, args...) //format里的坑 args解出的数据相匹配 fmt.Fprintf(os.Stdo ...

  3. [maven]maven插件 tomcat7-maven-plugin 的使用

    使用 tomcat7-maven-plugin,可以将tomcat内嵌到web项目中,直接运行webapp项目. 第一步.pom.xml的配置: <build> <plugins&g ...

  4. 从字节跳动离职后,拿到探探、趣头条、爱奇艺、小红书、15家公司的 offer【转】

    前言 博主目前从事Android开发3年,前两年一直在抖音工作.我这篇文章并不是简单的描述一些面试中的题,或者总结一些Android的知识,而是想记录我整个的想法和准备的过程,以及一些心得体会,让大家 ...

  5. 用于Python文件转换.exe文件的pyinstaller工具安装

    安装方法: 注:python环境一定要配置好. 1.第一步:下载 官方网站:http://www.pyinstaller.org/downloads.html 此处下载版本为稳定版. 2.第二步:下载 ...

  6. Python3 Selenium自动化web测试 ==>FAQ:日期格式和日期字符串格式相互转换

    学习目的: 掌握python的基础应用 场景: 生成的测试日报需要加上时间戳作为唯一标志,免得文件覆盖,过往的文件丢失 因为os.rename方法要求文件名必须拼接的都是字符串 代码释义: # 日期转 ...

  7. Path环境变量的作用

    作用: 当我们要求系统运行一个程序(例如a.exe)而没有告诉它程序所在的完整路径时,系统会先在当前目录寻找是否存在a.exe,如果找到,直接运行:如果没有找到,会去path路径下面找.设置path, ...

  8. 《剑指offer》Q13-18 (牛客10.13)

    目录 Q13 调整数组顺序使奇数位于偶数前 Q14 链表中倒数第k个结点 Q15 反转链表 Q16 合并两个有序链表 Q17 树的子结构 Q18 二叉树的镜像 Q13 调整数组顺序使奇数位于偶数前 输 ...

  9. Java学习笔记-基础语法

    Java基础包含关键字,标识符,注释,常量和变量,运算符 关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 Java的关键字 用于定义数据类型的关键 ...

  10. 最新 汽车之家java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.汽车之家等10家互联网公司的校招Offer,因为某些自身原因最终选择了汽车之家.6.7月主要是做系统复习.项目复盘.Leet ...