微信小程序兼容方式的示例分析

這篇文章主要介紹微信小程序兼容方式的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能，所以在使用這些新能力的時(shí)候需要做兼容。

文檔會(huì)在組件，API等頁面描述中帶上各個(gè)功能所支持的版本號(hào)。

可以通過wx.getSystemInfo或者wx.getSystemInfoSync獲取到小程序的基礎(chǔ)庫版本號(hào)。

也可以通過wx.canIUse 詳情 來判斷是否可以在該基礎(chǔ)庫版本下直接使用對(duì)應(yīng)的API或者組件

兼容方式 - 接口

對(duì)于新增的 API，可以用以下代碼來判斷是否支持用戶的手機(jī)。

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦?，可以這樣子提示
  wx.showModal({
    title: '提示',
    content: '當(dāng)前微信版本過低，無法使用該功能，請(qǐng)升級(jí)到最新微信版本后重試。'
  })
}

兼容方式 - 參數(shù)

對(duì)于 API 的參數(shù)或者返回值有新增的參數(shù)，可以判斷用以下代碼判斷。

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

兼容方式 - 組件

對(duì)于組件，新增的屬性在舊版本上不會(huì)被處理，不過也不會(huì)報(bào)錯(cuò)。如果特殊場景需要對(duì)舊版本做一些降級(jí)處理，可以這樣子做。

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.contact')
  }
})

<button wx:if="{{canIUse}}" open-type="contact"> 客服消息 </button><contact-button wx:else></contact-button>

以上是“微信小程序兼容方式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！