插件功能頁

插件功能頁從小程序基礎庫版本 2.1.0 開始支持。

某些接口不能在插件中直接調用（如 wx.login），但插件開發者可以使用插件功能頁的方式來實現功能。目前，插件功能頁包括：

• 獲取用戶信息，包括 openid 和昵稱等（相當于 wx.login 和 wx.getUserInfo 的功能），詳見用戶信息功能頁；
  
• 支付（相當于 wx.requestPayment），詳見支付功能頁；
  
• 獲取收貨地址（相當于 wx.chooseAddress），詳見收貨地址功能頁。
  

要使用插件功能頁，需要先激活功能頁特性，配置對應的功能頁函數，再使用 functional-page-navigator 組件跳轉到插件功能頁，從而實現對應的功能。詳情請參考下文。

插件所有者小程序

開始開發之前，我們需要知道，插件功能頁是指 插件所有者小程序 中的一個特殊頁面。

插件所有者小程序，指的是與插件 AppID 相同的小程序。例如，“小程序示例”小程序開發了一個“小程序示例插件”，那么無論這個插件被哪個小程序使用，這個插件的 插件所有者小程序 都是“小程序示例”。下文中會繼續使用 插件所有者小程序 這個說法。

插件所有者小程序開發方法

通常，在開始使用插件功能頁的時候，需要開啟兩個開發者工具窗口，其中一個打開插件項目，另一個打開插件所有者小程序的小程序項目。例如，一個打開“小程序示例插件”項目，另一個打開“小程序示例”項目。

這兩個窗口，前者用于編輯插件，后者用于編輯插件所有者小程序。下文中所有需要編輯插件所有者小程序的內容，都是在后者中進行。

激活功能頁特性

要在插件中調用插件功能頁，需要先激活插件所有者小程序的功能頁特性。具體來說，在插件所有者小程序的 app.json 文件中添加 functionalPages 定義段，并令其值為 true ，例如：

代碼示例：

{
"functionalPages": {
"independent": true
}
}

目前，兼容舊式寫法：

{
"functionalPages": true
}

舊式寫法將在未來將被移除支持，未來將不能編譯上傳。

這兩種寫法的區別在于，新式的寫法 "independent": true 會使得插件功能頁的代碼獨立于其他代碼，這意味著插件功能頁可以被獨立下載、加載，具有更好的性能表現。但也同時使得插件功能頁目錄 functional-pages/ （支付功能頁會使用其中的文件）不能 require 這個目錄以外的文件（反之亦然：這個目錄以外的文件也不能調用這個目錄內的）。

注意，新增或改變這個字段時，需要這個小程序發布新版本，才能在正式環境中使用插件功能頁。

跳轉到功能頁

功能頁不能使用 wx.navigateTo 來進行跳轉，而是需要一個名為 functional-page-navigator 的組件。以獲取用戶信息為例，可以在插件中放置如下的 functional-page-navigator：

代碼示例：

<functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess"><button>登錄到插件button>functional-page-navigator>

用戶在點擊這個 navigator 時，會自動跳轉到插件所有者小程序的對應功能頁。功能頁會提示用戶進行登錄或其他相應的操作。操作結果會以組件事件的方式返回。

functional-page-navigator 的參數和詳細使用方法可以參考組件說明 。

從小程序基礎庫版本 2.4.0 開始，支持插件所有者小程序跳轉到自己的功能頁。在基礎庫版本低于 2.4.0 時，點擊跳轉到自己的功能頁的 functional-page-navigator 將沒有任何反應。

真機開發測試的常規步驟

目前，功能頁的跳轉目前不支持在開發者工具中調試，請在真機上測試。初次進行真機開發測試時，通常步驟如下：

1. 在開發者工具上打開插件所有者小程序項目，并點擊“預覽”；
   
2. 用測試用的真機掃一下預覽二維碼，此時會進入插件所有者小程序，進入后就可以直接退出這個小程序；
   
3. 在開發者工具上打開插件項目，將插件中 functional-page-navigator 中的 version 屬性設置為 develop；
   
4. 點擊預覽可以生成插件預覽二維碼，用測試用的真機掃碼即可預覽功能頁；如果更改了插件代碼，重新生成并掃描插件的預覽二維碼即可；
   
5. 如果過了一段時間之后，跳轉功能頁時出現“開發版已過期”這樣的提示，從第1步開始重試一次。
   

注意：functional-page-navigator 的 version=develop 僅用于調試，因此在插件提審前，需要：

1. 確保已發布設置了 "functionalPages": true 的插件所有者小程序；
   
2. 確保所有的 functional-page-navigator 組件屬性設置為 version="release" 。
   

功能頁常見問題 FAQ

如何正確編輯插件所有者小程序？

• 應該在開發者工具的“小程序”類型項目中編輯，而不是在“插件”類型的項目中編輯。比如，“小程序示例插件”的所有者小程序是“小程序示例”，它們的 AppID 都是 wxidxxxxxxxxxxxxxx ，如果是初次開發“小程序示例”小程序，可以在開發者工具中創建一個小程序項目，其 AppID 為 wxidxxxxxxxxxxxxxx ；如果之前開發過“小程序示例”小程序，直接打開之前的小程序項目即可。
  

點擊 functional-page-navigator 之后沒有任何反應。

• 請檢查引用插件的小程序和插件本身是不是同一個 AppID ，如果是，跳轉到自己的功能頁需要基礎庫 2.4.0 支持，否則使用 functional-page-navigator 不會有任何反應。
  

點擊 functional-page-navigator 之后，展示了一個頁面提示“頁面不存在”。

• 這種情況是因為插件所有者小程序沒有正確設置 "functionalPages": true 。如果 functional-page-navigator 的 version="develop" ，這部手機需要掃碼并進入插件所有者小程序一次；如果 version="release" ，請確保包含 "functionalPages": true 的插件所有者小程序已被發布。
  

點擊  之后，彈窗提示“小程序開發版已過期”。

• 遇到這種情況，重新掃碼并進入插件所有者小程序一次即可。
  

點擊  之后，展示了一個頁面提示“該功能無法使用”。

• 在使用插件功能頁時，小程序不能是個人小程序，同時，插件也需要額外的步驟申請開通插件支付權限（位于 管理后臺 -> 小程序插件 -> 基本設置 -> 支付能力 ）。
  

點擊  之后，點擊頁面中的“支付”按鈕，立刻退出了支付功能頁。

• 這通常是因為沒有找到功能頁函數 beforeRequestPayment ，請檢查插件所有者小程序的 functional-pages/request-payment.js 文件和其中的 beforeRequestPayment 函數是否存在。
  

點擊 functional-page-navigator 之后，展示了一個僅有返回按鈕的頁面。

• 請檢查 functional-page-navigator 的 name 屬性是否被正確設置。
  

開發版可以正常跳轉，但審核反饋不能跳轉。

• 請發布設置了 "functionalPages": true 的插件所有者小程序，且所有的 functional-page-navigator 組件屬性設置為 version="release" 。
  

Bugs & Tips

• 功能頁是插件所有者小程序中的一個特殊頁面，開發者不能自定義這個頁面的外觀。
  
• 插件所有者小程序本身也可以引用這個插件，此時，functional-page-navigator 組件的 version 屬性將不會生效，而是取決于當前運行的插件所有者小程序的版本。
  
• functional-page-navigator 可以在開發者工具中使用，但功能頁的跳轉目前不支持在開發者工具中調試，請在真機上測試。
  
• Bug：在微信版本 6.6.7 中，功能頁被拉起時會觸發 App 的部分生命周期并使得功能頁啟動時間變得比較長。在后續的微信版本中這一行為會發生變更，使 App 生命周期不再被觸發。
  

用戶信息功能頁

用戶信息功能頁用于幫助插件獲取用戶信息，包括 openid 和昵稱等，相當于 wx.login 和 wx.getUserInfo 的功能。

此外，自基礎庫版本 2.3.1 起，用戶在這個功能頁中授權之后，插件就可以直接調用 wx.login 和 wx.getUserInfo 。無需再次進入功能頁獲取用戶信息。自基礎庫版本 2.6.3 起，可以使用 wx.getSetting 來查詢用戶是否授權過。

調用參數

用戶信息功能頁使用 functional-page-navigator 進行跳轉時，對應的參數 name 應為固定值 loginAndGetUserInfo，其余參數與 wx.getUserInfo 相同，具體來說：

args參數說明：

注：當 withCredentials 為 true 時，返回的數據會包含 encryptedData, iv 等敏感信息。

bindsuccess返回參數說明：

userInfo參數說明：

代碼示例：

<functional-page-navigatorname="loginAndGetUserInfo"args="{{ args }}"version="develop"bind:success="loginSuccess"bind:fail="loginFail"><button class="login">登錄到插件button>functional-page-navigator>// plugin/components/hello-component.jsComponent({properties: {},data: {args: {withCredentials: true,lang: 'zh_CN'}},methods: {loginSuccess: function (res) {console.log(res.detail);},loginFail: function (res) {console.log(res);}}});

用戶點擊該 navigator 后，將跳轉到如下的用戶信息功能頁：

在微信開發者工具中查看示例：

1. 由于插件需要 appid 才能工作，請填入一個 appid；
   
2. 由于當前代碼片段的限制，打開該示例后請 手動將 appid 填寫到 miniprogram/app.json 中（如下圖）使示例正常運行。
   

支付功能頁

支付功能頁用于幫助插件完成支付，相當于 wx.requestPayment 的功能。

需要注意的是：插件使用支付功能，需要進行額外的權限申請，申請位置位于管理后臺的“小程序插件 -> 基本設置 -> 支付能力”設置項中。另外，無論是否通過申請，主體為個人小程序在使用插件時，都無法正常使用插件里的支付功能。

調用參數

支付功能頁使用 functional-page-navigator 進行跳轉時，對應的參數 name 應為固定值 requestPayment，其他參數如下：

args參數說明：

currencyType 的合法值：

值說明最低版本CNY貨幣符號 ￥