zoukankan      html  css  js  c++  java
  • 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.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

  • 相关阅读:
    如何面试你的面试官
    给老婆的一篇文章
    机器学习:选对时机直线超车
    面试技巧:带走面试官的节奏
    微信红包的随机算法是怎样实现的?
    全栈技术导图
    AI时代:推荐引擎正在塑造人类
    冲顶大会APP技术选型及架构设计
    多域名解析及延伸知识点
    在编程中为所欲为[圣诞版]
  • 原文地址:https://www.cnblogs.com/Can-daydayup/p/12046831.html
Copyright © 2011-2022 走看看