下載最新的微信小程序開發(fā)者工具,(必須是 1.02.1803130 版本以上),打開開發(fā)者工具,進(jìn)入小程序項(xiàng)目,我們會(huì)看到“代碼片段”標(biāo)簽,如下圖:
點(diǎn)擊,右下角的 “創(chuàng)建” 按鈕,就可以創(chuàng)建插件了,如下圖:
插件的AppId和之前的微信小程序的AppId是同個(gè)道理,需要在微信開發(fā)者后臺(tái)新建一個(gè)微信小程序插件:
微信小程序插件的名稱也必須是獨(dú)一無二的,申請(qǐng)完畢后就可以獲得 插件的AppId了。
填寫名稱和插件AppID后,進(jìn)入小程序項(xiàng)目,如下圖顯示:
項(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:配置小程序的根目錄,可以使用小程序來測試編寫的插件
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è)接口,插件的其他接口(或方法)小程序無法使用。
做好以上配置后,就可以開始在 plugin/components 編寫組件代碼了,例如我寫了我的播放器組件,代碼如下:
player.js:
Component({
data: {
myData:[]
}
})
player.wxml:
值得注意的是:
編寫組件是調(diào)用 Component() 定義組件代碼,和App() 、Page()一樣的道理。
在組件能能夠調(diào)用的微信API受限,比如說不能調(diào)用 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 這個(gè)組件,組件hgPlayer對(duì)應(yīng)的代碼是 "components/player/player"
配置好后,我就可以上傳插件代碼到騰訊服務(wù)器,進(jìn)入微信小程序開發(fā)者后臺(tái)提交審核,騰訊審核通過后,第三方小程序就可以使用我們編寫的這個(gè)插件了。
如何使用第三方插件
使用第三方插件之前,需要進(jìn)入微信小程序開發(fā)者后臺(tái),在第三方服務(wù)里添加插件:

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

需要第三方同意你的申請(qǐng)后,你就可以開始使用第三方插件了。
使用第三方插件的時(shí)候,需要在 我們自己的小程序的 app.json 做如下配置:
{
"pages": [
"pages/index/index"
],
"plugins": {
"myPlugin": {
"version": "dev",
"provider": "填寫申請(qǐng)通過的插件AppId"
},
"plugin1": {
"version": "dev",
"provider": "填寫申請(qǐng)通過的插件AppId"
},
"plugin2": {
"version": "dev",
"provider": "填寫申請(qǐng)通過的插件AppId"
}
...
}
}
plugins: 配置的要使用的第三方插件列表。
插件列表配置好后,由于每個(gè)插件可能會(huì)有多個(gè)組件,所以需要我們在每個(gè)頁面定義要使用到的組件,例如,在 index.js 中要使用 hgPlayer 這個(gè)組件,需要在 index.json 配置如下:
{
"usingComponents": {
"player": "plugin://myPlugin/hgPlayer"
}
}
"player": "plugin://myPlugin/hgPlayer" 的含義是:要本頁面使用插件 myPlugin 的組件 hgPlayer,同時(shí)在本頁面的別名為 :player 。
配置好 index.json 后,就可以在 index.wxml 直接使用了,例如: