微信小程序插件
前言
繼上次手把手教你實現(xiàn)微信小程序中的自定義組件已經(jīng)有一段時間了（不了解的小伙伴建議去看看外构，因為插件很多內(nèi)容跟組件相似），今年3月13日，小程序新增了 小程序「插件」功能，以及開發(fā)者工具新增「代碼片段」功能，即在小程序基礎庫 1.9.6 版本上讶请，允許開發(fā)者開發(fā)插件，同時將插件提供給其它小程序使用屎媳，這無疑給開發(fā)者帶來了福音夺溢，因為不同的小程序之間可以共享代碼啊，這將省去不少的開發(fā)成本了~
小程序插件接入
小程序插件不像自定義組件那樣剿牺，很方便的就可以嵌在自己的代碼中了企垦，它是需要去官網(wǎng)開通小程序插件功能才能使用的，詳細的接入流程和文檔可以閱讀官方的 小程序插件接入指南晒来，當然這不是我們本篇文章的重點钞诡，本篇文章重點是教你如何開發(fā)一個微信小程序插件~
具體實現(xiàn)
建立模板
要開發(fā)一個小程序插件，前期準備要充分湃崩，我們打開在開發(fā)者工具中荧降，我們按照正常步驟新建一個小程序項目，并選擇 「建立插件快速啟動模板」 攒读，沒有 AppID 的小伙伴我建議去官網(wǎng)注冊一個朵诫，因為缺乏 AppID，不僅部分功能受到限制薄扁，也不方面在真機上調(diào)試~
項目結(jié)構(gòu)
插件項目建立完成之后剪返，開發(fā)者工具就會自動新建一個插件項目废累，官網(wǎng)給的示例項目的結(jié)構(gòu)如下：
我們先大概了解一下~
項目中包含了兩個目錄：
-
miniprogram目錄：放置的是一個小程序，該小程序是用于調(diào)試脱盲、測試插件用的邑滨。 -
plugin目錄：插件代碼的存放目錄，用于放置我們開發(fā)的插件
前者就跟普通小程序一樣钱反，我們可以正常開發(fā)掖看，后來用來插件調(diào)試、預覽和審核面哥，不同的是 app.json 和 project.config.json 里多了一些關(guān)于插件的配置而已哎壳，這些也都是官方幫你完成了，一般也不用配置尚卫，當然我們也可以根據(jù)自己的實際項目需求做對應的調(diào)整~
plugin 插件文件夾下存放的插件的目錄結(jié)構(gòu)大概如下：
-
api： 接口插件文件夾归榕，可以存放插件所需的接口 -
components： 插件提供的自定義組件文件夾， 中自定義組件可以有多個 -
index.js： 插件入口文件吱涉，可以在這里export一些js接口蹲坷，供插件使用者使用 -
plugin.json： 插件的配置文件，主要說明有哪些自定義組件可以供插件外部調(diào)用邑飒，并標識哪個js文件是插件的js接口文件，默認的配置形式如下：
{
"publicComponents": {
"list": "components/list/list"
},
"main": "index.js"
}
具體實現(xiàn)
有些人可能納悶了级乐？覺得官方不是現(xiàn)成的示例了疙咸，為啥我還要寫這篇文章呢？在我看來风科，官網(wǎng)給的示例過于簡單撒轮，不足以展示插件的用法，官方給的示例中很多東西都沒有涉及到贼穆，只是單純的數(shù)據(jù)列表渲染题山，沒有交互，這在實際開發(fā)中幾乎是不存在的故痊，大部分情況下顶瞳，我們都是要通過插件的回調(diào)來進行一系列操作，本篇文章就是專門針對微信官網(wǎng)示例的痛點愕秫，分享一下自己的實現(xiàn)過程和思路~
ok慨菱，老規(guī)矩，首先先定一個小目標戴甩，我們要實現(xiàn)一個省市區(qū)選擇器的插件符喝，并在點擊提交按鈕的時候把數(shù)據(jù)提交過去，大整效果如下圖所示~
Step1
首先甜孤，我們在 components 組件文件中創(chuàng)建一個 regionPicker 文件夾协饲，用來開發(fā)我們的省市區(qū)選擇器畏腕，我們右擊選擇創(chuàng)建 component 并命名完畢后，就會產(chǎn)生組件的組成部分茉稠，即 .wxml描馅、.wxss、.json战惊、.js 四個文件流昏，我們?yōu)榱朔奖悖椭苯硬捎梦⑿抛詭У?picker 實現(xiàn)~
代碼如下：
結(jié)構(gòu) regionPicker.wxml
<view class='section'>
<view class="section-title">省市區(qū)選擇器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" >
<view class="picker">
當前選擇：{{region[0]}}吞获，{{region[1]}}况凉，{{region[2]}}
</view>
</picker>
</view>
樣式 regionPicker.wxss
.section{
padding: 20rpx;
}
.section-title{
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
color: #666;
}
.picker{
margin: 20rpx auto;
text-align: center;
font-size: 30rpx;
color: #666;
}
js regionPicker.js
Component({
properties : {
region : {
type : Array ,
value: ['北京市', '北京市', '東城區(qū)']
}
},
data: {
},
methods : {
bindRegionChange(e){
this.setData({
region: e.detail.value
})
}
})
跟我們書寫自定義組件基本相同，數(shù)據(jù)綁定在 region 字段各拷，方法聲明在 methods 對象中刁绒，關(guān)于自定義組件中 js 文件中的書寫還不是很熟的小伙伴，可以看看官方Component構(gòu)造器 和 我上篇文章自定義組件開發(fā)中對其的一些介紹和理解~
Step2
到這里烤黍，你已經(jīng)實現(xiàn)了一個自定義的組件知市，如何將其以插件的形式讓其他小程序應用呢，需要配置兩個地方速蕊，一個是 plugin.json 嫂丙，聲明我們的插件;
plugin.json
{
"publicComponents": {
"regionPicker" : "components/regionPicker/regionPicker"
},
"main": "index.js"
}
另一個是在我們需要的頁面中去引入（這里是 index.wxml ），修改 index.json 规哲，引入插件
index.json
{
"usingComponents": {
"regionPicker" : "plugin://myPlugin/regionPicker"
}
}
接著頁面中調(diào)用一下即可
index.wxml
<!--引入插件 -->
<regionPicker />
<button class='submit'>提交</button>
現(xiàn)在你看到的效果基本也就是下圖這樣了~
嗯跟啤，看起來功能都正常，好像也沒什么問題啊~
不對唉锌，好像又有問題了隅肥，我切換后的數(shù)據(jù)怎么傳過來，我點擊提交按鈕的時候怎么穿我選擇區(qū)域呢袄简，確實是腥放，我們接著看~
Step3
我們接下來就要解決上面的問題，首先绿语，我們有了之前開發(fā)組件的經(jīng)驗秃症，應該都知道，我們剛才是在 properties 字段中聲明的 region 吕粹，那么我們當然可以對它進行修改伍纫，我們在 index.js 中的 data 字段中也聲明一個 region，不同的是我們將它的值設置為 region: ['廣東省', '廣州市', '海珠區(qū)'] 昂芜， 再將其綁定到我們的插件上 <regionPicker region="{{region}}"/> 后保存 莹规，我們會發(fā)現(xiàn)現(xiàn)在的插件默認值已經(jīng)不是 北京市, 北京市, 東城區(qū) ， 而變成了 廣東省, 廣州市, 海珠區(qū) 泌神， 這樣就解決了修改插件默認值的問題良漱，接下來就是回調(diào)事件了舞虱！
嗯，其實回調(diào)觸發(fā)也很簡單母市，有過自定義組件開發(fā)經(jīng)驗的小伙伴應該早都想到了矾兜，跟自定義組件一樣，我們只需要在組件 change 的時候觸發(fā)回調(diào)就可以了患久，即我們修改 regionPicker.js 的 bindRegionChange 方法如下：
bindRegionChange(e){
this.setData({
region: e.detail.value
})
// 觸發(fā)回調(diào)
this.triggerEvent("changeEvent", { region: this.data.region})
}
我們把每次的改變值通過回調(diào)穿回去椅寺，這樣我們直接在 index.wxml 中定義 <regionPicker region="{{region}}" bindchangeEvent="changeEvent" /> ，調(diào)用 index.js 中的 changeEvent 方法即可.
index.js
Page({
data: {
region: ['廣東省', '廣州市', '海珠區(qū)']
},
submit(){
console.log(this.data.region)
},
changeEvent(e){
console.log(e)
this.setData({
region : e.detail.region
})
},
onLoad(){
}
})
這樣蒋失，每次選擇區(qū)域后返帕，通過回調(diào)觸發(fā)，我們就可以通過 e.detail 拿到我們想要的數(shù)據(jù)了~
到這里篙挽，插件的數(shù)據(jù)交互傳遞基本沒什么問題了~
想想荆萤，我們還有什么沒有用到的呢，插件的 api 接口铣卡，ok链韭，我們接下來就看看這個怎么使用~
Step4
我們知道了 api 的文件夾的作用是定義插件的一些接口，我們可以定義以下幾個方法：
api.js
let systemInfo = null;
// 獲取插件信息
function getPluginInfo() {
return {
name : 'regionPicker' ,
version : '1.0.0' ,
date : '2018-04-14'
}
}
//設置設備信息
function setSystemInfo(value){
systemInfo = value;
}
//獲取設備信息
function getSystemInfo(){
return systemInfo;
}
module.exports = {
getPluginInfo ,
getSystemInfo ,
setSystemInfo
}
后面通過 exports 把想要用的接口暴露出去~
還記得我們之前的插件入口文件 index.js 么煮落，現(xiàn)在它就要派上用場了敞峭，我們在 index.js 文件中引入我們的 api.js ，這樣我們就可以在插件加載的時候?qū)ζ溥M行一些操作蝉仇，我這里只是單純的獲取了當前用戶的設備信息而已：
var api = require('./api/api.js')
// 獲取設備信息
wx.getSystemInfo({
success: function(res) {
// 存數(shù)據(jù)
api.setSystemInfo(
{
model: res.model ,
system: res.system
}
)
},
})
module.exports = {
getPluginInfo: api.getPluginInfo ,
getSystemInfo: api.getSystemInfo
}
后面我們還看到了 exports 了兩個方法 getPluginInfo 和 getSystemInfo 儡陨，這里暴露出去的方法是方面在插件外部使用，給插件調(diào)用者提供接口~
Step5
我們引入插件后量淌，如何調(diào)用插件的接口呢？
其實也很簡單嫌褪，我們只需要在對應的 js 文件中（ 這里是index.js ）通過 var plugin = requirePlugin("myPlugin") 引入插件后就可獲得對應的接口呀枢。
現(xiàn)在在頁面 onLoad 的時候我們打印一下 plugin ，控制臺輸出如下內(nèi)容：
看到 plugin 的內(nèi)容剛好就是我們之前在 index.js 中通過 exports 暴露出去的接口笼痛，我們調(diào)用試試看~
返回如下內(nèi)容：
接口數(shù)據(jù)也能完美的獲取裙秋，棒棒噠~
總結(jié)
怎么樣，是不是對小程序插件開發(fā)有了新的認識缨伊！其實并沒有想象中的那么復雜摘刑，倒是跟自定義組件開發(fā)有很多相似點，我相信現(xiàn)在你已經(jīng)基本 get 了小程序插件開發(fā)的技巧了刻坊，還沒有學會了小伙伴加油啊枷恕，搜搜學習，快快上手谭胚，多開發(fā)一些常用的插件徐块，方便自己以后在小程序中引用~
咳咳未玻，至于我呢。胡控。
哦扳剿，對了，代碼已托管在github上昼激，有需要的小伙伴自行下載~
