WeChat Mini Program--Compatible

The functions of the applet are constantly increasing, but the old version of the WeChat client does not support the new functions, so compatibility needs to be done when using these new capabilities.

The documentation will include the version numbers supported by each function in the page descriptions of components, APIs, etc.

 The version number of the base library of the applet can be obtained by  wx.getSystemInfo or  .wx.getSystemInfoSync

You can also use the  wx.canIUse details  to determine whether the corresponding API or component can be used directly under the basic library version.

Compatibility - Version Comparison

The version number style of WeChat client and Mini Program base library is Major.Minor.Patch (major version number. minor version number. revision number). Developers can make compatibility based on the version number. The following is the reference code:

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

Compatibility - Interface

For the newly added API, the following code can be used to determine whether the user's mobile phone is supported.

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
   // If you want users to experience your applet on the latest version of the client, you can prompt 
  wx.showModal({
    title: 'Tips' ,
    content: 'The current WeChat version is too low to use this function, please upgrade to the latest WeChat version and try again. '
  })
}

Compatibility Method - Parameters

For API parameters or return values ​​with new parameters, you can use the following code to judge.

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

Compatibility Method - Component

For components, new components or properties will not be processed on older versions, but no errors will be reported. If special scenarios require some downgrades to the old version, you can do this.

Page({
  data: {
    canIUse: wx.canIUse('cover-view')
  }
})

<video controls="{{!canIUse}}">
  <cover-view wx:if="{{canIUse}}">play</cover-view>
</video>