登录微信小程序管理后台添加腾讯视频播放插件
在uni-app中引入插件代码
在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码
在.vue页面中使用腾讯视频播放组件
关于如何获取腾讯视频vid问题
(一)、登录微信小程序管理后台添加腾讯视频播放插件:
正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:
1. 进入小程序
2. 进入左边的设置中
3. 点击第三方设置----(下拉)---插件管理(添加:腾讯视频)
这个就是对应的腾讯视频插件的开发文档地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxa75efa648b60994b
(二)、 在uni-app中引入插件代码:
注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效。而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对应的分包可使用。
(三)、指定整个小程序可使用:
使用插件之前需要在manifest.json中的mp-weixin内声明使用的插件,具体配置参照所用插件的开发文档:
{
"subpackages": [
{
"root": "package1",//分包名称
"pages": [
"pages/cat",
"pages/dog"
],
"plugins": {
"tencentvideo": {
"version": "1.3.6", //这个地方一定要写最新的插件版本
"provider": "腾讯视频小程序AppID"
}
}
}
]
}
(四)、在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码:
,{"path": "pages/show/show","style": {"navigationStyle": "custom","navigationBarTitleText": "详细内容",
"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>
(六)、 参考资料:
腾讯视频小程序播放插件开发文档:
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