开发 | 一篇文章，带你从 0 到 1 开发小程序插件

    前不久，微信释放了一个重磅新能力：微信小程序插件功能。有了它，小程序开发者就可以通过这个功能，强化自身小程序能力；小程序服务提供商也可以用它，为开发者、用户提供强大的小程序功能支持，进一步拓展小程序能力。

    插件固然好，但如何从零开发一个插件呢？今天，知晓程序就来手把手，教你如何从零开发一款微信小程序插件。

    关注「

    知晓程序

    」微信公众号，回复「

    开发

    」，获取小程序开发技巧大全。

    新建插件工程

    新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目，并选择「建立插件快速启动模板」即可，开发者工具就会自动创建插件项目。

    需要注意的是，新建项目时，需要确保选择的项目目录是空目录，否则不会显示「建立插件快速启动模板」选项。

    插件目录结构

    生成的项目结构主要分为两大块，一个是

    plugin，一个是

    miniprogram。

    plugin中放置我们插件的逻辑代码，主要分为

    api和

    components两个部分；

    miniprogram中放置的是插件的使用示例或者测试示例。

    插件API接口开发

    以写一个返回「helloworld!」的接口为例，我们可以在

    plugin/api/data.js中写下如下代码：

    functionsayHelloWorld(){return'helloworld!'}module.exports={sayHelloWorld}

    在

    plugin/index.js中将我们需要暴露出需要给插件使用者使用的接口：

    vardata=require('./api/data.js')module.exports={sayHelloWorld:data.sayHelloWorld}

    然后在

    plugin/plugin.json的配置文件中，配置插件的入口，默认如下：

    {""main"":""index.js""}

    然后在miniprogram中使用该接口。如在miniprogram/pages/index/index.js中使用：

    varplugin=requirePlugin(""myPlugin"")Page({onLoad:function(){console.log(plugin.sayHelloWorld())}})

    其中

    myPlugin为我们的插件名，微信默认配置。

    插件组件开发

    同样，以写一个显示「helloworld!」的组件为例，在

    plugin/components下新建一个helloWorld文件夹，点击该文件夹，右键生成组件，与普通组件一样，生成以下四个文件。

    在

    helloWorld.wxml中编写视图代码：

    <view>helloworld!</view>

    同样，在

    plugin/plugin.json中配置需要暴露给插件使用者使用的组件：

    {""publicComponents"":{""hello-world"":""components/helloWorld/helloWorld""},""main"":""index.js""}

    在需要引用到该组件的页面的配置文件中，做好配置即可，加入我们要在

    index页面使用，则需要在

    miniprogram/pages/index/index.json中进行如下配置：

    {""usingComponents"":{""hello-world"":""plugin://myPlugin/hello-world""}}

    然后再在

    miniprogram/pages/index/index.wxml中使用：

    <hello-world/>

    接下来，我们只需完整开发插件，然后选择上传，最后提交审核、发布，其他人就可以使用你的插件了。