关于小程序一些小功能的代码都在这个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. 新maven项目创建JSP出现小红叉报错 javax.servlet.http.HttpServlet not found

    展示: 右击项目----build path -----Configure Build Path 进入到窗口 libraries -------add libraries ------  server ...

  2. JAVA 基础编程练习题18 【程序 18 乒乓球赛】

    18 [程序 18 乒乓球赛] 题目:两个乒乓球队进行比赛,各出三人.甲队为 a,b,c 三人,乙队为 x,y,z 三人.已抽签决定比赛名单. 有人向队员打听比赛的名单.a 说他不和 x 比,c 说他 ...

  3. Python——使用Notepad++运行

    安装 安装python,安装完后找到python.exe,记录绝对路径,我的是:E:\log\python-3.7.4\python.exe 设置 用Notepad++打开python脚本,按F5会弹 ...

  4. 使用jquery 动态创建form 并提交

    $(document).ready(function(){    $("a.delete").click(function(event){        action = this ...

  5. linux LVM 系统盘扩容

    1.fdisk /dev/sda2.输入n,开始创建新分区3.输入p4.输入w5.mkfs.ext4 /dev/sda36.pvcreate /dev/sda37.vgdisplay 查看VG nam ...

  6. Eclipse阿里代码规范插件安装,卸载与使用

    使用阿里代码规范插件,我们就可以查看我们写的代码是否规范了 找到阿里代码插件网址: 网址:https://p3c.alibaba.com/plugin/eclipse/update/ 打开我们的网址, ...

  7. Django模板渲染之自定义inclusion_tag详细使用

    inclusion_tag在使用的时候可以帮我们减少很多前端和后端重复的代码 逻辑图: inclusion_tag的作用是主页面以一定的语法给一个参数,调用某个函数,这个函数可以通过主页面给的参数做一 ...

  8. Docker通过挂载安装mysql

    一.安装 mkdir -p ./docker/mysql cd docker/ cd mysql/ mkdir conf mkdir data mkdir logs  mkdir mysql-file ...

  9. Linux安装jemalloc笔记

    前言 最近研究一个工具库需要用 jemalloc 做内存分配器,但在 ubuntu 下安装过程中遇到很多问题,故记下安装过程的笔记,避免以后遇到在这上面浪费时间. 安装过程 环境:VMware Ubu ...

  10. hdoj4276(树形dp+分组背包)

    题目链接:https://vjudge.net/problem/HDU-4276 题意:给出一棵树,起点为1,时间为V,终点为n,每个点有一个价值a[u],每条边有一个时间花费w,求在时间V内到达终点 ...