昨天（2018.3.13），微信小程序發布了重大功能更新，支持插件的使用和開發，個人預計，不超過2個月，優質服務的插件將會如雨後春筍般湧現。

這篇文章，我將會帶大家，從0開始，學習如何開發和使用插件。文章分為3個章節：

• 1、什麽是微信小程序插件

• 2、如何開發微信小程序插件

• 3、如何使用第三方微信小程序插件

備註：為了節省文字內容，我會將“微信小程序插件”簡稱為“插件”。

什麽是微信小程序插件？

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

不過，插件和NPM、Maven依賴管理不同的是：

• 插件擁有獨立的API接口和域名列表，不被小程序本身的域名列表限制。（NPM依賴進來的庫不能進行第三方數據請求）

• 插件必須由騰訊審核通過才能使用（NPM無需騰訊審核）

• 使用第三方插件必須向第三方申請 （通過NPM使用第三方庫無需向第三方申請）

所以，我覺得：在未來，插件應該會被第三方打包成為服務，而不僅僅只是一個代碼庫。

如何開發微信小程序插件？

下載最新的微信小程序開發者工具，（必須是 1.02.1803130 版本以上），打開開發者工具，進入小程序項目，我們會看到“代碼片段”標簽，如下圖：

點擊，右下角的 “創建” 按鈕，就可以創建插件了，如下圖：

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

微信小程序插件的名稱也必須是獨一無二的，申請完畢後就可以獲得 插件的AppId了。

填寫名稱和插件AppID後，進入小程序項目，如下圖顯示：

項目的代碼目錄結構如下：

├── miniprogram
│ ├── app.js
│ ├── app.json
│ └── pages
├── plugin
│ ├── api
│ ├── components
│ ├── index.js
│ └── plugin.json
└── project.config.json

在文件 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 編寫組件代碼了，例如我寫了我的播放器組件，代碼如下：

player.js：

Component({
  data: {
    myData:[]
  }
})

player.wxml:

<view class="section tc">
  <video id="myVideo" src="..."  enable-danmu danmu-btn controls>
  </video>
</view>

值得註意的是：

1. 編寫組件是調用 Component() 定義組件代碼，和App() 、Page()一樣的道理。

2. 在組件能能夠調用的微信API受限，比如說不能調用 wx.login() 獲取用戶信息，具體限制在：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/plugin/api-limit.html

代碼編寫完畢後，註意在 plugin/plugin.json 文件配置：

{
  "publicComponents": {
    "hgPlayer": "components/player/player"
  },
  "main": "index.js"
}

表示使用該插件的小程序，可以使用 hgPlayer 這個組件，組件hgPlayer對應的代碼是 "components/player/player"

配置好後，我就可以上傳插件代碼到騰訊服務器，進入微信小程序開發者後臺提交審核，騰訊審核通過後，第三方小程序就可以使用我們編寫的這個插件了。

如何使用第三方插件

使用第三方插件之前，需要進入微信小程序開發者後臺，在第三方服務裏添加插件：

填寫第三方插件的AppId，點擊添加按鈕，對方賬號的 小程序插件 > 申請管理 會出現你的申請，如下圖：

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

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

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "填寫申請通過的插件AppId"
    }，
    "plugin1": {
      "version": "dev",
      "provider": "填寫申請通過的插件AppId"
    },
     "plugin2": {
      "version": "dev",
      "provider": "填寫申請通過的插件AppId"
    }
    ...
  }
}

plugins： 配置的要使用的第三方插件列表。

插件列表配置好後，由於每個插件可能會有多個組件，所以需要我們在每個頁面定義要使用到的組件，例如，在 index.js 中要使用 hgPlayer 這個組件，需要在 index.json 配置如下：

{
  "usingComponents": {
    "player": "plugin://myPlugin/hgPlayer"
  }
}

"player": "plugin://myPlugin/hgPlayer" 的含義是：要本頁面使用插件 myPlugin 的組件 hgPlayer，同時在本頁面的別名為 ：player 。

配置好 index.json 後，就可以在 index.wxml 直接使用了，例如：

<view class="xxxx">
    <player />
</view>

微信小程序插件 - 開發教程