【微信小程序】插件開發功能和小程序基礎庫文檔
【微信小程序】插件開發功能文檔對微信小程序開發者可開發完整的插件頁面,并具有微信分享、頁面跳轉等能力【微信小程序開發電話】便于插件開發者在插件內提供完整的服務流程、同時可便捷地被其他小程序接入使用。
【微信小程序】插件開發功能文檔:微信小程序定制開發電話
插件功能頁
插件功能頁從小程序基礎庫版本 2.1.0 開始支持。
插件不能直接調用 wx.login 等較為敏感的接口。在需要訪問一些敏感接口時,可以使用插件功能頁的方式。使用插件功能頁可以實現以下這些功能:
獲取用戶信息,包括 openid 和昵稱等(相當于 wx.login 和 wx.getUserInfo 的功能)。
支付(相當于 wx.requestPayment )。
需要注意的是:插件使用支付功能,需要進行額外的權限申請,申請位置位于管理后臺的“小程序插件 -> 基本設置 -> 支付能力”設置項中。另外,無論是否通過申請,主體為個人小程序在使用插件時,都無法正常使用插件里的支付功能。
在具體使用功能頁時,插件可以在插件的自定義組件中放置一個 <functional-page-navigator> 組件,用戶在點擊這個組件區域時,可以跳轉到一個固定的頁面,允許用戶執行登錄或其他操作。
激活功能頁特性
功能頁是 插件所有者小程序 中的一個特殊頁面。
插件所有者小程序,指的是與插件 AppID 相同的小程序。例如,“小程序示例”小程序開發了一個“小程序示例插件”,無論這個插件被哪個小程序使用,這個插件的插件所有者小程序都是“小程序示例”。
啟用插件功能頁時,需要在插件所有者小程序 app.json 文件中添加 functionalPages 定義段,其值為 true 。
{ "functionalPages": true }
注意,新增或改變這個字段時,需要這個小程序發布新版本,才能在正式環境中使用插件功能頁。
跳轉到功能頁
在插件需要登錄時,可以在插件的自定義組件中放置一個 <functional-page-navigator> 組件。
代碼示例:
<functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess"> <button>登錄到插件</button> </functional-page-navigator>
用戶在點擊這個區域時,會自動跳轉到插件所有者小程序的功能頁。功能頁會提示用戶進行登錄或其他相應的操作。操作結果會以組件事件的方式返回。
具體用法和支持的功能頁列表詳見 組件說明 。
目前,功能頁的跳轉目前不支持在開發者工具中調試,請在真機上測試。
功能頁函數
在使用支付功能頁時,插件所有者小程序需要提供一個函數來響應支付請求。這個響應函數應當寫在小程序根目錄中的 functional-pages/request-payment.js 文件中,名為 beforeRequestPayment 。如果不提供這段代碼,將通過 fail 事件返回失敗。
注意:功能頁函數不應 require 其他非 functional-pages 目錄中的文件,其他非 functional-pages 目錄中的文件也不應 require 這個目錄中的文件。這樣的 require 調用在未來將不被支持。
代碼示例:
// functional-pages/request-payment.js exports.beforeRequestPayment = function(paymentArgs, callback) { paymentArgs // 就是 functional-page-navigator 的 args 屬性中 paymentArgs // 在這里可以執行一些支付前的參數處理邏輯,包括通知后臺調用統一下單接口 // 在 callback 中需要返回兩個參數: err 和 requestPaymentArgs // err 應為 null (或者一些失敗信息) // requestPaymentArgs 將被用于調用 wx.requestPayment callback(null, { // 這里的參數與 wx.requestPayment 相同,除了 success/fail/complete 不被支持 timeStamp: timeStamp, nonceStr: nonceStr, package: package, signType: signType, paySign: paySign, }) }
這個目錄和文件應當被放置在插件所有者小程序代碼中(而非插件代碼中),它是插件所有者小程序的一部分(而非插件的一部分)。 如果需要新增或更改這段代碼,需要發布插件所有者小程序,才能在正式版中生效;需要重新預覽插件所有者小程序,才能在開發版中生效。
Bugs & Tips
Bug:在微信版本 6.6.7 中,功能頁被拉起時會觸發 App 的部分生命周期并使得功能頁啟動時間變得比較長。在后續的微信版本中這一行為會發生變更,使 App 生命周期不再被觸發。
兼容
小程序的功能不斷的增加,但是舊版本的微信客戶端并不支持新功能,所以在使用這些新能力的時候需要做兼容。
文檔會在組件,API等頁面描述中帶上各個功能所支持的版本號。
可以通過 wx.getSystemInfo 或者 wx.getSystemInfoSync 獲取到小程序的基礎庫版本號。
也可以通過 wx.canIUse 詳情 來判斷是否可以在該基礎庫版本下直接使用對應的API或者組件
兼容方式 - 版本比較
微信客戶端和小程序基礎庫的版本號風格為 Major.Minor.Patch(主版本號.次版本號.修訂號)。 開發者可以根據版本號去做兼容,以下為參考代碼:
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
兼容方式 - 接口
對于新增的 API,可以用以下代碼來判斷是否支持用戶的手機。
if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { // 如果希望用戶在最新版本的客戶端上體驗您的小程序,可以這樣子提示 wx.showModal({ title: '提示', content: '當前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。' }) }
兼容方式 - 參數
對于 API 的參數或者返回值有新增的參數,可以判斷用以下代碼判斷。
wx.showModal({ success: function(res) { if (wx.canIUse('showModal.cancel')) { console.log(res.cancel) } } })
兼容方式 - 組件
對于組件,新增的組件或屬性在舊版本上不會被處理,不過也不會報錯。如果特殊場景需要對舊版本做一些降級處理,可以這樣子做。
Page({ data: { canIUse: wx.canIUse('cover-view') } })
<video controls="{{!canIUse}}"> <cover-view wx:if="{{canIUse}}">play</cover-view> </video>
functional-page-navigator
這個組件從小程序基礎庫版本 2.1.0 開始支持。
僅在插件的自定義組件中有效,用于跳轉到插件功能頁。
屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
---|---|---|---|---|
version | String | release | 跳轉到的小程序版本,有效值 develop(開發版),trial(體驗版),release(正式版) ,僅在當前小程序為開發版或體驗版時此參數有效;如果當前小程序是體驗版或正式版,則打開的小程序必定是正式版 | 2.1.0 |
name | String | 要跳轉到的功能頁 | 2.1.0 | |
args | Object | null | 功能頁參數,參數格式與具體功能頁相關 | 2.1.0 |
bindsuccess | EventHandle | 功能頁返回,且操作成功時觸發, detail 格式與具體功能頁相關 | 2.1.0 | |
bindfail | EventHandle | 功能頁返回,且操作失敗時觸發, detail 格式與具體功能頁相關 | 2.1.0 |
name 有效值:
值 | 說明 | 接受的 args | success 返回的 detail | fail 返回的 detail | 最低版本 |
---|---|---|---|---|---|
loginAndGetUserInfo | 獲取用戶信息,對應 wx.login 和 wx.getUserInfo | 與 wx.getUserInfo接受的 args 相同(除回調函數外) | wx.login 和 wx.getUserInfo 的結果的并集 | 與 wx.login 或 wx.getUserInfo 相同 | 2.1.0 |
requestPayment | 支付,對應 wx.requestPayment | fee 字段,表示需要顯示在頁面中的金額,單位為分; paymentArgs 字段,任意數據,傳遞給功能頁中的響應函數 | 與 wx.requestPayment相同 | 與 wx.requestPayment相同 | 2.1.0 |
示例代碼:
<!-- sample.wxml --> <functional-page-navigator name="loginAndGetUserInfo" bind:success="loginSuccess"> <button>登錄到插件</button> </functional-page-navigator>
// redirect.js navigator.js Component({ methods: { loginSuccess: function(e) { console.log(e.detail.code) // wx.login 的 code console.log(e.detail.userInfo) // wx.getUserInfo 的 userInfo } } })
Tips:
功能頁是插件所有者小程序中的一個特殊頁面,開發者不能自定義這個頁面的外觀。
在功能頁展示時,一些與界面展示相關的接口將被禁用(接口調用返回 fail )。
這個組件本身可以在開發者工具中使用,但功能頁的跳轉目前不支持在開發者工具中調試,請在真機上測試。
掃二維碼手機查看該文章