1. 程式人生 > >手把手教你開發微信小程式中的外掛

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

繼上次 手把手教你實現微信小程式中的自定義元件 已經有一段時間了(不瞭解的小夥伴建議去看看,因為外掛很多內容跟元件相似),今年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 ,控制檯輸出如下內容:

看到 plugin 的內容剛好就是我們之前在 index.js 中通過 exports 暴露出去的介面,我們呼叫試試看~

返回如下內容:

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