近期，微信小程式釋出了重大功能更新，支援外掛的使用和開發。訊息一出，小程式開發者蜂擁而至，開始專研外掛開發，不久後會有一批優質服務的外掛上線是可以預見的。從開發者的角度來看，最關心的問題是怎麼開發微信小程式外掛，首先需要對小程式外掛瞭解。

什麼是微信小程式外掛？

外掛一組由js和自定義元件封裝的程式碼庫，外掛無法單獨使用、也無法預覽，必須被其他小程式應用嵌入，才能使用。它和NPM的依賴、Maven的依賴庫是一個道理。

不過，外掛和NPM、Maven依賴管理不同的是：外掛擁有獨立的API介面和域名列表，不被小程式本身的域名列表限制。（NPM依賴進來的庫不能進行第三方資料請求）；外掛必須由騰訊稽核通過才能使用（NPM無需騰訊稽核）；使用第三方外掛必須向第三方申請（通過NPM使用第三方庫無需向第三方申請）。所以在未來，外掛或許會被第三方打包成為服務，而不僅僅只是一個程式碼庫。

如何開發微信小程式外掛？

下載最新的微信小程式開發者工具，開啟開發者工具，進入小程式專案。

點選，右下角的 “建立” 按鈕，就可以建立外掛了，

外掛的AppId和之前的微信小程式的AppId是同個道理，需要在微信開發者後臺新建一個微信小程式外掛：

微信小程式外掛的名稱也必須是獨一無二的，申請完畢後就可以獲得外掛的AppId了。填寫名稱和外掛AppID後，就可以進入小程式專案。

在檔案 project.config.json 中，我們看到程式碼如下：

{

    miniprogramRoot:./miniprogram,

    pluginRoot:./plugin,

    compileType:plugin,

    setting: {

        newFeature: true

    },

    appid: .....,

    projectname:videoPlayer,

    condition: {}

}

miniprogramRoot：配置小程式的根目錄，可以使用小程式來測試編寫的外掛

pluginRoot：外掛相關程式碼所在的根目錄

compileType：專案的編譯型別，必須配置為 plugin，在上傳程式碼的時候才會以外掛的方式上傳到騰訊伺服器。

在 plugin/plugin.json 檔案中，程式碼如下：

{

  publicComponents: {

    hgPlayer:components/player/player

  },

  main: index.js

}

publicComponents：配置的是外掛可以給使用的小程式提供哪些元件，一個外掛可以定義很多個元件，元件和元件之間相互引用，但是小程式只能使用在publicComponents裡配置的元件。

main：定義入口檔案，在入口檔案 index.js 中定義小程式可以使用外掛的那些介面。

在 plugin/index.js 檔案中，程式碼如下：

var data =require(\'./api/data.js\')

module.exports= {

  getData: data.getData,

  setData: data.setData

}

在 plugin/index.js 定義了對外丟擲介面為 getData 和 setData，小程式在使用這個外掛的時候，只能使用到外掛提供的這兩個介面，外掛的其他介面（或方法）小程式無法使用。

做好以上配置後，就可以開始在 plugin/components 編寫元件程式碼了。

程式碼編寫完畢後，注意在 plugin/plugin.json 檔案配置。配置好後，我就可以上傳外掛程式碼到騰訊伺服器，進入微信小程式開發者後臺提交稽核，騰訊稽核通過後，第三方小程式就可以使用我們編寫的這個外掛了。

如何使用第三方外掛

使用第三方外掛之前，需要進入微信小程式開發者後臺，在第三方服務裡新增外掛：

填寫第三方外掛的AppId，點選新增按鈕，對方賬號的 小程式外掛 > 申請管理 會出現你的申請，

需要第三方同意你的申請後，你就可以開始使用第三方外掛了。

使用第三方外掛的時候，需要在 我們自己的小程式的 app.json 做如下配置：

{

  pages: [

    pages/index/index

  ],

  plugins: {

    myPlugin: {

      version: dev,

      provider: 填寫申請通過的外掛AppId

    }

 }

}

plugins： 配置的要使用的第三方外掛列表。

外掛列表配置好後，由於每個外掛可能會有多個元件，所以需要我們在每個頁面定義要使用到的元件，例如，在 index.js 中要使用 hgPlayer 這個元件，需要在 index.json 配置。配置好 index.json 後，就可以在 index.wxml 直接使用了。