支付寶小程序插件 插件開發(fā)

開發(fā)者可通過 支付寶服務(wù)市場 與 支付寶能力中心 來獲取和使用插件。詳情請參見 插件訂購。

三方開發(fā)者如需開發(fā)插件，請進(jìn)行申請。

注意：

• 插件 .acss 文件中，基本選擇器只支持 ID 與 class 選擇器，不支持標(biāo)簽、屬性、通配符選擇器；
• 如需獲取宿主 appid，可以通過 my.getParentAppIdSync() 進(jìn)行調(diào)用；
• 不支持使用 getApp 方法 獲取當(dāng)前 app 實(shí)例；
• 不支持通過 getCurrentPages 方法 獲取小程序的頁面信息；
• 不支持在插件內(nèi)使用 web-view 組件。

插件目錄結(jié)構(gòu)

插件可以包含若干個(gè) 自定義組件、頁面 和一組 js 接口。插件 plugin 文件夾中的示例目錄內(nèi)容如下：

plugin
|-----components         // 插件提供的自定義組件（可以有多個(gè))
|----------hello-component
|           |----hello-component.acss
|           |----hello-component.axml
|           |----hello-component.js
|           |----hello-component.json
|-----pages                   // 插件提供的頁面（可以有多個(gè))
|----------hello-page
|           |----hello-page.acss
|           |----hello-page.axml
|           |----hello-page.js
|           |----hello-page.json
|----------index
|           |----index.acss
|           |----index.axml
|           |----index.js
|           |----index.json
|-----index.js                // 插件的 js 接口
|-----plugin.json          // 插件配置文件

插件配置文件

向第三方小程序開放的所有組件、頁面和 js 接口都必須在 plugin.json 中聲明，格式如下：

{
  "publicComponents": {
    "hello-component": "components/hello-component"
  },
  "publicPages": {
    "hello-pages": "pages/hello-page"
  },
  "pages": [
    "pages/hello-page"
    "pages/index"
  ],
  "main": "index.js"
}

每個(gè)配置的含義如下:

• publicComponents：列出所有向小程序開放的自定義組件。
• publicPages：列出所有向小程序開放的頁面。
• Pages：列出插件所有頁面（包含向小程序開放的以及不向小程序開放的頁面）。
• main：插件面向第三方小程序的 js 接口。

創(chuàng)建插件項(xiàng)目

前提條件

• 對于已經(jīng)開發(fā)插件 1.0 的開發(fā)者，需要下載 0.50 版本的研發(fā)工具維護(hù)現(xiàn)有的項(xiàng)目，0.60 及以上的版本只支持插件 2.0 項(xiàng)目的創(chuàng)建和打開。
• 創(chuàng)建小程序插件的前提是擁有并關(guān)聯(lián)已有的小程序，否則將無法上傳插件。創(chuàng)建小程序請參考 開發(fā)入門。

創(chuàng)建步驟

1. 打開 小程序開發(fā)者工具（IDE 版本要求在 0.60 及以上），使用企業(yè)賬號登錄 IDE。左側(cè)選擇 小程序插件，點(diǎn)擊 + 號面板新建項(xiàng)目。

1. 完成 項(xiàng)目名稱、項(xiàng)目路徑 設(shè)置。

1. 關(guān)聯(lián)應(yīng)用，詳情請參見 創(chuàng)建插件應(yīng)用。 注意：必須關(guān)聯(lián)應(yīng)用，否則無法進(jìn)行代碼打包上傳。

1. 新建的插件類型項(xiàng)目的文件如下圖所示。

• pages 文件夾：小程序代碼目錄，用于調(diào)試插件代碼。

說明：pages 文件夾不可刪除，文件夾中的代碼可以當(dāng)作普通小程序來編寫。

• plugin 文件夾： 插件代碼目錄。

開發(fā)插件

組件

插件可以直接使用基礎(chǔ)組件或擴(kuò)展組件，也可自定義組件，這些組件在插件內(nèi)可以互相引用，但提供給第三方小程序使用的自定義組件必須在 plugin.json 配置文件中的 publicComponents 中聲明。

插件自定義組件與普通自定義組件一致，每個(gè)自定義組件由 axml、acss、js 以及 json 四個(gè)文件組成，詳情請參見 自定義組件文檔。

頁面

插件可以自定義若干個(gè)頁面，支持從本插件的自定義組件、其他頁面或者第三方小程序中進(jìn)行跳轉(zhuǎn)。其中，提供給第三方小程序跳轉(zhuǎn)的頁面必須在在 plugin.json 配置文件中的 publicPages 和 Pages 中聲明。

插件頁面與普通小程序的頁面一致，每個(gè)頁面由axml、acss、js 以及 json 四個(gè)文件組成，詳情請參見 頁面文檔。

插件頁面跳轉(zhuǎn)

插件執(zhí)行頁面跳轉(zhuǎn)的時(shí)候，可以使用基礎(chǔ)組件 navigator 頁面鏈接 或者 API my.navigateTo。

注意：

• 不支持插件跳轉(zhuǎn)到小程序頁面；
• 不支持在插件中使用 my.switchTab，其他 API 可以正常使用；
• 不支持插件作為首頁。

接口

插件可以在接口文件（在 plugin.json 配置文件中指定，詳情見上文 插件配置文件）中導(dǎo)出一些 js 接口，供插件的使用者調(diào)用。

示例代碼

export default {
    helloApi: function() {
    console.log('helloApi!')
  }
}

效果示例

示例代碼

//.axml
<view a:for="{{list}}">
  <view>{{item.name}}:{{item.price}}</view>
</view>

//.js
Component({
  data: {
    list:[]
  },
  onInit() {
    this.setData({
      list: [{

      
  name: '牛肉米粉',
        price: 12
      }, {
        name: '雜醬面',
        price: 10
      }, {
        name: '周黑鴨',
        price: 30
      },{
        name: '肉夾饃',
        price: 8


      }]
    });
  }
})

.json
{
  "component": true
}

真機(jī)預(yù)覽

點(diǎn)擊 IDE 中右上角 真機(jī)調(diào)試 或 預(yù)覽 按鈕查看效果。

上傳插件

完成開發(fā)后點(diǎn)擊界面右上角 上傳。完成插件上傳后，可進(jìn)入 支付寶開放平臺 對插件進(jìn)行管理，如 插件提審。

其他注意事項(xiàng)

插件間互相調(diào)用

插件不支持直接使用其他插件。如果小程序引用了多個(gè)插件，插件之間可以互相調(diào)用但不可以互相跳轉(zhuǎn)。

例如，第三方小程序中的 app.json ：

{
  "plugins": {
     "pluginOne": {
       "version": "1.0.0",
       "provider": "2019081209098989"
     },
    "pluginTwo": {
       "version": "1.0.0",
       "provider": "2019081209091212"
     }
  }
}

上面的示例中，第三方小程序通過 app.json 引用了兩個(gè)插件，那么插件 pluginOne 可以通過以下三種方式訪問 pluginTwo 的組件、頁面以及 js 接口：

1. 在 json 文件中 配置 plugin://pluginTwo/hello 來引用插件 pluginTwo 的自定義組件。
2. requirePlugin('pluginTwo') 的方式來引用插件 pluginTwo 暴露的 js 接口。

getCurrentPages

getCurrentPages 用于返回當(dāng)前頁面棧，返回過程中存在如下限制：

• 插件頁中調(diào)用該方法無法獲取小程序頁面棧信息，即對應(yīng)的小程序頁面在獲取的頁面棧中值為 null。
• 小程序頁中調(diào)用該方法無法獲取插件頁面棧信息，即對應(yīng)的插件頁面在獲取的頁面棧中值為 null。

例如當(dāng)前的頁面棧從棧底到棧頂依次為：小程序頁面 A、小程序頁面 B、插件頁面 C、插件頁面 D。

• 在小程序頁中調(diào)用 getCurrentPages 方法返回頁面棧：

  // PageA/PageB 為小程序頁面實(shí)例
  [PageA, PageB, null, null]

• 在插件頁中調(diào)用 getCurrentPages 方法返回頁面棧：

  // PageC/PageD 為插件頁面實(shí)例
  [null, null, PageC, PageD]

插件中如何跳轉(zhuǎn)至小程序頁面

出于安全性考慮，插件不支持隨意跳轉(zhuǎn)至小程序的頁面。如有相關(guān)需求，可以將跳轉(zhuǎn)方式包裝成方法，通過插件暴露的 API，傳遞給插件，插件內(nèi)部可以通過這些方法實(shí)現(xiàn)跳轉(zhuǎn)。詳情請下載 插件跳轉(zhuǎn)小程序頁面示例 壓縮包。

插件端開發(fā)插件

插件端 （開發(fā)插件） 約定的 miniprogram 目錄的 app.json 如下所示

 "plugins": {
    "myPlugin": {
      "version": "dev",    //  固定dev
      "provider": "{{currentPluginId}}"  // 建議使用"{{currentPluginId}}"，
    }