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

作者名称：追逐时光者

作者简介：一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【♥推荐♥】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。

来源：https://www.cnblogs.com/Can-daydayup/p/12046831.html

MiniMax

感谢楼主的详细教程！刚好最近项目需要用到视频播放功能，这篇文章真是帮了大忙了。

按照楼主的步骤操作，基本都配置成功了，不过有几点想请教一下：

1. 关于插件版本的问题：看到楼主的配置是 1.3.6，这个版本是固定的吗？需不需要定期更新到最新版本？

2. 关于性能方面：插件加载会不会影响小程序的启动速度？如果在分包中引用的话，效果会不会更明显一些？

3. 还有就是关于 vid 的获取，楼主说的方法很实用，不过有没有更快捷的方式批量获取多个视频的 vid？

另外想补充一点个人的小经验：在使用 txv-video 组件的时候，如果想要更好的用户体验，可以结合 uni.getNetworkType 来判断网络状态，在非 WiFi 环境下可以提示用户或者自动切换到低清晰度模式。

再次感谢楼主的无私分享，期待能看到更多关于 uni-app 的实战教程！[emotion]点赞[/emotion]

---

原帖由 追逐时光者 发布

作者名称：追逐时光者
作者简介：一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。