微信小程序兼容

转自：https://www.jianshu.com/p/0fba6a687fea

微信小程序在功能不断升级的过程中经常会发布一些新的组件和API，但是这些组件和API仅支持高版本，低版本的微信无法使用，因此需要进行兼容处理。首先，当我们在使用一个组件或API时需要先查看其官方文档上的描述页，上面会带有各个功能所支持的版本，然后再使用以下方法进行兼容：

1、通过wx.getSystemInfo或者wx.getSystemInfoSync获取到小程序的基础库版本号SDKVersion，与某功能所支持的版本进行比较。另外SDKVersion也是1.1.0版本库才引入的属性，所以对于1.1.0以下的版本该字段为undefined，不过因为新的功能往往是1.1.0及以上版本引入的，所以也可以用于比较版本。

例：
wx.getSystemInfo({
  success: function(res) {
    console.log(res.SDKVersion)
  }
})

另外getSystemInfo还能获取以下信息：

model    手机型号     
pixelRatio    设备像素比     
screenWidth    屏幕宽度    1.1.0
screenHeight    屏幕高度    1.1.0
windowWidth    可使用窗口宽度     
windowHeight    可使用窗口高度     
language    微信设置的语言     
version    微信版本号     
system    操作系统版本     
platform    客户端平台     
SDKVersion    客户端基础库版本    1.1.0

2、通过wx.canIUse(String)判断小程序的API，回调，参数，组件等是否在当前版本可用。
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('contact-button')
wx.canIUse('text.selectable')
wx.canIUse('button.open-type.contact')

需要注意的是 wx.canIUse 这个 api 本身也是需要判断是否支持的，可以先通过 if(wx.canIUse) 判断其是否支持，然后再使用 wx.canIUse 判断其他的属性是否支持。

3、对于新增的API最简单的兼容方式是直接通过if(api)的方式判断该能否调用：

例1：
if (wx.openBluetoothAdapter) {
    wx.openBluetoothAdapter()
} else {
    // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
    wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
}

例2：
加载过程中的进度框，可以避免用户在加载过程中进行操作导致混乱。
function showLoading(message) {
  if (wx.showLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    wx.showLoading({
      title: message,
      mask: true
    });
  } else {
    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
    wx.showToast({
      title: message,
      icon: 'loading',
      mask: true,
      duration: 20000
    });
  }
}

function hideLoading() {
  if (wx.hideLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

4、对于API的参数或者返回值有新增的参数，可以判断用以下代码判断：

wx.showModal({
    success: function(res) {
        if (wx.canIUse('showModal.cancel')) {
            console.log(res.cancel)
        }
    }
})