如何零基础开发一款微信小程序插件?


  前不久,微信释放了一个重磅新能力:微信小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。如何从零开发一个插件呢?今天,小猪CMS就来手把手,教你如何从零开发一款微信小程序插件。

小程序22.jpeg

  一、新建小程序插件:

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

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

  二、小程序插件目录结构:

  生成的项目结构主要分为两大块,一个是 plugin,一个是 miniprogram。plugin 中放置我们插件的逻辑代码,主要分为 api 和 components 两个部分; miniprogram 中放置的是插件的使用示例或者测试示例。

  三、小程序插件 API 接口开发

  以写一个返回「hello world!」的接口为例,我们可以在 plugin/api/data.js 中写下如下代码:

开发小程序插件3.jpg

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

开发小程序插件4.jpg

  然后在 plugin/plugin.json 的配置文件中,配置插件的入口,默认如下:

  {

  "main": "index.js"

  }

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

开发小程序插件5.jpg

  其中 myPlugin 为我们的插件名,微信默认配置。

  四、小程序插件组件开发:

  同样,以写一个显示 「hello world!」的组件为例,在 plugin/components 下新建一个 helloWorld 文件夹,点击该文件夹,右键生成组件,与普通组件一样,生成以下四个文件。

  在 helloWorld.wxml 中编写视图代码:

  hello world!

  同样,在 pluginj/plugin.json 中配置需要暴露给插件使用者使用的组件:

开发小程序插件7.jpg

  在需要引用到该组件的页面的配置文件中,做好配置即可,加入我们要在 index 页面使用,则需要在 miniprogram/pages/index/index.json 中进行如下配置:

开发小程序插件8.jpg

  然后再在 miniprogram/pages/index/index.wxml 中使用:

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

  

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值