手把手教你開發微信小程式中的外掛

Chris威發表於2019-03-04

微信小程式外掛

前言

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

小程式外掛接入

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

具體實現

建立模板

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

專案結構

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

我們先大概瞭解一下~

專案中包含了兩個目錄：

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

前者就跟普通小程式一樣，我們可以正常開發，後來用來外掛除錯、預覽和稽核，不同的是 app.json 和 project.config.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 ，控制檯輸出如下內容：