微信小程序兼容性问题

在微信小程序开发中，经常会遇到一些兼容性的问题，我最近就遇到了一个问题，就是在时间字符串转化为时间戳的方法中，我用的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 上分别检查小程序的真实表现。

ES6 转 ES5

在 0.10.101000 以及之后版本的开发工具中，会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不同所带来的开发问题。

01382B15-B73B-4B24-B043-0802DB2E3F10.png

样式补全

开启此选项，开发工具会自动检测并补全缺失样式，保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

样式补全

兼容

小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。

文档会在组件，API等页面描述中带上各个功能所支持的版本号。

可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。

可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件

获取系统信息

同步

let res = wx.getSystemInfoSync()
 console.log("同步获取系统信息：" + res);
  console.log(res);

异步：

wx.getSystemInfo({
      success: function(res) {
        console.log("异步获取系统信息:");
        console.log(res);
      },
    })

参数	说明	最低版本
brand	手机品牌	1.5.0
model	手机型号
pixelRatio	设备像素比
screenWidth	屏幕宽度	1.1.0
screenHeight	屏幕高度	1.1.0
windowWidth	可使用窗口宽度
windowHeight	可使用窗口高度
statusBarHeight	状态栏的高度	1.9.0
language	微信设置的语言
version	微信版本号
system	system
platform	客户端平台
SDKVersion	客户端基础库版本	1.1.0
fontSizeSetting	用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px	1.5.0

版本比较

微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch（主版本号.次版本号.修订号）。 开发者可以根据版本号去做兼容

function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  var len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (var i = 0; i < len; i++) {
    var num1 = parseInt(v1[i])
    var num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

compareVersion('1.11.0', '1.9.9')
// 1

该基础库版本下直接使用对应的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} 代表组件属性的可选值

例子：

wx.canIUse('openBluetoothAdapter')
wx.canIUse('getSystemInfoSync.return.screenWidth')
wx.canIUse('getSystemInfo.success.screenWidth')
wx.canIUse('showToast.object.image')
wx.canIUse('onCompassChange.callback.direction')
wx.canIUse('request.object.method.GET')

wx.canIUse('live-player')
wx.canIUse('text.selectable')
wx.canIUse('button.open-type.contact')

Javascript 标准库兼容性问题

微信小程序的兼容性问题除了微信本身的 Bug 外，大部分是目标平台对 JavaScript 标准库支持程度不同造成的。像我最上面遇到的问题就是Javascript 标准库兼容性问题。对于这类问题我们可以打补丁，从其他地方找到比较完善的js代码，然后我们拷贝到我们的项目中。