微信小程序ios和安卓遇到的几个坑儿

近来一个朋友问：手写一个日历，为什么在安卓能遍历显示，而苹果里却不显示，你遇到过遍历不出的bug吗？

首先解决下上述问题，我总结下我印象深刻的几个坑~

1.回答下最开始的那个问题，手写一个日历，为什么在安卓能遍历显示，而苹果里却不显示？

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

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

分析

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

解决

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

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

分析

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

结论：

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

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

分析

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

结论

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

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

分析

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

结论

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

注意

由于该属性是微信6.6.0才支持，所以需要将其他的window属性照常写，来兼容低版本。