小程序的iOS和Android兼容问题

发表于 更新于 分类于

margin 在 IOS 中失效

在页面中元素使用 margin 值，在某些 IOS 设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空 DIV 控制间距。

fixed 定位问题

整个页面的 fixed 定位，在 ios 下下拉会触发下拉事件，但是没有动画效果。Android 就能正常运行
flex 中使用 绝对定位，ios 出现严重错位，导致父级元素也会变成绝对定位，Android 能达到理想效果
总而言之 尽量不用 fixed

absolute 定位问题

  • 使用 absolute 定位，并且宽带设置了 100% 并且设置了 padding 就会导致屏幕宽度溢出，出现页面左右可以移动的 bug，模拟器上是没有问题，但是真机上是有这个问题的。这个问题让我调试并痛苦了许久
  • 使用 absolute 并且当前元素是 flex 容器这种情况在 Ios 下面布局不会起到左右，会出现所有元素转换成了 absloute 并且文字错位
  • 总而言之 尽量不用 absolute

word-spacing 在 button 中的问题

有时候在使用大按钮的时候两个字中间希望有段间距，但是目前没有找到能使用的占位符，所以使用了的 word-spacing 加空格 这个方法来设置文字的间距，但是在 iPhone6s 上两个字中间一个空格的时候整体会向右偏，必须设置两个空格。

相同代码存在效果差异

在真机测试或者模拟器测试，总汇出现各种样式上的差异，造成原因比较多，因为不同的手机呈现的效果或者它本身采用的技术均存在差异，最终呈现的效果有时候就会出现较大的差别。但是这些差别一般都是在可以接受的范围。

手写一个日历，为什么在安卓能遍历显示，而苹果里却不显示？

首先确定这并不是遍历的 bug,肯定是兼容性问题，遍历这是最基本的语法，问题肯定出在遍历的数据处理阶段，看了代码果不其然，结论就是：ios 系统的问题，比如 newDate(“2018-08-08”)，在 ios 会出现 NaN 的情况，ios 只支持 newDate(“2018/08/08”)

video 视频格式 m3u8,在 ios 里边儿不能播放，但是安卓能正常播放？

分析

官方给的例子，是 mp4 格式的文件，ios 可以播放，微信小程序开发者平台的论坛也有类似的问题，但是没有准确的答案，我开始考虑转换下格式，奈何，技术不够，尝试添加在 image 标签 添加 custom-cache= ,data 中添加 cache:false 问题解决了。

解决

1
<video src="{{sbDress}}" controls custom-cache="{{cache}}"></video>

微信小程序 WxParse 包含图片安卓端无法加载

分析

wxparse 是微信小程序用于解析富文本编辑器生成代码的插件，用于展示一般的图文。在安卓手机端如果内容包含图片的标签时整个内容都无法加载出来，在手机端查看 console，发现安卓机在 console.dir()的时候报错，这是由于安卓机不支持 console.dir()的语法。

结论

这是安卓机不支持 console.dir()的语法,使用 console.log()代替。

安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小

分析

开发文档里写明：注：image 组件默认宽度 300px、高度 225px，开发时所有 image 的小图标都使用了 mode=”widthFixed”,只设置了宽度，让高度自适应，就会出现图片加载时初始化高度位 225px,加载完毕才显示 mode 的高度，由于安卓机这个卡顿教明显，才会出现瞬时的变形。

结论

今后使用 image 标签，尽量固定宽高。

. navigationBar 在安卓机中位置为左边，在苹果中居中显示，那么标题字数多了之后苹果就会默认使用…代替剩余的文字

分析

这个也不是 bug，只不过时显示问题，目前版本 6.6.0 里支持在 window 属性里设置 navigationStyle 由默认样式修改为 custom,支持自定义样式。所谓的自定义样式，就是默认导航，只剩一个胶囊的导航。

结论

app.json 里边儿设置 window{“navitionStyle”:”custom”},后要自己使用在 wxml，and wxss 里写样式显示头部的导航栏。

. IOS 上微信在输入框弹出键盘后，页面不恢复，下方有留白

输入框失去焦点（即键盘隐藏时），手动调整页面
补充: 当在手机号与验证码之间切换输入时,会同时触发前输入框的 blur 和后输入框 focus,这个时候触发滚动,页面会出现较大跳跃,因此通过 inFocus 和 setTimeout 判断,是切换 input 还是真正 blur,真正 blur 的时候,再滚动页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
document.activeElement.scrollIntoViewIfNeeded(true);

function blurAdjust(e) {
  setTimeout(() => {
    if (
      document.activeElement.tagName == "INPUT" ||
      document.activeElement.tagName == "TEXTAREA"
    ) {
      return;
    }

    let result = "pc";
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      //判断iPhone|iPad|iPod|iOS
      result = "ios";
    } else if (/(Android)/i.test(navigator.userAgent)) {
      //判断Android
      result = "android";
    }

    if ((result = "ios")) {
      document.activeElement.scrollIntoViewIfNeeded(true);
    }
  }, 400);
}

$("input,select").blur(function () {
  setTimeout(() => {
    const scrollHeight =
      document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 100);
});