uni-app微信小程序开发之引入腾讯视频小程序播放插件
<h2>登录微信小程序管理后台添加腾讯视频播放插件：</h2><p> 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件，如下图所示：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191215234558421-1520011578.png" alt="" width="1183" height="704"></p>
<h2> 在uni-app中引入插件代码：</h2>
<p> 注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的，因为uni-app可开发多平台的原因，因此不同平台的开发相应的配置需要放到指定的位置才能够生效。而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用（小程序中所有的分包可以使用），第二种是指定对应的分包可使用。</p>
<h3>指定整个小程序可使用：</h3>
<p>使用插件之前需要在manifest.json中的mp-weixin内声明使用的插件，具体配置参照所用插件的开发文档：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"mp-weixin": {
/* 小程序相关配置 */
"usingComponents": true,//是否启用自定义组件模式
"appid": "小程序AppID",
"plugins": {
"tencentvideo": {
"version": "1.3.6",
"provider": "腾讯视频小程序AppID"
}
}
}
</pre>
</div>
<h3>指定到对应的分包中使用：</h3>
<p>如果插件只在（同一个插件不能被多个分包同时引用）一个分包用到，可以单独配置到分包中，这样插件不会随主包加载，可以在<code>pages.json</code>的subPackages中声明插件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"subpackages": [
{
"root": "package1",//分包名称
"pages": [
"pages/cat",
"pages/dog"
],
"plugins": {
"tencentvideo": {
"version": "1.3.6",
"provider": "腾讯视频小程序AppID"
}
}
}
]
} </pre>
</div>
<h2>在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码： </h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"usingComponents": {
// #ifdefMP-WEIXIN
"txv-video": "plugin://tencentvideo/video"
// #endif
},
</pre>
</div>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191216002629828-2007943876.png" alt=""></p>
<h2> 在.vue页面中使用腾讯视频播放组件：</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><view>
<!--vid中的腾讯视频id最好为动态的数据，方便管理-->
<txv-video :vid="VideoId" playerid="txv1"></txv-video>
</view>
<script>
export default {
data() {
return {
VideoId:'c3029q7tdnp'
};
}
}
</script> </pre>
</div>
<h2>关于如何获取腾讯视频vid问题：</h2>
<p>打开网页腾讯视频=>随便找到一个视频点击鼠标右键=>赋值链接地址（仅供参考）如下图所示：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191216003947514-2095264152.png" alt="" width="1240" height="702"></p>
<p> </p>
<p> 最后取视频连接地址.html前面的那一小串英文数字编号即可，下图所示：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191216004127465-2006307444.png" alt=""></p>
<h2> 参考资料：</h2>
<h3>腾讯视频小程序播放插件开发文档：</h3>
<p>https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=&lang=zh_CN</p>
<h3>decloud uni-app相关配置：</h3>
<p>https://uniapp.dcloud.io/component/mp-weixin-plugin</p>
<h3>微信小程序特有配置:</h3>
<p>https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin</p>
</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【♥推荐♥】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/12046831.html
頁:
[1]