小程序兼容

信小程序在功能不断升级的过程中经常会发布一些新的组件和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:

加载过程中的进度框,可以避免用户在加载过程中进行操作导致混乱。

functionshowLoading(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

});

}

}

functionhideLoading(){

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)

}

}

})

作者:june5253

链接:https://www.jianshu.com/p/0fba6a687fea

相关推荐