如何開發引入小程序插件

一般來講各個小程序開放平臺對於插件開發的開放範圍有一定的限制，例如微信小程序平臺開放了22個行業相關的插件開發，其中對醫療服務、金融業、文娛、社交等行業還有進一步的特殊限制。

在了解小程序插件的開發規範後，如何以正確的方式開始小程序插件的開發呢？其實各大平臺都出了響應的開發工具和開發指南。

我們同樣以微信和支付寶為例，使用微信開發者工具和支付寶IDE工具即可高效率的完成一個小程序插件的創建和開發，具體的開發指南可訪問：

微信小程序插件開發：

https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

支付寶小程序插件開發：

https://opendocs.alipay.com/mini/plugin/plugin-development

1、小程序插件引入

對於更多的用戶我們可能需要對插件進行引入，如何在小程序中引入插件呢？這裏我們以FinClip 小程序為例進行實踐。

開發者可在小程序代碼中引入插件代碼的聲明，然後在使用 FIDE 開發工具進行編譯時， FIDE 會從服務端獲取插件代碼一起進行打包編譯。

請注意

插件功能需要在基礎庫版本≥2.11.1，SDK版本≥2.34.0的環境下才可使用

2 添加插件

在使用插件前，開發者可登錄「小程序開放平臺-小程序管理-小程序插件」，通過插件 ID 查找插件並添加。

3 引入插件代碼包

使用插件前，使用者要在 app.json 中聲明需要使用的插件，例如：

代碼示例

{
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": "插件 id"
 }
 }
}

如上例所示， plugins 定義段中可以包含多個插件聲明，每個插件聲明以一個使用者自定義的插件引用名作為標識，並指明插件的 ID 和需要使用的版本號。

其中，引用名（如上例中的 myPlugin）由使用者自定義，無需和插件開發者保持一致或與開發者協調。在後續的插件使用中，該引用名將被用於錶示該插件。

4在分包內引入插件代碼包

如果插件只在一個分包內用到，可以將插件僅放在這個分包內，例如：

{
 "subpackages": [
 {
 "root": "packageA",
 "pages": [
 "pages/cat",
 "pages/dog"
 ],
 "plugins": {
 "myPlugin": {
 "version": "1.0.0",
 "provider": "插件 id"
 }
 }
 }
 ]
}

在分包內使用插件有如下限制：

• 僅能在這個分包內使用該插件；

• 同一個插件不能被多個分包同時引用；

5使用插件

使用插件時，插件的代碼對於使用者來說是不可見的。為了正確使用插件，使用者應查看插件詳情頁面中的“開發文檔”一節，閱讀由插件開發者提供的插件開發文檔，通過文檔來明確插件提供的自定義組件、頁面名稱及提供的 js 接口規範等。

6自定義組件

使用插件提供的自定義組件，和 使用普通自定義組件 的方式相仿。在 json 文件定義需要引入的自定義組件時，使用 plugin:// 協議指明插件的引用名和自定義組件名，例如：

代碼示例

{
 "usingComponents": {
 "hello-component": "plugin://myPlugin/hello-component"
 }
}

出於對插件的保護，插件提供的自定義組件在使用上有一定的限制：

• 默認情况下，頁面中的 this.selectComponent 接口無法獲得插件的自定義組件實例對象；

• ft.createSelectorQuery 等接口的 >>> 選擇器無法選入插件內部。

7頁面

需要跳轉到插件頁面時，url 使用 plugin:// 前綴，形如 

plugin://PLUGIN_NAME/PLUGIN_PAGE，

 如：

代碼示例

<navigator url=&quot;plugin://myPlugin/hello-page&quot;>
 Go to pages/hello-page!
</navigator>

8 js 接口

使用插件的 js 接口時，可以使用 requirePlugin 方法。例如，插件提供一個名為 hello 的方法和一個名為 world 的變量，則可以像下面這樣調用：

var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;

也可以通過插件的 id 來獲取接口，如：

var myPluginInterface = requirePlugin('插件 id');

9導出到插件

使用插件的小程序可以導出一些內容，供插件獲取。具體來說，在聲明使用插件時，可以通過 export 字段來指定一個文件，如：

{
 "myPlugin": {
 "version": "1.0.0",
 "provider": "插件 id",
 "export": "index.js"
 }
}

則該文件（上面的例子裏是 index.js）導出的內容可以被這個插件用全局函數獲得。例如，在上面的文件中，使用插件的小程序做了如下導出：

// index.js
module.exports = { whoami: 'MiniProgram' }

那麼插件就可以獲得上面導出的內容：

// plugin
requireMiniProgram().whoami // 'MiniProgram'

具體導出什麼內容，可以閱讀插件開發文檔，和插件的開發者做好約定。

當插件在分包中時，這個特性也可以使用，但指定的文件的路徑是相對於分包的。例如在 root: packageA 的分包中指定了 export: exports/plugin.js，那麼被指定的文件在文件系統上應該是 /packageA/exports/plugin.js。

使用的多個插件的導出互不影響，兩個插件可以導出同一個文件，也可以是不同的文件。但導出同一個文件時，如果一個插件對導出內容做了修改，那麼另一個插件也會被影響，請注意這一點。

10為插件提供自定義組件

有時，插件可能會在頁面或者自定義組件中，將一部分區域交給使用的小程序來渲染，因此需要使用的小程序提供一個自定義組件。但由於插件中不能直接指定小程序的自定義組件路徑，因此需要通過為插件指定 抽象節點（generics） 的方式來提供。

如果是插件的自定義組件需要指定抽象節點實現，可以在引用時指定：

<!-- miniprogram/page/index.fxml -->
<plugin-view generic:mp-view=&quot;comp-from-miniprogram&quot; />

可以通過配置項為插件頁面指定抽象組件實現。例如，要給插件名為 plugin-index 的頁面中的抽象節點 mp-view 指定小程序的自定義組件 components/comp-from-miniprogram 作為實現的話：

{
 "myPlugin": {
 "provider": "插件 id",
 "version": "1.0.0",
 "genericsImplementation": {
 "plugin-index": {
 "mp-view": "components/comp-from-miniprogram"
 }
 }
 }
}

恭喜你已經成功完成一款插件的開發或引入應用，你可以通過小程序插件為用戶提供更豐富的服務。

剛從開源中國開到一個不錯的小程序插件開發活動，也正好是

FinClip

舉辦的，這個競賽對於彌補小程序插件生態很有意義，而且共有10萬元的獎金池，感興趣的小夥伴可以試試～