首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >探究小程序插件

探究小程序插件

作者头像
极乐君
发布2018-07-31 14:44:19
1.2K0
发布2018-07-31 14:44:19
举报
文章被收录于专栏:极乐技术社区极乐技术社区

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

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

什么是微信小程序插件

插件一组由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小时内选择”通过“或”拒绝“申请方使用插件。

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

介绍小程序插件功能

小程序插件开发讲解

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档