微信小程序：微信小程序插件使用

╰+哭是因爲堅強的太久メ 2022-04-10 06:47 609阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

前不久的一个微信小程序项目中，需要使用到视频播放的功能。

首先想到的是使用小程序的`video`组件，但看完文档兴高采烈地在编辑器里面敲好了`<video src=""></video>`，打开腾讯视频，打算找src的时候发现是我把事情想简单了，腾讯视频的地址并没有那么容易拿到。  
网上看到有各种破解之法，最后发现腾讯视频开放了小程序插件，只要用视频的`vid`就可以播放腾讯视频了。这里把使用腾讯视频的过程记录下来，顺便学习一下插件的使用。

### 第一步，在小程序后台添加插件 ###

登录小程序后台，选择`设置->第三方设置->添加插件`，在弹出的搜索框中输入，需要用到的插件，勾选插件并点击`添加`。

![Image 1][]

image.png

成功添加插件后，我们需要拿到插件的AppId，项目中使用插件的时候会使用到，如下图，点击`详情`,

![Image 1][]

image.png

在插件详情中就能看到AppId 和 版本号列表

![Image 1][]

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 1][]

image.png

是不是很失望，不过到这里离成功还差一步，在社区里面看到的解决方案是：

<txv-video wx:if="{
       {vid}}" vid="{
       {vid}}" playerid="wgs_player"></txv-video>

我想，这应该算是插件的一个bug，插件在加载的时候，api的结果一般都还没有回到，这时候插件认为你传入了一个非法的`vid`,直接报错，当你再往里面填充正确的`vid`时它已经不管了。

好了，今天的分享就到这里，如果对你有帮助的话，顺手点个赞吧

更多知识参见：  
[微信小程序官方文档：插件][Link 1]

作者：1lin24  
链接：https://www.jianshu.com/p/22a8c22b3320

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html
[2018121912254161]: /images/20220402/19921ae7319945679c04d4034985ba15.png