微信小程序的热度一直比较火热，更多的电商大佬来时使用小程序，在微信小程序开发中，经常会遇到一些兼容性的问题，小编最近就遇到了一个问题，就是在时间字符串转化为时间戳的方法中，我用的Date.parse(new Date())这个方法，但是在微信开发者工具中这个方法正常实现，但是在一些iphone设备和安卓的部分设备中不会实现相关功能，为了解决这个问题我只能导入了momentjs，不在调用系统方法了。这里我们就来讨论一下一些兼容性问题。
微信小程序运行在三端
iOS、Android 和 用于调试的开发者工具。三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：
在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8以上 在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的 尽管三端的环境是十分相似的，但是还是有些许区别
ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。
wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。
在 0.10.101000 以及之后版本的开发工具中，会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不同所带来的开发问题。
开启此选项，开发工具会自动检测并补全缺失样式，保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。
样式补全
小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。
文档会在组件，API等页面描述中带上各个功能所支持的版本号。
可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。
可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件
微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch（主版本号.次版本号.修订号）。 开发者可以根据版本号去做兼容
该基础库版本下直接使用对应的API或者组件的API
wx.canIUse(String)判断小程序的API，回调，参数，组件等是否在当前版本可用。此接口从基础库 1.1.1 版本开始支持。
String参数说明： 使用{API}.{method}.{param}.{options}或者{component}.{attribute}.{option}方式来调用，例如：
{API} 代表 API 名字 {method} 代表调用方式，有效值为return, success, object, callback {param} 代表参数或者返回值 {options} 代表参数的可选值 {component} 代表组件名字 {attribute} 代表组件属性 {option} 代表组件属性的可选值
例子：
微信小程序的兼容性问题除了微信本身的 Bug 外，大部分是目标平台对 JavaScript 标准库支持程度不同造成的。像我最上面遇到的问题就是Javascript 标准库兼容性问题。对于这类问题我们可以打补丁，从其他地方找到比较完善的js代码，然后我们拷贝到我们的项目中。
1.iOS中input的placeholder属性字体不居中
对placeholder设置line-height及font-size
对input设置高度
2.iOS中滚动卡顿
设置-webkit-overflow-scrolling:touch;
3.微信小程序中解决iOS中new Date() 时间格式不兼容
在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常
1 2 3 4 5 6 7 8 9 10 11 12 13 | let time = '2018-12-10 11:11:11'; let temporaryTime1 = new Date(time); this.setData({ timeRemain1: temporaryTime1, }) /* 利用正则表达式替换时间中的”-”为”/”即可 */ let time = '2018-12-10 11:11:11'; let temporaryTime = new Date(time.replace(/-/g,'/')); let temporaryTime1 = new Date(time); this.setData({ timeRemain: temporaryTime, timeRemain1: temporaryTime1, }) |
4. 微信小程序scroll-view隐藏滚动条方法
在wxss里加入以下代码：
1 2 3 4 5 | ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } |
暂时遇到的兼容性就是这么多，会持续更新
总结
很多时候小程序在开发者工具上测试时是没有问题的,但是真机测试却有问题,所有开发过程中一定要在多个不同型号的手机上测试;很多时候IOS和安卓api返回的信息不同
在手机上打开调试的时候是好的,但是关闭调试后就会出现各种bug,遇到这种情况一定要一步步的去排查原因
以上摘自网络，由数据吧整理发布