专栏首页极乐技术社区探究小程序插件

探究小程序插件

前段时间,微信释放了小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支持,进一步拓展小程序能力。小程序插件功能的推出将大大促进小程序生态发展。

今天, 我们一起探究下微信小程序插件功能。

什么是微信小程序插件

插件一组由js和自定义组件封装的代码库,插件无法单独使用、也无法预览,必须被其他小程序应用嵌入,才能使用。

插件可以是:

  • 提供查询快递信息的服务
  • 提供查询天气的服务
  • 提供打车(滴滴)的服务 - 可以使用滴滴提供的组件,直接嵌入自己的小程序,实现打车功能)
  • 提供外卖(美团外卖)的服务 - 例如每个餐厅需要的小程序风格都不一样,但他都需要外卖功能,那这时就可以给餐厅都定制一个小程序,在外卖部分的功能可以直接使用美团外卖提供的外卖插件

除了可以做这些方面还有很多很多,但小程序插件目前限制了开放范围及服务类目(开放类目)

组件和插件的区别:组件是组件,插件是插件,插件是可以直接提供服务的,组件是给开发者的轮子提高开发效率的,这是两回事。

如何开发小程序插件?

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

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

填写名称和插件AppID后,进入小程序项目。 

在文件 project.config.json 中,我们看到代码如下:

{
   "miniprogramRoot": "./miniprogram",
   "pluginRoot": "./plugin",
   "compileType": "plugin",
   "setting": {
       "newFeature": true
},
   "appid": ".....",
   "projectname": "videoPlayer",
   "condition": {}
}
  • miniprogramRoot:配置小程序的根目录,可以使用小程序来测试编写的插件
  • pluginRoot:插件相关代码所在的根目录
  • compileType:项目的编译类型,必须配置为 plugin,在上传代码的时候才会以插件的方式上传到腾讯服务器

在 plugin/plugin.json 文件中,代码如下:

{
 "publicComponents": {
   "hgPlayer": "components/player/player"
 },
 "main": "index.js"
}
  • publicComponents:配置的是插件可以给使用的小程序提供哪些组件,一个插件可以定义很多个组件,组件和组件之间相互引用,但是小程序只能使用在publicComponents里配置的组件。
  • main:定义入口文件,在入口文件 index.js 中定义小程序可以使用插件的那些接口。

在 plugin/index.js 文件中,代码如下:

var data = require('./api/data.js')
module.exports = {
 getData: data.getData,
 setData: data.setData
}

在 plugin/index.js 定义了对外抛出接口为 getData 和 setData,小程序在使用这个插件的时候,只能使用到插件提供的这两个接口,插件的其他接口(或方法)小程序无法使用。

做好以上配置后,就可以开始在 plugin/components 编写组件代码了,例如我写了我的播放器组件,代码如下:

player.js:
Component({
 data: {
   myData:[]
 }
})

player.wxml:
<view class="section tc">
 <video id="myVideo" src="..."  enable-danmu danmu-btn controls>
 </video>
</view>

值得注意的是:

编写组件是调用 Component() 定义组件代码,和App() 、Page()一样的道理。

在组件能能够调用的微信API受限,比如说不能调用 wx.login() 获取用户信息,具体限制在:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/plugin/api-limit.html

代码编写完毕后,注意在 plugin/plugin.json 文件配置:

{
 "publicComponents": {
   "hgPlayer": "components/player/player"
 },
 "main": "index.js"
}

表示使用该插件的小程序,可以使用 hgPlayer 这个组件,组件hgPlayer对应的代码是 "components/player/player"

配置好后,就可以上传插件代码到腾讯服务器,进入微信小程序开发者后台提交审核,腾讯审核通过后,第三方小程序就可以使用我们编写的这个插件了。

注:

1.开通插件功能条件:企业、媒体、政府及其他组织主体的小程序,个人小程序不行。一个小程序只能开通一个插件。

2.填写开发信息并开发限制:填写了小程序插件基本信息和头像就不能修改

3.提交审核、发布限制:在开发类目内才能提交官方文档说“插件发布后才可以被其他小程序搜索并添加”。

4.管理插件使用申请24小时内选择”通过“或”拒绝“申请方使用插件。

这个小程序开发文档有详情说明,文档里面有三处地方,我贴出来:

介绍小程序插件功能

小程序插件开发讲解

小程序插件在开发者工具中的使用

以上内容整理来源于微信开发者社区和网络,如有侵权请联系我们~

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:爱技术乐分享

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序重力感应-加速度计的使用

    极乐君
  • 『教程』熊晨沣蓝牙实战--小程序蓝牙连接2.0

    微信小程序蓝牙连接2.0说明: 1、本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式。 2、兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监...

    极乐君
  • 8分钟为你详解React、Angular、Vue三大框架

    当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架...

    极乐君
  • 分享几个实用的浏览器插件

    插件是一个神奇的东西,它可以满足我们各种各样的需求,而浏览器本身并不具备这种功能。谷歌浏览器之所以雄踞浏览器市场,除了万能的谷歌搜索,还有很大的原因就是因为它有...

    爱吃西瓜的番茄酱
  • 作为程序员,我在电脑上都装过哪些 Chrome 插件?

    相信在座大部分从事软件开发的同学都与我一样,每天在 PC 端上使用最多的几类产品,无疑是浏览器、编辑器和命令行终端。

    GitHubDaily
  • 在Chrome中使用ssh使用一种什么体验

    zhaoolee
  • MyBatis 源码分析 - 插件机制

    一般情况下,开源框架都会提供插件或其他形式的拓展点,供开发者自行拓展。这样的好处是显而易见的,一是增加了框架的灵活性。二是开发者可以结合实际需求,对框架进行拓展...

    田小波
  • 积木Sketch插件进阶开发指南

    前段时间,美团外卖技术团队积木Sketch插件“意外走红”。为了帮助更多的设计师小哥哥、小姐姐落地设计规范,提升产研效率,积木Sketch团队开始着手打造一个平...

    美团技术团队
  • 终于过审!首批小程序插件诞生了

    知晓君
  • PureBlue 主题更新记录

    修复文章目录过长覆盖 footer 的问题 本来想集成 Alogolia 搜索,无奈问题一个接着一个,只好放弃

    Chor

扫码关注云+社区

领取腾讯云代金券