應(yīng)該大家都看到了昨天開(kāi)發(fā)者工具又有更新了，點(diǎn)進(jìn)去看到激動(dòng)人心的這兩行源哩，小程序插件厘线。
image.png
作為一個(gè)喝粥吃飯都是靠小程序來(lái)養(yǎng)活的代碼汪，必須第一時(shí)間趕緊去看看商蕴。
那就說(shuō)下怎么創(chuàng)建一個(gè)插件的項(xiàng)目：
1叠萍、首先，你得先把開(kāi)發(fā)者工具更新到最新的版本（1.02.1803130）苛谷，然后按照文檔來(lái)說(shuō)的，正常創(chuàng)建個(gè)空文件夾格郁，選中建立插件模板
![]()
image.png
image.png
2腹殿、建立了快速模板之后，會(huì)自動(dòng)生成一個(gè)插件包的~生成的文件結(jié)構(gòu)是下面圖的那樣例书，其他都默認(rèn)行了锣尉，你需要修改的是紅色框的這一塊，直接在模板本身修改就可以决采。
image.png
快速啟動(dòng)模板說(shuō)明：
1自沧、miniprogram 文件夾是一個(gè)普通小程序項(xiàng)目，用來(lái)編寫(xiě)小程序插件的使用 Demo树瞭，上傳插件代碼時(shí)這個(gè) Demo 會(huì)一起上傳拇厢，并作為小程序插件的發(fā)布的審核依據(jù).
2、plugin 文件就是小程序插件項(xiàng)目晒喷，用來(lái)編寫(xiě)小程序插件的代碼孝偎。
3、project.config.json 需要關(guān)注 compileType 字段凉敲，compileType == 'plugin' 時(shí)才能正常的使用插件項(xiàng)目衣盾。
3、 components/list/list.wxml爷抓，插件的結(jié)構(gòu)可以在這里面寫(xiě)
image.png
4雨效、 components/list/list.js，插件的js同樣废赞，在這里寫(xiě)
image.png
5徽龟、插件的配置文件 components/plugin.json
{
"publicComponents": {
"list": "components/list/list"
},
"main": "index.js"
}
6、最后是上傳
image.png
接下來(lái)就是怎么去使用插件
1唉地、在小程序后臺(tái)据悔，在“設(shè)置-第三方服務(wù)-添加插件”通過(guò)appid查找插件去申請(qǐng)使用传透。
image.png
2、開(kāi)發(fā)者通過(guò)申請(qǐng)之后才可以使用极颓。然后可以在小程序的項(xiàng)目里面app.json里面引用聲明需要使用的插件
{
"pages": [
"pages/index/index"
],
"plugins": {
"myPlugin": {
"version": "1.0.0", //插件版本號(hào)
"provider": "wxc203867c245acd4b" //插件appid
}
}
}
注：多個(gè)插件的話朱盐，都需要配置版本號(hào)和appid
3、使用js接口：引用了插件之后菠隆，就可以在小程序的頁(yè)面js中使用插件提供的js 接口兵琳。
var plugin = requirePlugin("myPlugin")
plugin.getSystem() //這里是插件里面exports出來(lái)的函數(shù)
4、使用插件的組件：在頁(yè)面對(duì)應(yīng)的json文件中定義需要用的組件(和自定義組件的引用方式差不多骇径，使用 plugin:// 協(xié)議就可以了)
{
"usingComponents": {
"list": "plugin://myPlugin/list"
}
}
image.png
