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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM