微信小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能，所以在使用這些新能力的時候需要做兼容，文檔會在組件，API等頁面描述中帶上各個功能所支持的版本號，可以通過wx.getSystemInfo或者wx.getSystemInfoSync獲取到微信小程序的基礎庫版本號，也可以通過 wx.canIUse 詳情 來判斷是否可以在該基礎庫版本下直接使用對應的API或者組件。

微信小程序兼容方式 - 組件

對于組件，新增的屬性在舊版本上不會被處理，不過也不會報錯。如果特殊場景需要對舊版本做一些降級處理，可以這樣子做。

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

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

微信小程序兼容方式 - 接口

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

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else { // 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示 wx.showModal({
    title: '提示',
    content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。' })
}

微信小程序兼容方式 - 參數(shù)

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

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

微信小程序基礎組件

框架為開發(fā)者提供了一系列基礎組件，開發(fā)者可以通過組合這些基礎組件進行快速開發(fā)。

什么是組件：

• 組件是視圖層的基本組成單元。

• 組件自帶一些功能與微信風格的樣式。

• 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。

  <tagname property="value"> Content goes here ... </tagname>

  注意：所有組件與屬性都是小寫，以連字符-連接

屬性類型

共同屬性類型

所有組件都有的屬性：