uni-app微信小程序開發之引入騰訊視頻小程序播放插件

登陸微信小程序管理後臺添加騰訊視頻播放插件:

  正式開始使用騰訊視頻小程序插件以前需先在微信公衆平臺 -> 第三方設置 -> 插件管理處添加插件,以下圖所示:javascript

 在uni-app中引入插件代碼:

  注意在使用uni-app開發微信小程序時與直接會用微信網頁開發工具開發微信小程序是有很大的差異的,由於uni-app可開發多平臺的緣由,所以不一樣平臺的開發相應的配置須要放到指定的位置纔可以生效。而uni-app引入騰訊視頻小程序有兩種方式一種是整個小程序可以使用(小程序中全部的分包可使用),第二種是指定對應的分包可以使用。html

指定整個小程序可以使用:

使用插件以前須要在manifest.json中的mp-weixin內聲明使用的插件,具體配置參照所用插件的開發文檔:vue

"mp-weixin": {
		/* 小程序相關配置 */
		"usingComponents": true,//是否啓用自定義組件模式
		"appid": "小程序AppID",
		"plugins": {
			"tencentvideo": {
				"version": "1.3.6",
				"provider": "騰訊視頻小程序AppID"
			}
		}
	}

指定到對應的分包中使用:

若是插件只在(同一個插件不能被多個分包同時引用)一個分包用到,能夠單獨配置到分包中,這樣插件不會隨主包加載,能夠在pages.jsonsubPackages中聲明插件:java

{
  "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問題:

打開網頁騰訊視頻=>隨便找到一個視頻點擊鼠標右鍵=>賦值連接地址(僅供參考)以下圖所示:json

 

 最後取視頻鏈接地址.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-weixinapp

相關文章
相關標籤/搜索