小程序模板網(wǎng)

手把手教你開發(fā)微信小程序中的插件

發(fā)布時間:2018-04-19 09:59 所屬欄目:小程序開發(fā)教程

繼上次 手把手教你實現(xiàn)微信小程序中的自定義組件 已經(jīng)有一段時間了(不了解的小伙伴建議去看看,因為插件很多內(nèi)容跟組件相似),今年3月13日,小程序新增了 小程序**「插件」 功能,以及開發(fā)者工具新增 「代碼片段」**功能,即在小程序基礎(chǔ)庫 1.9.6 版本上,允許開發(fā)者開發(fā)插件,同時將插件提供給其它小程序使用,這無疑給開發(fā)者帶來了福音,因為不同的小程序之間可以共享代碼啊,這將省去不少的開發(fā)成本了~

小程序插件接入

小程序插件不像自定義組件那樣,很方便的就可以嵌在自己的代碼中了,它是需要去官網(wǎng)開通小程序插件功能才能使用的,詳細(xì)的接入流程和文檔可以閱讀官方的小程序插件接入指南,當(dāng)然這不是我們本篇文章的重點,本篇文章重點是教你如何開發(fā)一個微信小程序插件~

具體實現(xiàn)

建立模板

要開發(fā)一個小程序插件,前期準(zhǔn)備要充分,我們打開在開發(fā)者工具中,我們按照正常步驟新建一個小程序項目,并選擇 「建立插件快速啟動模板」 ,沒有 AppID 的小伙伴我建議去官網(wǎng)注冊一個,因為缺乏 AppID ,不僅部分功能受到限制,也不方面在真機上調(diào)試~

項目結(jié)構(gòu)

插件項目建立完成之后,開發(fā)者工具就會自動新建一個插件項目,官網(wǎng)給的示例項目的結(jié)構(gòu)如下:

我們先大概了解一下~

項目中包含了兩個目錄:

  • miniprogram 目錄:放置的是一個小程序,該小程序是用于調(diào)試、測試插件用的。
  • plugin 目錄:插件代碼的存放目錄,用于放置我們開發(fā)的插件

前者就跟普通小程序一樣,我們可以正常開發(fā),后來用來插件調(diào)試、預(yù)覽和審核,不同的是 app.json 和 project.config.json 里多了一些關(guān)于插件的配置而已,這些也都是官方幫你完成了,一般也不用配置,當(dāng)然我們也可以根據(jù)自己的實際項目需求做對應(yīng)的調(diào)整~

plugin 插件文件夾下存放的插件的目錄結(jié)構(gòu)大概如下:

  • api : 接口插件文件夾,可以存放插件所需的接口
  • components : 插件提供的自定義組件文件夾, 中自定義組件可以有多個
  • index.js : 插件入口文件,可以在這里 export 一些 js 接口,供插件使用者使用
  • plugin.json : 插件的配置文件,主要說明有哪些自定義組件可以供插件外部調(diào)用,并標(biāo)識哪個js文件是插件的js接口文件,默認(rèn)的配置形式如下:

{
      "publicComponents": {
        "list": "components/list/list"
      },
      "main": "index.js"
    }

具體實現(xiàn)

有些人可能納悶了?覺得官方不是現(xiàn)成的示例了,為啥我還要寫這篇文章呢?在我看來,官網(wǎng)給的示例過于簡單,不足以展示插件的用法,官方給的示例中很多東西都沒有涉及到,只是單純的數(shù)據(jù)列表渲染,沒有交互,這在實際開發(fā)中幾乎是不存在的,大部分情況下,我們都是要通過插件的回調(diào)來進行一系列操作,本篇文章就是專門針對微信官網(wǎng)示例的痛點,分享一下自己的實現(xiàn)過程和思路~

ok,老規(guī)矩,首先先定一個小目標(biāo),我們要實現(xiàn)一個省市區(qū)選擇器的插件,并在點擊提交按鈕的時候把數(shù)據(jù)提交過去,大整效果如下圖所示~

Step1

首先,我們在 components 組件文件中創(chuàng)建一個 regionPicker 文件夾,用來開發(fā)我們的省市區(qū)選擇器,我們右擊選擇創(chuàng)建 component 并命名完畢后,就會產(chǎn)生組件的組成部分,即 .wxml、 .wxss 、 .json 、 .js 四個文件,我們?yōu)榱朔奖?,就直接采用微信自帶?nbsp;picker 實現(xiàn)~

代碼如下:

結(jié)構(gòu) regionPicker.wxml


<view class='section'>
        <view class="section-title">省市區(qū)選擇器</view>
        <picker mode="region" bindchange="bindRegionChange" value="{{region}}" >
            <view class="picker">
                當(dāng)前選擇:{{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: ['北京市', '北京市', '東城區(qū)']
            }
        },
        data: {
            
        },
        methods : {
           bindRegionChange(e){
            this.setData({
                region: e.detail.value 
            })
        }
    })

跟我們書寫自定義組件基本相同,數(shù)據(jù)綁定在 region 字段,方法聲明在 methods 對象中,關(guān)于自定義組件中 js 文件中的書寫還不是很熟的小伙伴,可以看看官方 Component構(gòu)造器 和 我上篇文章自定義組件開發(fā)中對其的一些介紹和理解~

Step2

到這里,你已經(jīng)實現(xiàn)了一個自定義的組件,如何將其以插件的形式讓其他小程序應(yīng)用呢,需要配置兩個地方,一個是 plugin.json ,聲明我們的插件;

plugin.json


{
      "publicComponents": {
        "regionPicker" : "components/regionPicker/regionPicker"
      },
      "main": "index.js"
    }

另一個是在我們需要的頁面中去引入(這里是 index.wxml ),修改 index.json ,引入插件

index.json


{
      "usingComponents": {
        "regionPicker" : "plugin://myPlugin/regionPicker"
      }
    }

接著頁面中調(diào)用一下即可

index.wxml


<!--引入插件  -->
    <regionPicker />
    
    <button class='submit'>提交</button>

現(xiàn)在你看到的效果基本也就是下圖這樣了~

嗯,看起來功能都正常,好像也沒什么問題啊~

不對,好像又有問題了,我切換后的數(shù)據(jù)怎么傳過來,我點擊提交按鈕的時候怎么穿我選擇區(qū)域呢,確實是,我們接著看~

Step3

我們接下來就要解決上面的問題,首先,我們有了之前開發(fā)組件的經(jīng)驗,應(yīng)該都知道,我們剛才是在 properties 字段中聲明的 region ,那么我們當(dāng)然可以對它進行修改,我們在 index.js中的 data 字段中也聲明一個 region ,不同的是我們將它的值設(shè)置為 region: ['廣東省', '廣州市', '海珠區(qū)'] , 再將其綁定到我們的插件上 <regionPicker region="{{region}}"/>后保存 ,我們會發(fā)現(xiàn)現(xiàn)在的插件默認(rèn)值已經(jīng)不是 北京市, 北京市, 東城區(qū) , 而變成了 廣東省, 廣州市, 海珠區(qū) , 這樣就解決了修改插件默認(rèn)值的問題,接下來就是回調(diào)事件了!

嗯,其實回調(diào)觸發(fā)也很簡單,有過自定義組件開發(fā)經(jīng)驗的小伙伴應(yīng)該早都想到了,跟自定義組件一樣,我們只需要在組件 change 的時候觸發(fā)回調(diào)就可以了,即我們修改 regionPicker.js 的 bindRegionChange 方法如下:


bindRegionChange(e){
        this.setData({
            region: e.detail.value 
        })
        // 觸發(fā)回調(diào)
        this.triggerEvent("changeEvent", { region: this.data.region})
    }

我們把每次的改變值通過回調(diào)穿回去,這樣我們直接在 index.wxml 中定義 <regionPicker region="{{region}}" bindchangeEvent="changeEvent" /> ,調(diào)用 index.js 中的 changeEvent 方法即可.

index.js


Page({
        data: {
            region: ['廣東省', '廣州市', '海珠區(qū)']
        },
        submit(){
            console.log(this.data.region)
        },
        changeEvent(e){
            console.log(e)
            this.setData({
                region : e.detail.region
            })
        },
        onLoad(){
            
        }
    })

這樣,每次選擇區(qū)域后,通過回調(diào)觸發(fā),我們就可以通過 e.detail 拿到我們想要的數(shù)據(jù)了~

到這里,插件的數(shù)據(jù)交互傳遞基本沒什么問題了~ 想想,我們還有什么沒有用到的呢,插件的 api 接口,ok,我們接下來就看看這個怎么使用~

Step4

我們知道了 api 的文件夾的作用是定義插件的一些接口,我們可以定義以下幾個方法:

api.js


let systemInfo = null;
    
    // 獲取插件信息
    function getPluginInfo() {
        return {
            name : 'regionPicker' ,
            version : '1.0.0' ,
            date : '2018-04-14'
        }
    }
    
    //設(shè)置設(shè)備信息
    function setSystemInfo(value){
        systemInfo = value;
    }
    
    //獲取設(shè)備信息
    function getSystemInfo(){
        return systemInfo;
    }
    
    module.exports = {
        getPluginInfo ,
        getSystemInfo ,
        setSystemInfo
    }

后面通過 exports 把想要用的接口暴露出去~

還記得我們之前的插件入口文件 index.js 么,現(xiàn)在它就要派上用場了,我們在 index.js 文件中引入我們的 api.js ,這樣我們就可以在插件加載的時候?qū)ζ溥M行一些操作,我這里只是單純的獲取了當(dāng)前用戶的設(shè)備信息而已:


var api = require('./api/api.js')
    
    // 獲取設(shè)備信息
    wx.getSystemInfo({
        success: function(res) {
            // 存數(shù)據(jù)
            api.setSystemInfo(
                {
                    model: res.model ,
                    system: res.system
                }
            )
        },
    })
    
    
    module.exports = {
        getPluginInfo: api.getPluginInfo ,
        getSystemInfo: api.getSystemInfo
    }

后面我們還看到了 exports 了兩個方法 getPluginInfo 和 getSystemInfo ,這里暴露出去的方法是方面在插件外部使用,給插件調(diào)用者提供接口~

Step5

我們引入插件后,如何調(diào)用插件的接口呢?

其實也很簡單,我們只需要在對應(yīng)的 js 文件中( 這里是 index.js )通過 var plugin = requirePlugin("myPlugin") 引入插件后就可獲得對應(yīng)的接口。

現(xiàn)在在頁面 onLoad 的時候我們打印一下 plugin ,控制臺輸出如下內(nèi)容:

看到 plugin 的內(nèi)容剛好就是我們之前在 index.js 中通過 exports 暴露出去的接口,我們調(diào)用試試看~

返回如下內(nèi)容:

接口數(shù)據(jù)也能完美的獲取,棒棒噠~



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23718.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢