uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件:
正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:
在uni-app中引入插件代码:
注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效。而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对应的分包可使用。
指定整个小程序可使用:
使用插件之前需要在manifest.json中的mp-weixin内声明使用的插件,具体配置参照所用插件的开发文档:
"mp-weixin": {
/* 小程序相关配置 */
"usingComponents": true,//是否启用自定义组件模式
"appid": "小程序AppID",
"plugins": {
"tencentvideo": {
"version": "1.3.6",
"provider": "腾讯视频小程序AppID"
}
}
}
指定到对应的分包中使用:
如果插件只在(同一个插件不能被多个分包同时引用)一个分包用到,可以单独配置到分包中,这样插件不会随主包加载,可以在pages.json
的subPackages中声明插件:
{
"subpackages": [
{
"root": "package1",//分包名称
"pages": [
"pages/cat",
"pages/dog"
],
"plugins": {
"tencentvideo": {
"version": "1.3.6",
"provider": "腾讯视频小程序AppID"
}
}
}
]
}
在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码:
"usingComponents": {
// #ifdef MP-WEIXIN
"txv-video": "plugin://tencentvideo/video"
// #endif
},
在.vue页面中使用腾讯视频播放组件:
<view>
<!--vid中的腾讯视频id最好为动态的数据,方便管理-->
<txv-video :vid="VideoId" playerid="txv1"></txv-video>
</view> <script>
export default {
data() {
return {
VideoId:'c3029q7tdnp'
};
}
}
</script>
关于如何获取腾讯视频vid问题:
打开网页腾讯视频=>随便找到一个视频点击鼠标右键=>赋值链接地址(仅供参考)如下图所示:
最后取视频连接地址.html前面的那一小串英文数字编号即可,下图所示:
参考资料:
腾讯视频小程序播放插件开发文档:
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=&lang=zh_CN
decloud uni-app相关配置:
https://uniapp.dcloud.io/component/mp-weixin-plugin
微信小程序特有配置:
https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin
uni-app微信小程序开发之引入腾讯视频小程序播放插件的更多相关文章
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...
- 微信小程序开发(一)创建一个小程序Hello World!
开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的<小程序开发指南>最详细. 下面是我开发小程序的历程: 第一步,请前往https://mp.weixin.qq.com/ ...
- 微信小程序开发入门教程(三)---小程序云开发支付功能
支付(shoukuan)功能真的很重要!由于我还没有商户号,以下代码未实际验证 1.服务端 进入云开发,新建云函数pay(应该也可以在开发者工具编写后上传) 编写后端代码index.js这里用到第三方 ...
- 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包
公司最近开发的一个微信语音红包,就是前些时间比较火的包你说红包小程序.如何提高识别的精准度呢. 在说精准度之前,先大概说下整个语音识别的开发流程.前面我有文章已经说到过了.具体我就不谈了.一笔带过. ...
- 微信小程序开发(二)创建一个小程序页面
为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示). 接下来我 ...
- 微信小程序开发中遇到的几个小问题
本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src="{{item.img}}" ...
- 《使用wxWidgets进行跨平台程序开发》chap02——一个简单的应用程序
// Name: minimal.cpp // Purpose: Minimal wxWidgets sample // Author: Julian Smart #include "wx/ ...
- 【纯·技术干货】更 App 化的小程序开发
2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,糗事百科前端负责人宋航在沙龙上做了<更App化的小程序开发&g ...
随机推荐
- 【Spring】Spring的定时任务注解@Scheduled原来如此简单
1 简介 定时任务的实现非常多,JDK的Timer.Spring提供的轻量级的Scheduled Task.QuartZ和Linux Cron等,还有一些分布式的任务调度框架.本文主要介绍Schedu ...
- mysql初级了解
mysql是一个关系型数据库系统,可以存放若干个数据库,每个数据库中 可以存放若干张表,每张表中可以存放若干条记录 基本代码: 1.查看数据库 show databases: 2.创建数据库 ...
- 管理系统和服务systemctl(centos6:chkconfig、service命令)
传统:SysV init 红帽6.Ubuntu6:采用Upstart 红帽7:采用全新的Systemd SysV init运行级别,主题思想是串行的启动所有将来需要用到的服务(所以计算机没有利用多CP ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 3.2 路由和HTTP方法
ASP.NET Core 3.x 的路由 路由机制会把一个请求的URI映射到一个Controller上面的Action,所以当你发送一个HTTP请求的时候,MVC框架会解析这个请求的URI,并尝试着把 ...
- 用图解&&实例讲解php是如何实现websocket实时消息推送的
WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 以前的推送技术使用 Ajax 轮询,浏览器需要不断地向服务器发送http请求来获取最新的数据,浪费很多的带 ...
- 2019-9-20:渗透测试,基础学习,phpstudy搭建Wordpress,Burpsuite抓取WorePress cms的post包
一.搭建WordPress的cms网站管理系统 1,下载Wordpress cms源码,下载地址:https://wordpress.org/download/ 2,将源码解压到phpstudy目录下 ...
- Matlab生成Word--xdd
摘自<MATLAB统计分析与应用:40个案例分析>(谢中华老师著)P452页function CreatWord %利用Matlab生成word filespec_user = [pwd ...
- win10 下安装zookeeper+Kafka 的详细步骤(2)
Win10 下要使用Kafka需要经过以下三个步骤: 1.安装JDK(需要安装依赖java JDK) 2.安装zookeeper(资源协调,分配管理) 3.使用Kafka开发 ============ ...
- 是谁,在敲打我窗-CSS雨滴动画效果
1.扯闲篇 是谁在敲打我窗 是谁在撩动琴弦 那一段被遗忘的时光 渐渐地回升出我心坎 是谁在敲打我窗 是谁在撩动琴弦 记忆中那欢乐的情景 慢慢地浮现在我的脑海 那缓缓飘落的小雨 不停地打在我 ...
- Django-settings可插拔实现
Setting可插拔 django暴露了一个可以给用户自定义配置的文件,优先使用用户配置的信息,而且必须要大写才有效 文件目录 --about_settings --default --conf -- ...