繼上次 手把手教你實現微信小程式中的自定義元件 已經有一段時間了（不瞭解的小夥伴建議去看看，因為外掛很多內容跟元件相似），今年3月13日，小程式新增了 小程式**「外掛」 功能，以及開發者工具新增 「程式碼片段」**功能，即在小程式基礎庫 1.9.6 版本上，允許開發者開發外掛，同時將外掛提供給其它小程式使用，這無疑給開發者帶來了福音，因為不同的小程式之間可以共享程式碼啊，這將省去不少的開發成本了~

小程式外掛接入

小程式外掛不像自定義元件那樣，很方便的就可以嵌在自己的程式碼中了，它是需要去官網開通小程式外掛功能才能使用的，詳細的接入流程和文件可以閱讀官方的小程式外掛接入指南，當然這不是我們本篇文章的重點，本篇文章重點是教你如何開發一個微信小程式外掛~

具體實現

建立模板

要開發一個小程式外掛，前期準備要充分，我們開啟在開發者工具中，我們按照正常步驟新建一個小程式專案，並選擇 「建立外掛快速啟動模板」 ，沒有 AppID 的小夥伴我建議去官網註冊一個，因為缺乏 AppID ，不僅部分功能受到限制，也不方面在真機上除錯~

專案結構

外掛專案建立完成之後，開發者工具就會自動新建一個外掛專案，官網給的示例專案的結構如下：

我們先大概瞭解一下~

專案中包含了兩個目錄：

• miniprogram 目錄：放置的是一個小程式，該小程式是用於除錯、測試外掛用的。
• plugin 目錄：外掛程式碼的存放目錄，用於放置我們開發的外掛

前者就跟普通小程式一樣，我們可以正常開發，後來用來外掛除錯、預覽和稽核，不同的是 app.json

plugin 外掛資料夾下存放的外掛的目錄結構大概如下：

• api ： 介面外掛資料夾，可以存放外掛所需的介面
• components ： 外掛提供的自定義元件資料夾， 中自定義元件可以有多個
• index.js ： 外掛入口檔案，可以在這裡 export 一些 js 介面，供外掛使用者使用
• plugin.json ： 外掛的配置檔案，主要說明有哪些自定義元件可以供外掛外部呼叫，並標識哪個js檔案是外掛的js介面檔案，預設的配置形式如下：

{
      "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 暴露出去的介面，我們呼叫試試看~

返回如下內容：

介面資料也能完美的獲取，棒棒噠~