微信小程序插件开发 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"
}
最后
十分感谢原博主,本博客参考的文献的地址为:
