关于微信小程序兼容性相关问题浅析

微信小程序官方开发者，在对其功能的不断升级过程中，会有新的组件以及API被发布，但是新的内容一般只会支持新版本、高版本，低版本在无法使用的情况下，需求对其进行兼容性处理。本文来说说如何对小程序新的组件与API进行兼容性处理，方法如下。

  1、利用wx.getSystemInfo或者wx.getSystemInfoSync获取版本号

通过wx.getSystemInfo或wx.getSystemInfoSync，可以让开发者去获取到小程序的基础库版本号SDKVersion，再获取到基础库版本号之后，将其与某功能所支持的版本进行比较。

例：wx.getSystemInfo({

  success: function(res) {

    console.log(res.SDKVersion)

  }

})

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参数或返回码

对于API的参数或者返回值有新增的参数，可以使用以下代码去进行判断。

wx.showModal({

    success: function(res) {

        if (wx.canIUse('showModal.cancel')) {

            console.log(res.cancel)

        }

    }

})