使用uni-app開始小程序使用騰訊視頻插件vid播放視頻

2020/12/27 21:57:47 字體: 瀏覽 4331

登錄微信小程序管理后臺添加騰訊視頻播放插件
在uni-app中引入插件代碼
在pages.json全局配置文件中對要使用插件的頁面配置如下條件編譯代碼  
在.vue頁面中使用騰訊視頻播放組件
關于如何獲取騰訊視頻vid問題



(一)、登錄微信小程序管理后臺添加騰訊視頻播放插件:
正式開始使用騰訊視頻小程序插件之前需先在微信公眾平臺 -> 第三方設置 -> 插件管理處添加插件,如下圖所示:
1. 進入小程序
2. 進入左邊的設置中
3. 點擊第三方設置----(下拉)---插件管理(添加:騰訊視頻)
這個就是對應的騰訊視頻插件的開發文檔地址:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxa75efa648b60994b

(二)、 在uni-app中引入插件代碼:
注意在使用uni-app開發微信小程序時與直接會用微信網頁開發工具開發微信小程序是有很大的差別的,因為uni-app可開發多平臺的原因,因此不同平臺的開發相應的配置需要放到指定的位置才能夠生效。而uni-app引入騰訊視頻小程序有兩種方式一種是整個小程序可使用(小程序中所有的分包可以使用),第二種是指定對應的分包可使用。

(三)、指定整個小程序可使用:
使用插件之前需要在manifest.json中的mp-weixin內聲明使用的插件,具體配置參照所用插件的開發文檔:

{
  "subpackages": [
    {
      "root": "package1",//分包名稱
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "plugins": {
        "tencentvideo": {
          "version": "1.3.6", //這個地方一定要寫最新的插件版本
          "provider": "騰訊視頻小程序AppID"
        }
      }
    }
  ]
}  

(四)、在pages.json全局配置文件中對要使用插件的頁面配置如下條件編譯代碼: 
,{"path": "pages/show/show","style": {"navigationStyle": "custom","navigationBarTitleText": "詳細內容",

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

(六)、 參考資料:
騰訊視頻小程序播放插件開發文檔:
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

相關閱讀
uni-app實現上拉加載,下拉刷新(下拉帶動畫)
名揚石化設備
表格增加
一個利用select下拉選擇框進行變色的網頁效果
javascri獲取頁面實際高度
控制背景色
旅行社手機網站模板7
如何加快網站訪問速度
共有0條關于《使用uni-app開始小程序使用騰訊視頻插件vid播放視頻》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
靜態網站利用微信URL Scheme生成的ticket從瀏覽器h5跳到微信小程序完整代碼
定制開發微信小程序的操作流程
微信小程序騰訊視頻播放組件tencentvideo(wxa75efa648b60994b)
微信小程序直播組件live-player-plugin(wx2b03c6e691cd7370)
使用uni-app開始小程序使用騰訊視頻插件vid播放視頻
更多>>最新添加文章
dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
抖音直播音掛載小雪花 懂車帝小程序
javascript獲取瀏覽器指紋可以用來做投票
火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
更多>>隨機抽取信息
定制開發微信小程序的操作流程
asp中最難發現的錯誤由最簡單的程序引起
iframe里阻止_blank彈出新窗口的方法
IE6在定義DIV最小高度時出現錯誤的解決方法
汽車交易網站
連云港華夏國際旅行社
91超碰caoporen国产香蕉|亚洲天堂在线免费|国产成人片在线观看|日本午夜免a费看大片中文|香蕉国产在线观看免费