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

小编推荐：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、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！