昨天（2018.3.13）涵紊，微信小程序發(fā)布了重大功能更新诡渴，支持插件的使用和開(kāi)發(fā)荧恍，個(gè)人預(yù)計(jì)乔询，不超過(guò)2個(gè)月，優(yōu)質(zhì)服務(wù)的插件將會(huì)如雨后春筍般涌現(xiàn)逢倍。

這篇文章捧颅，我將會(huì)帶大家，從0開(kāi)始较雕，學(xué)習(xí)如何開(kāi)發(fā)和使用插件碉哑。文章分為3個(gè)章節(jié)：

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

• 2亮蒋、如何開(kāi)發(fā)微信小程序插件

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

備注：為了節(jié)省文字內(nèi)容，我會(huì)將“微信小程序插件”簡(jiǎn)稱為“插件”慎玖。

什么是微信小程序插件贮尖？

插件一組由js和自定義組件封裝的代碼庫(kù)，插件無(wú)法單獨(dú)使用趁怔、也無(wú)法預(yù)覽湿硝，必須被其他小程序應(yīng)用嵌入，才能使用润努。它和NPM的依賴关斜、Maven的依賴庫(kù)是一個(gè)道理。

不過(guò)铺浇，插件和NPM痢畜、Maven依賴管理不同的是：

• 插件擁有獨(dú)立的API接口和域名列表，不被小程序本身的域名列表限制。（NPM依賴進(jìn)來(lái)的庫(kù)不能進(jìn)行第三方數(shù)據(jù)請(qǐng)求）

• 插件必須由騰訊審核通過(guò)才能使用（NPM無(wú)需騰訊審核）

• 使用第三方插件必須向第三方申請(qǐng) （通過(guò)NPM使用第三方庫(kù)無(wú)需向第三方申請(qǐng)）

所以丁稀，我覺(jué)得：在未來(lái)繁涂，插件應(yīng)該會(huì)被第三方打包成為服務(wù)，而不僅僅只是一個(gè)代碼庫(kù)二驰。

如何開(kāi)發(fā)微信小程序插件？

下載最新的微信小程序開(kāi)發(fā)者工具秉沼，（必須是 1.02.1803130 版本以上）桶雀，打開(kāi)開(kāi)發(fā)者工具，進(jìn)入小程序項(xiàng)目唬复，我們會(huì)看到“代碼片段”標(biāo)簽矗积，如下圖：

image

點(diǎn)擊，右下角的 “創(chuàng)建” 按鈕敞咧，就可以創(chuàng)建插件了棘捣，如下圖：

image

插件的AppId和之前的微信小程序的AppId是同個(gè)道理，需要在微信開(kāi)發(fā)者后臺(tái)新建一個(gè)微信小程序插件：

image

image

微信小程序插件的名稱也必須是獨(dú)一無(wú)二的休建，申請(qǐng)完畢后就可以獲得 插件的AppId了乍恐。

填寫(xiě)名稱和插件AppID后，進(jìn)入小程序項(xiàng)目测砂，如下圖顯示：

image

項(xiàng)目的代碼目錄結(jié)構(gòu)如下：

├── 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：配置小程序的根目錄，可以使用小程序來(lái)測(cè)試編寫(xiě)的插件

• pluginRoot：插件相關(guān)代碼所在的根目錄

• compileType：項(xiàng)目的編譯類型砌些，必須配置為 plugin呜投，在上傳代碼的時(shí)候才會(huì)以插件的方式上傳到騰訊服務(wù)器。

在 plugin/plugin.json 文件中存璃，代碼如下：

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

• publicComponents：配置的是插件可以給使用的小程序提供哪些組件仑荐，一個(gè)插件可以定義很多個(gè)組件，組件和組件之間相互引用纵东，但是小程序只能使用在publicComponents里配置的組件粘招。

• main：定義入口文件，在入口文件 index.js 中定義小程序可以使用插件的那些接口篮迎。

在 plugin/index.js 文件中男图，代碼如下：

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

module.exports = {
  getData: data.getData,
  setData: data.setData
}

在 plugin/index.js 定義了對(duì)外拋出接口為 getData 和 setData，小程序在使用這個(gè)插件的時(shí)候甜橱，只能使用到插件提供的這兩個(gè)接口逊笆，插件的其他接口（或方法）小程序無(wú)法使用。

做好以上配置后岂傲，就可以開(kāi)始在 plugin/components 編寫(xiě)組件代碼了难裆，例如我寫(xiě)了我的播放器組件，代碼如下：

player.js：

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

player.wxml:

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

值得注意的是：

1. 編寫(xiě)組件是調(diào)用 Component() 定義組件代碼，和App() 乃戈、Page()一樣的道理褂痰。

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

代碼編寫(xiě)完畢后缩歪，注意在 plugin/plugin.json 文件配置：

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

表示使用該插件的小程序，可以使用 hgPlayer 這個(gè)組件谍憔，組件hgPlayer對(duì)應(yīng)的代碼是 "components/player/player"

配置好后匪蝙，我就可以上傳插件代碼到騰訊服務(wù)器，進(jìn)入微信小程序開(kāi)發(fā)者后臺(tái)提交審核习贫，騰訊審核通過(guò)后逛球，第三方小程序就可以使用我們編寫(xiě)的這個(gè)插件了。

如何使用第三方插件

使用第三方插件之前苫昌，需要進(jìn)入微信小程序開(kāi)發(fā)者后臺(tái)颤绕，在第三方服務(wù)里添加插件：

image

image

填寫(xiě)第三方插件的AppId，點(diǎn)擊添加按鈕祟身，對(duì)方賬號(hào)的 小程序插件 > 申請(qǐng)管理 會(huì)出現(xiàn)你的申請(qǐng)奥务，如下圖：

image

需要第三方同意你的申請(qǐng)后，你就可以開(kāi)始使用第三方插件了月而。

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

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "填寫(xiě)申請(qǐng)通過(guò)的插件AppId"
    }，
    "plugin1": {
      "version": "dev",
      "provider": "填寫(xiě)申請(qǐng)通過(guò)的插件AppId"
    },
     "plugin2": {
      "version": "dev",
      "provider": "填寫(xiě)申請(qǐng)通過(guò)的插件AppId"
    }
    ...
  }
}

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

插件列表配置好后溢谤，由于每個(gè)插件可能會(huì)有多個(gè)組件，所以需要我們?cè)诿總€(gè)頁(yè)面定義要使用到的組件憨攒，例如世杀，在 index.js 中要使用 hgPlayer 這個(gè)組件，需要在 index.json 配置如下：

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

"player": "plugin://myPlugin/hgPlayer" 的含義是：要本頁(yè)面使用插件 myPlugin 的組件 hgPlayer肝集，同時(shí)在本頁(yè)面的別名為 ：player 瞻坝。

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

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

后續(xù)

到目前為止所刀，我們已經(jīng)講完了：

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

• 2捞挥、如何開(kāi)發(fā)微信小程序插件

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

怎么樣？小程序的開(kāi)發(fā)和使用是否足夠簡(jiǎn)單呢砌函？你能完全看懂并入門(mén)了嗎斩披？你還有其他什么問(wèn)題嗎溜族？歡迎留言與我交流。