手把手教你開發微信小程序中的插件

時間 2019-12-05

標籤手把手開發微信程序插件简体版

原文原文鏈接

微信小程序插件

前言

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

小程序插件接入

小程序插件不像自定義組件那樣，很方便的就能夠嵌在本身的代碼中了，它是須要去官網開通小程序插件功能才能使用的，詳細的接入流程和文檔能夠閱讀官方的小程序插件接入指南，固然這不是咱們本篇文章的重點，本篇文章重點是教你如何開發一個微信小程序插件~git

具體實現

創建模板github

要開發一個小程序插件，前期準備要充分，咱們打開在開發者工具中，咱們按照正常步驟新建一個小程序項目，並選擇 「創建插件快速啓動模板」 ，沒有 AppID 的小夥伴我建議去官網註冊一個，由於缺少 AppID，不只部分功能受到限制，也不方面在真機上調試~json

項目結構小程序

插件項目創建完成以後，開發者工具就會自動新建一個插件項目，官網給的示例項目的結構以下：微信小程序

咱們先大概瞭解一下~api

項目中包含了兩個目錄：bash

miniprogram 目錄：放置的是一個小程序，該小程序是用於調試、測試插件用的。
plugin 目錄：插件代碼的存放目錄，用於放置咱們開發的插件

前者就跟普通小程序同樣，咱們能夠正常開發，後來用來插件調試、預覽和審覈，不一樣的是 app.json 和 project.config.json 裏多了一些關於插件的配置而已，這些也都是官方幫你完成了，通常也不用配置，固然咱們也能夠根據本身的實際項目需求作對應的調整~微信

plugin 插件文件夾下存放的插件的目錄結構大概以下：app

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 ，控制檯輸出以下內容：