昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现。
这篇文章,我将会带大家,从0开始,学习如何开发和使用插件。文章分为3个章节:
-
1、什么是微信小程序插件
-
2、如何开发微信小程序插件
-
3、如何使用第三方微信小程序插件
备注:为了节省文字内容,我会将“微信小程序插件”简称为“插件”。
什么是微信小程序插件?
插件一组由js和自定义组件封装的代码库,插件无法单独使用、也无法预览,必须被其他小程序应用嵌入,才能使用。它和NPM的依赖、Maven的依赖库是一个道理。
不过,插件和NPM、Maven依赖管理不同的是:
-
插件拥有独立的API接口和域名列表,不被小程序本身的域名列表限制。(NPM依赖进来的库不能进行第三方数据请求)
-
插件必须由腾讯审核通过才能使用(NPM无需腾讯审核)
-
使用第三方插件必须向第三方申请 (通过NPM使用第三方库无需向第三方申请)
所以,我觉得:在未来,插件应该会被第三方打包成为服务,而不仅仅只是一个代码库。
如何开发微信小程序插件?
下载最新的微信小程序开发者工具,(必须是 1.02.1803130 版本以上),打开开发者工具,进入小程序项目,我们会看到“代码片段”标签,如下图:
点击,右下角的 “创建” 按钮,就可以创建插件了,如下图:
插件的AppId和之前的微信小程序的AppId是同个道理,需要在微信开发者后台新建一个微信小程序插件:
微信小程序插件的名称也必须是独一无二的,申请完毕后就可以获得 插件的AppId了。
填写名称和插件AppID后,进入小程序项目,如下图显示:
项目的代码目录结构如下:
├── miniprogram
│ ├── app.js
│ ├── app.json
│ └── pages
├── plugin
│ ├── api
│ ├── components
│ ├── index.js
│ └── plugin.json
└── project.config.json
在文件 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"
配置好后,我就可以上传插件代码到腾讯服务器,进入微信小程序开发者后台提交审核,腾讯审核通过后,第三方小程序就可以使用我们编写的这个插件了。
如何使用第三方插件
使用第三方插件之前,需要进入微信小程序开发者后台,在第三方服务里添加插件:
填写第三方插件的AppId,点击添加按钮,对方账号的 小程序插件 > 申请管理
会出现你的申请,如下图:
需要第三方同意你的申请后,你就可以开始使用第三方插件了。
使用第三方插件的时候,需要在 我们自己的小程序的 app.json
做如下配置:
{ "pages": [ "pages/index/index" ], "plugins": { "myPlugin": { "version": "dev", "provider": "填写申请通过的插件AppId" }, "plugin1": { "version": "dev", "provider": "填写申请通过的插件AppId" }, "plugin2": { "version": "dev", "provider": "填写申请通过的插件AppId" } ... } }
plugins: 配置的要使用的第三方插件列表。
插件列表配置好后,由于每个插件可能会有多个组件,所以需要我们在每个页面定义要使用到的组件,例如,在 index.js
中要使用 hgPlayer
这个组件,需要在 index.json
配置如下:
{ "usingComponents": { "player": "plugin://myPlugin/hgPlayer" } }
"player": "plugin://myPlugin/hgPlayer"
的含义是:要本页面使用插件 myPlugin 的组件 hgPlayer,同时在本页面的别名为 :player 。
配置好 index.json
后,就可以在 index.wxml
直接使用了,例如:
<view class="xxxx"> <player /> </view>
相关推荐
最近ChatGPT智能AI聊天突然爆火了 ChatGPT 是 OpenAI 开发的一款专门从事对话的人工智能聊天机器人原型。...今天就给大家带来一款小程序版本的程序 包含前后端安装比较简单的其实 PS:api需要用户自行注册获取哈
源码功能: 1.首页自定义轮播 2.首页自定义热门推荐 ...第六步:修改zblog后台 青春小程序插件配置,小程序插件配置有对应的文本教程 第七步:登录小程序后台,点击版本管理,上传发布,审核通过后确认发布即可。
这是一款由”有福气的团队”开源的慧眼识花草的云开发微信小程序源码。 该小程序可以自动识别植物名称,用户通过点击“拍照识花草”拍照或者从相册上传植物的照片,小程序可以自动查找识别与这款植物匹配的名称,...
11、小程序插件开发 12、小程序分包加载 13、小程序基础库版及兼容处理 14、小程序运行机制 15、小程序性能分析及优化 16、小程序云开发、云函数、云数据库 17、小程序上线和发布 黑马优购商城 1、原生框架的搭建 ...
看漫画微信小程序源码,独立端漫画小程序源码是一款独立端看漫画微信小程序源码,本项目对接了看漫画网的接口,不需要额外采集或对接其他接口,并且该看漫画小程序源码开通了流量主功能。 我们只需要上传index.php...
2023最新ChatGPT智能AI机器人微信小程序源码_带部署教程 最近ChatGPT智能AI聊天突然爆火了 ChatGPT 是 OpenAI 开发的一款专门从事对话的人工智能聊天机器人原型。 聊天机器人是一种大型语言模型,采用监督学习和强化...
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
微信小程序项目实战,微信小程序课程设计,基于微信小程序开发的,含有简单代码注册,下载下来简单部署即可使用。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在里面。 ...
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
本资源为点餐微信小程序,页面整洁美观,可以用于二次开发。 实现的功能主要有: 1、菜系管理 2、美食管理 3、会员管理 4、店铺信息管理 5、后台管理系统+微信小程序 里面有具体的使用说明文档和程序配置说明,可用于...
微信小程序使用sublime text插件开发详细教程weapp-snippet-for-sublime-text-2-3-master.zip
不懂开发,但又想拥有自己的小程序怎么办?或者想要基于某个小程序框架做二...资源包提供1000套微信小程序源码包合集 类目涵盖:音乐类、交通类、天气类、游戏类、答题类、博客类、商城、教育、旅游类 等等,拿走不谢。
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
zblog小程序模板-青春主题小程序免费开源模板 ...第六步:修改zblog后台 青春小程序插件配置,小程序插件配置有对应的文本教程 第七步:登录小程序后台,点击版本管理,上传发布,审核通过后确认发布即可。
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂,可作为毕业设计,课程设计。 包含:项目源码、数据库脚本、部署说明等,该项目可以作为课程设计使用,前后端代码都在...
小程序完整项目,包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以...