登录微信小程序管理后台添加腾讯视频播放插件:

  正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:

在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.jsonsubPackages中声明插件:

{
"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微信小程序开发之引入腾讯视频小程序播放插件的更多相关文章

  1. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  2. 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...

  3. 微信小程序开发(一)创建一个小程序Hello World!

    开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的<小程序开发指南>最详细. 下面是我开发小程序的历程: 第一步,请前往https://mp.weixin.qq.com/ ...

  4. 微信小程序开发入门教程(三)---小程序云开发支付功能

    支付(shoukuan)功能真的很重要!由于我还没有商户号,以下代码未实际验证 1.服务端 进入云开发,新建云函数pay(应该也可以在开发者工具编写后上传) 编写后端代码index.js这里用到第三方 ...

  5. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包

    公司最近开发的一个微信语音红包,就是前些时间比较火的包你说红包小程序.如何提高识别的精准度呢. 在说精准度之前,先大概说下整个语音识别的开发流程.前面我有文章已经说到过了.具体我就不谈了.一笔带过. ...

  6. 微信小程序开发(二)创建一个小程序页面

    为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示). 接下来我 ...

  7. 微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src="{{item.img}}" ...

  8. 《使用wxWidgets进行跨平台程序开发》chap02——一个简单的应用程序

    // Name: minimal.cpp // Purpose: Minimal wxWidgets sample // Author: Julian Smart #include "wx/ ...

  9. 【纯·技术干货】更 App 化的小程序开发

    2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,糗事百科前端负责人宋航在沙龙上做了<更App化的小程序开发&g ...

随机推荐

  1. java里的一些名词的意思

    JDK   java开发工具包(java development kit) JRE  java运行环境 (java runtime environment)

  2. 一.web服务机制

    web服务机制 我们先跟着**(Web服务器工作原理总体描述01)这张图,将一次Web服务的工作流程过一遍,我们假设以浏览器作为客户端(1) 用户做出了一个操作,可以是填写网址敲回车,可以是点击链接, ...

  3. 力扣(LeetCode)删除排序链表中的重复元素II 个人题解

    给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 思路和上一题类似(参考 力扣(LeetCode)删除排序链表中的重复元素 个人题解)) 只不过这里需要用到一个前 ...

  4. 关于PHP中依赖注入的详细介绍

    依赖注入原理: 依赖注入是一种允许我们从硬编码的依赖中解耦出来,从而在运行时或者编译时能够修改的软件设计模式.简而言之就是可以让我们在类的方法中更加方便的调用与之关联的类. 实例讲解: 假设有一个这样 ...

  5. Deep attention tracking via Reciprocative Learning

    文章:Deep attention tracking via Reciprocative Learning 出自NIPS2018 文章链接:https://arxiv.org/pdf/1810.038 ...

  6. 【集训Day3 单调队列】【2018寒假集训Day 5更新】最大子序列和

    最大子序列和(maxsum) [问题描述] 输入一个长度为n的整数序列(A1,A2,……,An),从中找出一段连续的长度不超过M的子序列,使得这个序列的和最大. 例如: 序列 1, -3, 5, 1, ...

  7. csrf与xss

    CSRF攻击攻击原理及过程如下: 1. 用户C打开浏览器,访问受信任网站A,输入用户名和密码请求登录网站A:       2.在用户信息通过验证后,网站A产生Cookie信息并返回给浏览器,此时用户登 ...

  8. nginx的使用,以及反向代理,负载均衡,从安装到使用,全部步骤。

    先总结nginx实现负载均衡的原理,在这之前先的知道反向代理,因为nginx的负载均衡是在反向代理的基础上实现的: 1.反向代理:通过在nginx的配置文件 (vim /opt/nginx196/co ...

  9. Linux目录结构-上部

    第1章 目录结构 1.1 目录结构特点 倒挂的树状结构一切从根开始一切皆文件 1.2 目录结构 /bin            二进制文件  命令 /sbin           超级命令只有root ...

  10. maven本地仓库路径和修改

    1.本地仓库,顾名思义,就是Maven在本地存储构件的地方. 注:maven的本地仓库,在安装maven后并不会创建,它是在第一次执行maven命令的时候才被创建 maven本地仓库的默认位置:无论是 ...