正式開始使用騰訊視頻小程序插件以前需先在微信公衆平臺 -> 第三方設置 -> 插件管理處添加插件,以下圖所示:javascript
注意在使用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.json
的subPackages中聲明插件:java
{ "subpackages": [ { "root": "package1",//分包名稱 "pages": [ "pages/cat", "pages/dog" ], "plugins": { "tencentvideo": { "version": "1.3.6", "provider": "騰訊視頻小程序AppID" } } } ] }
"usingComponents": { // #ifdef MP-WEIXIN "txv-video": "plugin://tencentvideo/video" // #endif },
<view> <!--vid中的騰訊視頻id最好爲動態的數據,方便管理--> <txv-video :vid="VideoId" playerid="txv1"></txv-video> </view> <script> export default { data() { return { VideoId:'c3029q7tdnp' }; } } </script>
打開網頁騰訊視頻=>隨便找到一個視頻點擊鼠標右鍵=>賦值連接地址(僅供參考)以下圖所示:json
最後取視頻鏈接地址.html前面的那一小串英文數字編號便可,下圖所示:小程序
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&token=&lang=zh_CN微信小程序
https://uniapp.dcloud.io/component/mp-weixin-plugin微信
https://uniapp.dcloud.io/collocation/manifest?id=mp-weixinapp