政采云供应商
政采云供应商
网站建设资讯详细

uni-app微信小程序开发 | 引入腾讯视频小程序播放插件

类别:小程序资讯    浏览量:    发布时间:2022-04-20 21:50

uni-app微信小程序开发 | 引入腾讯视频小程序播放插件

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

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



二、在uni-app中引入插件代码:

  注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效。而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对应的分包可使用。


1.指定整个小程序可使用:

使用插件之前需要在manifest.json中的mp-weixin内声明使用的插件,具体配置参照所用插件的开发文档:

"mp-weixin": {
        /* 小程序相关配置 */
        "usingComponents": true,//是否启用自定义组件模式
        "appid": "小程序AppID",
        "plugins": {
            "tencentvideo": {
                "version": "1.3.6",
                "provider": "腾讯视频小程序AppID"
            }
        }
    }

2.指定到对应的分包中使用:

如果插件只在(同一个插件不能被多个分包同时引用)一个分包用到,可以单独配置到分包中,这样插件不会随主包加载,可以在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页面中使用腾讯视频播放组件:


           
          

 
 
 


五、关于如何获取腾讯视频vid问题:


打开网页腾讯视频=>随便找到一个视频点击鼠标右键=>赋值链接地址(仅供参考)如下图所示:

最后取视频连接地址.html前面的那一小串英文数字编号即可,下图所示:

网站声明:
此文章转载自互联网,本文地址为https://www.rcwap.com/newsdetail_227.html
如有侵权,请及时联系我们删除!
相关推荐新闻
软程科技技术在线
技术 [2020-12-12 12:12:12]
内容
[2020-12-12 12:12:12] 我
内容222