258资源分享网

继上次 手把手教你实现微信小程序中的自定义组件 已经有一段时间了（不了解的小伙伴建议去看看，因为插件很多内容跟组件相似），今年3月13日，小程序新增了 小程序**「插件」 功能，以及开发者工具新增 「代码片段」**功能，即在小程序基础库 1.9.6 版本上，允许开发者开发插件，同时将插件提供给其它小程序使用，这无疑给开发者带来了福音，因为不同的小程序之间可以共享代码啊，这将省去不少的开发成本了~

小程序插件不像自定义组件那样，很方便的就可以嵌在自己的代码中了，它是需要去官网开通小程序插件功能才能使用的，详细的接入流程和文档可以阅读官方的小程序插件接入指南，当然这不是我们本篇文章的重点，本篇文章重点是教你如何开发一个微信小程序插件~

要开发一个小程序插件，前期准备要充分，我们打开在开发者工具中，我们按照正常步骤新建一个小程序项目，并选择 「建立插件快速启动模板」 ，没有 AppID 的小伙伴我建议去官网注册一个，因为缺乏 AppID ，不仅部分功能受到限制，也不方面在真机上调试~

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

我们先大概了解一下~

项目中包含了两个目录：

miniprogram 目录：放置的是一个小程序，该小程序是用于调试、测试插件用的。

plugin 目录：插件代码的存放目录，用于放置我们开发的插件

前者就跟普通小程序一样，我们可以正常开发，后来用来插件调试、预览和审核，不同的是 app.json 和 project.config.json 里多了一些关于插件的配置而已，这些也都是官方帮你完成了，一般也不用配置，当然我们也可以根据自己的实际项目需求做对应的调整~

plugin 插件文件夹下存放的插件的目录结构大概如下：

api ： 接口插件文件夹，可以存放插件所需的接口

components ： 插件提供的自定义组件文件夹， 中自定义组件可以有多个

index.js ： 插件入口文件，可以在这里 export 一些 js 接口，供插件使用者使用

plugin.json ： 插件的配置文件，主要说明有哪些自定义组件可以供插件外部调用，并标识哪个js文件是插件的js接口文件，默认的配置形式如下：

有些人可能纳闷了？觉得官方不是现成的示例了，为啥我还要写这篇文章呢？在我看来，官网给的示例过于简单，不足以展示插件的用法，官方给的示例中很多东西都没有涉及到，只是单纯的数据列表渲染，没有交互，这在实际开发中几乎是不存在的，大部分情况下，我们都是要通过插件的回调来进行一系列操作，本篇文章就是专门针对微信官网示例的痛点，分享一下自己的实现过程和思路~

ok，老规矩，首先先定一个小目标，我们要实现一个省市区选择器的插件，并在点击提交按钮的时候把数据提交过去，大整效果如下图所示~

首先，我们在 components 组件文件中创建一个 regionPicker 文件夹，用来开发我们的省市区选择器，我们右击选择创建 component 并命名完毕后，就会产生组件的组成部分，即 .wxml、 .wxss 、 .json 、 .js 四个文件，我们为了方便，就直接采用微信自带的 picker 实现~

代码如下：

结构 regionPicker.wxml