教你如何开发一个微信小程序插件~(组图)

微信小程序插件前言

上次教你如何在微信小程序中实现自定义组件已经有一段时间了（你不懂，推荐看看，因为很多插件都和组件类似），3月今年13，小程序新增了小程序**“插件”功能，以及开发者工具新增的“代码片段”**功能，即在小程序基础库1.9.6版本，允许开发者开发插件，同时给其他小程序提供插件无疑给开发者带来了好消息，因为代码可以在不同的小程序之间共享，这样会节省很多开发成本~

小程序插件接入

与自定义组件不同， 插件可以轻松嵌入到您自己的代码中。需要去官网激活小程序插件功能。详细的访问流程和文档，可以阅读官方小程序。插件访问指南，当然这不是本文的重点。本文重点教大家如何开发一个微信小程序插件~

执行

创建模板

开发一个小程序插件，前期准备一定要充足。我们在开发者工具中打开，按照正常步骤新建一个小程序项目，选择“创建插件快速启动模板”。，因为缺少，不仅部分功能受限，还要在真机上调试~

项目结构

插件项目建立后，开发者工具会自动创建一个新的插件项目。官网给出的示例项目结构如下：

先来了解一下吧~

该项目包含两个目录：

前者和普通小程序一样，我们可以正常开发，后期用于插件调试、预览和审计，不同的是那个app。完成，一般不需要配置，当然我们也可以根据自己的实际项目需要做相应的调整~

文件夹中存放的插件的目录结构大致如下：

{ "publicComponents": { "list": "components/list/list" }, "main": "index.js" }复制代码

执行

可能有人会疑惑？感觉官方不是现成的例子，为什么要写这篇文章？在我看来，官网给出的例子过于简单，无法展示插件的用法。官网给出的例子很多东西都没有涉及，只是简单的数据列表渲染，没有交互，在实际开发中几乎是不存在的。是的，大多数情况下，我们需要通过插件的回调来执行一系列操作。本文专门针对微信官网例子的痛点，分享我们自己的实现过程和思路~

ok，老规矩，先定一个小目标，我们要实现一个省市选择器的插件，点击提交按钮的时候提交数据，整体效果如下图~

首先，我们在组件文件中创建一个文件夹来开发我们的省市选择器。我们右键选择 and name后，就会生成组件的组件，即.wxml、.wxss、.json、.js四个文件，为了方便，我们直接使用微信自带的实现~

代码显示如下：

结构.wxml

'section'> "section-title">省市区选择器

"picker"> 当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}} 复制代码

样式.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.js

Component({ properties : { region : { type : Array , value: ['北京市', '北京市', '东城区'] } }, data: { }, methods : { bindRegionChange(e){ this.setData({ region: e.detail.value }) } })复制代码

和我们写自定义组件的时候基本一样，数据绑定在字段中，方法声明在对象中。对自定义组件中js文件的编写不是很熟悉的可以看看官方的构造函数和我上一篇文章。自定义组件开发的一些介绍和理解~

至此，您已经实现了一个自定义组件。如何以插件的形式应用到其他小程序中？需要配置两个地方，一个是.json，声明我们的插件；

.json

{ "publicComponents": { "regionPicker" : "components/regionPicker/regionPicker" }, "main": "index.js" }复制代码

另一种是在我们需要的页面中引入（这里是.wxml），修改.json，引入插件

.json

{ "usingComponents": { "regionPicker" : "plugin://myPlugin/regionPicker" } }复制代码

然后在页面调用

.wxml

'submit'>提交复制代码

现在看到的效果和下图基本一样~

嗯，好像功能正常，好像没有问题~

不对，好像又出问题了，我切换后怎么传输数据，我点击提交按钮的时候怎么通过我的选择区，确实是这样，让我们​​看看~

接下来我们将解决上述问题。首先，我们之前有开发组件的经验。我们应该都知道我们只是在字段中声明了它，所以我们当然可以修改它。我们在 .js 中的数据也是在字段中声明的。不同的是我们把它的值设置为：['广东省', '微信市', '海珠区']，然后绑定到我们的插件上保存，我们会发现现在插件的默认值不是微信城，微信城，东城区，但是广东省，微信城，海珠区，解决了修改插件默认值的问题，下一步就是回调事件！

嗯，其实回调触发也很简单。有自定义组件开发经验的小伙伴应该早就想到了。和自定义组件一样，我们只需要在组件被激活的时候触发回调，也就是我们修改 .js 方法如下：

bindRegionChange(e){ this.setData({ region: e.detail.value }) // 触发回调 this.triggerEvent("changeEvent", { region: this.data.region}) }复制代码

我们通过回调将每个更改值传回，因此我们直接在 .wxml 中定义它并在 .js 中调用该方法。

.js

Page({ data: { region: ['广东省', '广州市', '海珠区'] }, submit(){ console.log(this.data.region) }, changeEvent(e){ console.log(e) this.setData({ region : e.detail.region }) }, onLoad(){ } })复制代码

这样，每次选择一个区域并通过回调触发，我们就可以通过e获取我们想要的数据~

至此，插件的数据交互传递基本没问题了~想一想，我们还有什么用，插件的api接口，ok，接下来看看这个怎么用~

我们知道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 }复制代码

以后通过暴露你要使用的界面~

还记得我们之前的插件入口文件.js，现在就派上用场了，我们在.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 }复制代码

后来我们也看到了两个方法and，这里暴露的方法就是是在插件之外使用的，给插件调用者提供了一个接口~

引入插件后，如何调用插件的接口呢？

其实也很简单，我们只需要在对应的js文件（这里是.js）中通过var = ("")导入插件就可以得到对应的接口。

现在，当我们在页面上打印时，控制台会输出以下内容：

我们看到的只是我们之前在.js中暴露的接口，我们调用它试试吧~

返回以下内容：

接口数据也可以完美获取，棒棒哒~

总结

那么，你对小程序插件开发有新的认识了吗？其实并没有想象中的那么复杂，但是和定制组件的开发有很多相似之处。相信现在你已经基本掌握了小程序插件开发的技巧，只是还没有学会。来吧，Soso，快点学习吧。快速上手，开发一些常用的插件，方便大家以后在小程序中参考~

哎呀，至于我。.

哦对了中开发微信小程序插件，代码已经托管在上面了，需要的朋友可以自行下载~