手把手教你开发微信小程序中的插件

时间 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 ，控制台输出以下内容：

看到 plugin 的内容恰好就是咱们以前在 index.js 中经过 exports 暴露出去的接口，咱们调用试试看~

返回以下内容：

接口数据也能完美的获取，棒棒哒~

总结

怎么样，是否是对小程序插件开发有了新的认识！其实并无想象中的那么复杂，却是跟自定义组件开发有不少类似点，我相信如今你已经基本 get 了小程序插件开发的技巧了，尚未学会了小伙伴加油啊，搜搜学习，快快上手，多开发一些经常使用的插件，方便本身之后在小程序中引用~

咳咳，至于我呢。。

哦，对了，代码已托管在github上，有须要的小伙伴自行下载~