1. 程式人生 > >uni-app微信小程式開發之引入騰訊視訊小程式播放外掛

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-we