微信小程式：微信小程式外掛使用
小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。
前不久的一個微信小程式專案中，需要使用到視訊播放的功能。
首先想到的是使用小程式的video元件，但看完文件興高采烈地在編輯器裡面敲好了<video src=""></video>，開啟騰訊視訊，打算找src的時候發現是我把事情想簡單了，騰訊視訊的地址並沒有那麼容易拿到。
網上看到有各種破解之法，最後發現騰訊視訊開放了小程式外掛，只要用視訊的vid就可以播放騰訊視訊了。這裡把使用騰訊視訊的過程記錄下來，順便學習一下外掛的使用。
第一步，在小程式後臺新增外掛
登入小程式後臺，選擇設定->第三方設定->新增外掛，在彈出的搜尋框中輸入，需要用到的外掛，勾選外掛並點選新增。
image.png
成功新增外掛後，我們需要拿到外掛的AppId，專案中使用外掛的時候會使用到，如下圖，點選詳情,
image.png
在外掛詳情中就能看到AppId 和 版本號列表
image.png
第二步，配置app.json
在 app.json 中新增如下程式碼
"plugins": { "tencentVideo": { "version": "1.2.4", // 這裡填寫要使用的版本號 "provider": "wxa75efa648b60994b" // 這裡填寫的就是剛剛的AppId } }
第三步，配置頁面的 .json 檔案
{
"usingComponents": {
"txv-video": "plugin://tencentVideo/video"
}
}
第四步，將元件用到頁面的 .wxml 檔案
<txv-video vid="s0029nzmmnd" playerid="wgs_player"></txv-video>
這裡的vid可以在騰訊視訊後臺獲取或者，在視訊的web頁面，選擇
分享，點選複製通用程式碼,在通用程式碼裡面就能得到這個欄位。
第五步，修改頁面的 .wxss 檔案
txv-video {
width:750rpx;
height:auto;
}
執行一下，應該能看到一個帶5秒廣告的騰訊視訊，哈哈
最後要補充的
上面只是一個使用騰訊視訊外掛的demo,在實際使用過程中，視訊的vid一般是通過api請求而來，於是我們可能會這麼寫
<txv-video vid="{{vid}}" playerid="wgs_player"></txv-video>
這麼做的話，我們會得到如下報錯資訊
image.png
是不是很失望，不過到這裡離成功還差一步，在社群裡面看到的解決方案是：
<txv-video wx:if="{{vid}}" vid="{{vid}}" playerid="wgs_player"></txv-video>
我想，這應該算是外掛的一個bug，外掛在載入的時候，api的結果一般都還沒有回到，這時候外掛認為你傳入了一個非法的vid,直接報錯，當你再往裡面填充正確的vid時它已經不管了。
好了，今天的分享就到這裡，如果對你有幫助的話，順手點個贊吧
更多知識參見：
微信小程式官方文件：外掛
作者：1lin24
連結：https://www.jianshu.com/p/22a8c22b3320
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
