手把手教你開發微信小程序中的插件
|
繼上次 手把手教你實現微信小程序中的自定義組件 已經有一段時間了（不了解的小伙伴建議去看看，因為插件很多內容跟組件相似），今年3月13日，小程序新增了 小程序**「插件」 功能，以及開發者工具新增 「代碼片段」**功能，即在小程序基礎庫 1.9.6 版本上，允許開發者開發插件，同時將插件提供給其它小程序使用，這無疑給開發者帶來了福音，因為不同的小程序之間可以共享代碼啊，這將省去不少的開發成本了~ 小程序插件接入小程序插件不像自定義組件那樣，很方便的就可以嵌在自己的代碼中了，它是需要去官網開通小程序插件功能才能使用的，詳細的接入流程和文檔可以閱讀官方的小程序插件接入指南，當然這不是我們本篇文章的重點，本篇文章重點是教你如何開發一個微信小程序插件~
具體實現建立模板要開發一個小程序插件，前期準備要充分，我們打開在開發者工具中，我們按照正常步驟新建一個小程序項目，并選擇 「建立插件快速啟動模板」 ，沒有 AppID 的小伙伴我建議去官網注冊一個，因為缺乏 AppID ，不僅部分功能受到限制，也不方面在真機上調試~
項目結構插件項目建立完成之后，開發者工具就會自動新建一個插件項目，官網給的示例項目的結構如下：
我們先大概了解一下~ 項目中包含了兩個目錄：
前者就跟普通小程序一樣，我們可以正常開發，后來用來插件調試、預覽和審核，不同的是 app.json 和 project.config.json 里多了一些關于插件的配置而已，這些也都是官方幫你完成了，一般也不用配置，當然我們也可以根據自己的實際項目需求做對應的調整~ plugin 插件文件夾下存放的插件的目錄結構大概如下：
{
"publicComponents": {
"list": "components/list/list"
},
"main": "index.js"
}
具體實現有些人可能納悶了？覺得官方不是現成的示例了，為啥我還要寫這篇文章呢？在我看來，官網給的示例過于簡單，不足以展示插件的用法，官方給的示例中很多東西都沒有涉及到，只是單純的數據列表渲染，沒有交互，這在實際開發中幾乎是不存在的，大部分情況下，我們都是要通過插件的回調來進行一系列操作，本篇文章就是專門針對微信官網示例的痛點，分享一下自己的實現過程和思路~ ok，老規矩，首先先定一個小目標，我們要實現一個省市區選擇器的插件，并在點擊提交按鈕的時候把數據提交過去，大整效果如下圖所示~
Step1首先，我們在 components 組件文件中創建一個 regionPicker 文件夾，用來開發我們的省市區選擇器，我們右擊選擇創建 component 并命名完畢后，就會產生組件的組成部分，即 .wxml、 .wxss 、 .json 、 .js 四個文件，我們為了方便，就直接采用微信自帶的 picker 實現~
代碼如下： 結構 regionPicker.wxml
<view class='section'>
<view class="section-title">省市區選擇器</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: ['北京市', '北京市', '東城區']
}
},
data: {
},
methods : {
bindRegionChange(e){
this.setData({
region: e.detail.value
})
}
})
跟我們書寫自定義組件基本相同，數據綁定在 region 字段，方法聲明在 methods 對象中，關于自定義組件中 js 文件中的書寫還不是很熟的小伙伴，可以看看官方 Component構造器 和 我上篇文章自定義組件開發中對其的一些介紹和理解~ Step2到這里，你已經實現了一個自定義的組件，如何將其以插件的形式讓其他小程序應用呢，需要配置兩個地方，一個是 plugin.json ，聲明我們的插件; plugin.json
{
"publicComponents": {
"regionPicker" : "components/regionPicker/regionPicker"
},
"main": "index.js"
}
另一個是在我們需要的頁面中去引入（這里是 index.wxml ），修改 index.json ，引入插件 index.json
{
"usingComponents": {
"regionPicker" : "plugin://myPlugin/regionPicker"
}
}
接著頁面中調用一下即可 index.wxml
<!--引入插件 -->
<regionPicker />
<button class='submit'>提交</button>
現在你看到的效果基本也就是下圖這樣了~
嗯，看起來功能都正常，好像也沒什么問題啊~ 不對，好像又有問題了，我切換后的數據怎么傳過來，我點擊提交按鈕的時候怎么穿我選擇區域呢，確實是，我們接著看~ Step3我們接下來就要解決上面的問題，首先，我們有了之前開發組件的經驗，應該都知道，我們剛才是在 properties 字段中聲明的 region ，那么我們當然可以對它進行修改，我們在 index.js中的 data 字段中也聲明一個 region ，不同的是我們將它的值設置為 region: ['廣東省', '廣州市', '海珠區'] ， 再將其綁定到我們的插件上 <regionPicker region="{{region}}"/>后保存 ，我們會發現現在的插件默認值已經不是 北京市, 北京市, 東城區 ， 而變成了 廣東省, 廣州市, 海珠區 ， 這樣就解決了修改插件默認值的問題，接下來就是回調事件了！ 嗯，其實回調觸發也很簡單，有過自定義組件開發經驗的小伙伴應該早都想到了，跟自定義組件一樣，我們只需要在組件 change 的時候觸發回調就可以了，即我們修改 regionPicker.js 的 bindRegionChange 方法如下：
bindRegionChange(e){
this.setData({
region: e.detail.value
})
// 觸發回調
this.triggerEvent("changeEvent", { region: this.data.region})
}
我們把每次的改變值通過回調穿回去，這樣我們直接在 index.wxml 中定義 <regionPicker region="{{region}}" bindchangeEvent="changeEvent" /> ，調用 index.js 中的 changeEvent 方法即可. index.js
Page({
data: {
region: ['廣東省', '廣州市', '海珠區']
},
submit(){
console.log(this.data.region)
},
changeEvent(e){
console.log(e)
this.setData({
region : e.detail.region
})
},
onLoad(){
}
})
這樣，每次選擇區域后，通過回調觸發，我們就可以通過 e.detail 拿到我們想要的數據了~
到這里，插件的數據交互傳遞基本沒什么問題了~ 想想，我們還有什么沒有用到的呢，插件的 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 么，現在它就要派上用場了，我們在 index.js 文件中引入我們的 api.js ，這樣我們就可以在插件加載的時候對其進行一些操作，我這里只是單純的獲取了當前用戶的設備信息而已：
var api = require('./api/api.js')
// 獲取設備信息
wx.getSystemInfo({
success: function(res) {
// 存數據
api.setSystemInfo(
{
model: res.model ,
system: res.system
}
)
},
})
module.exports = {
getPluginInfo: api.getPluginInfo ,
getSystemInfo: api.getSystemInfo
}
后面我們還看到了 exports 了兩個方法 getPluginInfo 和 getSystemInfo ，這里暴露出去的方法是方面在插件外部使用，給插件調用者提供接口~ Step5 我們引入插件后，如何調用插件的接口呢？ 其實也很簡單，我們只需要在對應的 js 文件中（ 這里是 index.js ）通過 var plugin = requirePlugin("myPlugin") 引入插件后就可獲得對應的接口。 現在在頁面 onLoad 的時候我們打印一下 plugin ，控制臺輸出如下內容：
看到 plugin 的內容剛好就是我們之前在 index.js 中通過 exports 暴露出去的接口，我們調用試試看~ 返回如下內容：
接口數據也能完美的獲取，棒棒噠~ |
