簡單講講小程式外掛是什麼

外掛 ，英文名可稱作“Plug-in、Plugin、add-in、addin、add-on、addon或extension”，是一個依附於主程式的輔助程式，透過和主程式的互動，用來代替 主程式需要 增加一些所需的特定功能。

更通俗的來講， 就類似機器的零件，可以“插入”的形式新增到程式內使用，從而獲得一種特殊的能力，多個外掛可以共用，最終開發程式像搭積木般方便。

外掛本身的技術原理並不複雜。外掛程式碼由一些自定義元件和 JS 程式碼檔案構成，外掛開發者在釋出外掛時，這些程式碼被上傳到微信後臺儲存起來。

當小程式使用外掛時，使用者需填寫外掛的 AppID 和版本號，以便從後臺獲取相應的外掛程式碼。小程式程式碼編譯時，外掛程式碼會被嵌入到小程式中，與小程式一起編譯執行。

外掛是一種獨立封裝的軟體模組，用來承載企業的能力或者服務，便於宿主小程式進行快捷整合。和普通元件不同的是，外掛擁有獨立的應用和獨立的上下文，即資料、業務邏輯和服務端連線。當小程式應用需要使用外掛的服務時，載入和執行外掛，以使得外掛訪問自身的資料與服務端，完成對應的服務；而在小程式不需要使用外掛的服務時，只需要執行小程式應用本身，訪問小程式應用自身的資料服務端。外掛和宿主小程式上下文是互相隔離的，即小程式應用不能直接訪問外掛的資料，也不能獲得外掛的許可權，反之，外掛也不能直接訪問小程式的資料，也不能獲得小程式的許可權。

另外外掛非常靈活：

• 可以包含多個頁面，供宿主小程式跳轉。
• 可以向宿主小程式暴露多個介面，供宿主小程式呼叫
• 可以包含多個元件，供宿主小程式進行嵌入。

外掛的這種特性，使得外掛相比普通元件具備以下優勢：

• 由於外掛具有獨立的應用，外掛可以獨立進行發版，開發和升級更高效。
• 外掛支援商業訂購和結算，便於開發者進行服務變現和商業化。
• 由於外掛是獨立封裝的業務功能和服務，宿主小程式整合和使用外掛更為便捷。
• 由於外掛執行時框架提供上下文隔離機制，外掛內部的資料安全性更有保障。

二、小程式外掛情況介紹

1、希望小程式外掛解決的問題

而隨著小程式的普及，越來越多的路邊小攤、餐飲小店、夫妻店也希望接入小程式，許多商家會反映亟待解決的問題：

我只會簡單開發，不會做複雜的功能怎麼辦？

我也想給餐館小程式做一個預約訂餐功能，要怎麼搞？

客戶可以在我的小程式裡查詢快遞資訊嗎？

我沒有資料，可以在小程式裡做地圖查詢功能嗎？

……

總結小程式生態中遇到的三大難題：

開發技術有限，實現複雜功能難度大；

人力、裝置、資源有限，實現服務成本高；

缺乏某些類目的資質，如電商、叫車。

而以上問題正好都可以透過小程式外掛進行解決。

再透過“知曉程式”對218名使用者進行的線上調研 結果可以看到：

想要開發外掛為 業務型別（包括影片、音訊等） 的報名者佔總人數的 4.37%。

想要開發外掛為 公共介面型別（包括天氣、地理位置等） 的報名者佔總人數的 10.68%。

想要開發外掛為 封裝型別（包括影像處理、留言、客服、營銷類等） 的報名者佔總人數的 22.33%。

想要開發外掛為 電商型別（包括購物券、抽獎等） 的報名者佔總人數的 8.74%。

想要開發外掛為 底層型別（包括搜尋、掃碼、登入、評論、支付等） 的報名者佔總人數的 11.65%。

想要開發外掛為 工具型別 的報名者佔總人數的 11.65%。

暫時不太明確開發型別的 報名者佔總人數的 4.37%。

從調研結果中也發現，大家希望小程式外掛幫助解決的問題如下：

• 有技術開發背景的，都希望有封裝功能（UI 最佳化以及 框架元件 ），以及能最佳化開發效率的外掛早些出現；
• 選電商類的，都急切需要更多的抽獎、大轉盤等營銷外掛、資料處理外掛；
• 選擇底層型別，都是抱怨微信小程式某些功能不好用，希望有更好的解決方案外掛出現；
• 暫時不太明確的人，大部分都不懂技術，但希望能直接獲得小程式模板，實現獲利

2、市面中小程式外掛種類

進一步對微信小程式及支付寶小程式外掛市場中的外掛進行統計分析，微信小程式外掛市場內外掛數量175個，支付寶小程式外掛市場內外掛數量115個，這些小程式外掛大致可以分為工具、營銷互動、城市服務、教育、餐飲、購物等幾大類別。

這些外掛透過小程式呼叫的形式，用於包括政務大廳、資訊查詢、智慧家居、團購、社交直播等上百個服務場景中。

以旅遊景區小程式為例， 在旅遊景區的小程式可以使用地圖外掛，開發者無需在小程式內獨立開發地圖內導航、出行指引、周邊服務推薦等能力，直接使用地圖外掛即可為使用者提供導航服務。使用門票購買外掛，使用者可在小程式內完成門票線上預訂、購買等流程，在到達景區後，透過外掛服務提供商提供的移動終端或硬體裝置，可完成門票兌換、核銷。

而對於餐飲、零售等線下行業而言，外掛更是極大降低了商家的成本，商家可以使用預訂、排隊、外賣等外掛，由外掛開發者提供線下服務，商家只需在小程式內引用外掛，即可使用由外掛開發者提供的預訂、外賣等服務，節省了成本。

三、如何開發引入小程式外掛

1、小程式外掛開發

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

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

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

微信小程式外掛開發： https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

支付寶小程式外掛開發： https://opendocs.alipay.com/mini/plugin/plugin-development

2、小程式外掛引入

對於更多的使用者我們可能需要對外掛進行引入，如何在小程式中引入外掛呢？這裡我們以FinClip 小程式為例進行實踐。

開發者可在小程式程式碼中引入外掛程式碼的宣告，然後在使用 FIDE 開發工具進行編譯時， FIDE 會從服務端獲取外掛程式碼一起進行打包編譯。

請注意

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

2.1 新增外掛

在使用外掛前，開發者可登入「小程式開放平臺-小程式管理-小程式外掛」，透過外掛 ID 查詢外掛並新增。

2.2 引入外掛程式碼包

使用外掛前，使用者要在 app.json 中宣告需要使用的外掛，例如：

程式碼示例

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "外掛 id"
    }
  }
}

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

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

2.3 在分包內引入外掛程式碼包

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

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

在分包內使用外掛有如下限制：

• 僅能在這個分包內使用該外掛；
• 同一個外掛不能被多個分包同時引用；

2.4 使用外掛

使用外掛時，外掛的程式碼對於使用者來說是不可見的。為了正確使用外掛，使用者應檢視外掛詳情頁面中的“開發文件”一節，閱讀由外掛開發者提供的外掛開發文件，透過文件來明確外掛提供的自定義元件、頁面名稱及提供的 js 介面規範等。

2.5 自定義元件

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

程式碼示例

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

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

• 預設情況下，頁面中的 this.selectComponent 介面無法獲得外掛的自定義元件例項物件；
• ft.createSelectorQuery 等介面的 >>> 選擇器無法選入外掛內部。

2.6 頁面

需要跳轉到外掛頁面時，url 使用   plugin://   字首，形如   如：

程式碼示例

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

2.7 js 介面

使用外掛的 js 介面時，可以使用   requirePlugin   方法。例如，外掛提供一個名為 hello 的方法和一個名為 world 的變數，則可以像下面這樣呼叫：

var myPluginInterface = requirePlugin('myPlugin');
myPluginInterface.hello();
var myWorld = myPluginInterface.world;

也可以透過外掛的 id 來獲取介面，如：

var myPluginInterface = requirePlugin('外掛 id');

2.8 匯出到外掛

使用外掛的小程式可以匯出一些內容，供外掛獲取。具體來說，在宣告使用外掛時，可以透過   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。

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

2.9 為外掛提供自定義元件

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

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

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

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

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

恭喜你已經成功完成一款外掛的開發或引入應用，你可以透過小程式外掛 為使用者提供更豐富的服務。