前不久,微信释放了一个重磅新能力:微信小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。
插件固然好,但如何从零开发一个插件呢?今天,知晓程序就来手把手,教你如何从零开发一款微信小程序插件。
关注「
知晓程序
」微信公众号,回复「
开发
」,获取小程序开发技巧大全。
新建插件工程
新建插件的操作非常简单。只需要在微信开发者工具中新建小程序项目,并选择「建立插件快速启动模板」即可,开发者工具就会自动创建插件项目。
需要注意的是,新建项目时,需要确保选择的项目目录是空目录,否则不会显示「建立插件快速启动模板」选项。
插件目录结构
生成的项目结构主要分为两大块,一个是
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/>
接下来,我们只需完整开发插件,然后选择上传,最后提交审核、发布,其他人就可以使用你的插件了。