微信小程序插件开发 Demo

序言

最近需要开发小程序插件,由于很久没有做过小程序有关的项目了对小程序开发过于生疏,以下的 demo 用于熟悉小程序插件开发

插件开发

演示

输出为:

开发文档

微信小程序插件开发文档可以直接点击 传送门

Demo

项目目录

项目中包含了两个目录:

• 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"
}

本次项目参考了其他博主的博客项目,实现一个省市区选择器的插件,并在点击提交按钮的时候把数据提交过去

Demo 源码

miniprogram 文件

index 文件夹

文件目录为:
index

• index.js
• index.json
• index.wxml
• index.wxss

index.js

const plugin = requirePlugin('picker') // 引入插件,用于调用插件里面的接口
Page({
    data: {
        region: ['广东省', '广州市', '海珠区'],
    },
    submit() {
        console.log(this.data.region)
        console.log(plugin.getPluginInfo())
        console.log(plugin.setPluginInfo('new System'))
        console.log(plugin.getSystemInfo())
    },
    changeEvent(e) {
        console.log(e)
        this.setData({
            region: e.detail.region,
        })
        console.log(plugin.getPluginInfo())
        console.log(plugin.setPluginInfo('new System'))
        console.log(plugin.getSystemInfo())
    },
    onLoad() {
        console.log(plugin)
    },
})

index.json

{
    "usingComponents": {
        "regionPicker": "plugin://picker/pickerCom"
    }
}

index.wxml

<regionPicker region="{{region}}"  bindchangeEvent="changeEvent" />

<button class='submit' bindtap="submit">提交</button>

index.wxss
(无代码)

app.json

{
    "pages": ["pages/index/index"],
    "plugins": {
        // 插件名称
        "picker": {
            "version": "dev", // 开发版本
            "provider": "插件的识别id" // 插件的识别id
        }
    },
    "sitemapLocation": "sitemap.json"
}

plugin 文件

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
}

//设置系统信息
function setPluginInfo(value) {
    return value
}
module.exports = {
    getPluginInfo,
    getSystemInfo,
    setSystemInfo,
    setPluginInfo,
}

components 文件

本次的插件自定义组件名称设置为 picker,
文件目录为:
components

• picker.js
• picker.json
• picker.wxml
• picker.wxss

picker.js文件源码

Component({
    properties: {
        region: {
            type: Array,
            value: ['北京市', '北京市', '东城区'],
        },
    },
    data: {},
    methods: {
        bindRegionChange(e) {
            this.setData({
                region: e.detail.value,
            })
            // 触发回调
            this.triggerEvent('changeEvent', { region: this.data.region })
        },
    },
})

picker.json文件源码

{
    "component": true,
    "usingComponents": {}
}

picker.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>

picker.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;
}

index.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,
    setPluginInfo: api.setPluginInfo,
}

plugin.json

代码为

{
    "publicComponents": {
        "pickerCom": "components/picker"
    },
    "pages": {},
    "main": "index.js"
}

最后

十分感谢原博主,本博客参考的文献的地址为:

• 手把手教你开发微信小程序中的插件
• 开发插件|微信开发文档