教你用正确的姿势在小程序中引入腾讯视频插件

姿势来源

最近自己正在搭建自己的个人公众号和小程序，公众号主要嵌入了图灵机器人，来提供一些职能聊天和生活服务，主要是给自己的朋友和家人使用，因为调用第三方服务要钱，调用次数有限制(对没错，我在为穷酸打掩护)。以及在csnd中反响不错的文章。其次，小程序我暂时的想法是这样的：第一，因为平时我和家人沟通得其实并不多，主要是在微信群中发一下聊天，斗斗图，偶尔调皮地以下犯上。但是最近维数不多的与他们的沟通当中，无意中听出家人们内心的孤独，他们也想我们多陪陪他们，但是更理解我们的不容易，做小程序其中之一的原因是为了拉近距离，提升亲切感；第二，最近我一直在看书，一看就是一系列，我知道不少同学也有再看，但是身边有看书习惯的同学的比例还是相对较少的，不过其中也有不少愿意在读书方面花时间的人，于是我也想把自己看过的书都放到小程序上，想看的同事可以联系客服借过去看(没错客服就是我自己)；第三，在家里的微信群当中，我的家人，可不仅仅是斗图大师，他们还是小年糕小程序热衷粉，基于这样一个现象，我也想做个视频列表，让他们开心开心，同时也慰藉一下我虚荣的成就感。

姿势准备

前面我有一篇关于视频列表的文章，这次的功能也是基于这个列表进行的开发。先上一期的效果图：

     

大概就是这个样子，视频中播放的是广告，是因为腾讯插件免除广告的的是需要收费的，新用户有一个月的免广告试用期。大家可以谅解一下，毕竟人家是要吃饭的，收费也是不可避免的，不要吐槽就可以。

步骤1：在app.json中引入插件

首先我们需要现在小程序微信后台引入这个插件，操作方式如下：

操作路径：设置 --- 第三方服务 --- 插件管理 ---添加插件  --- 腾讯视频 ，接着在我们的小程序项目的引入改组件，如下图：

上图中provider后面的字符串是官方插件的appid，放进来就可以。

步骤2：建立一个页面，来调用这个插件。

注意上图中我用绿色框圈出来的部分，这里的字符串的值一定要和app.json引入路径保持一致，顺便说一下注意大小写，否则会出现下面的错误，比如我们先故意写错一个单词，把大写的V改成小写：

好这些都是细节问题，大家注意一下就好了。

步骤3：在xml中使用插件

这里有两个参数需要注意一下，一个是vid，另一个是playerid。vid是是什么玩意，它就是一个代表视频文件的一串唯一标识，我们在看腾讯视频时，这个vid会出现在地址栏当中，如图：

好了，还有个叫playerid，这个东西其实我也不知道是啥，我写死这个值，哈哈，有兴趣的可以去了解一下。这里有个坑提醒一下大家，就是vid一定需要先有值才会加载，所以我这里用了个wx.show条件判断，如果vid是空的会报这样的错。

这里提个醒，这里的vid最好是动态加载的，由后端接口提供就最好了，没有提供没关系，我们找到我们对应的视频，写死这些vid就行了。

敲黑板：别看以上内容说得天花乱坠的，但是微信小程序团队对个人类型的小程序做了限制，也就是说我们使用的这个第三方插件在个人小程序中是没办法发使用的，节哀！

结语

以上就是引入的步骤和过程中可能出现的问题以及解决办法。这个是简单的第三方插件引用的方法，其实还可以通过引用插件，直接用video标签通过src直接硬上。不过这个src处理起来还是有点复杂的，因为要通过接口先去查vid，然后对得到的数据进行解析，最终拼出一个正确的url地址，我个人也去尝试了一遍，还是相对复杂一点的，查出来的大家有兴趣也可以去尝试一下。

https://blog.csdn.net/sd19871122/article/details/80431565

这是不使用第三方插件

另外官方还提供了插件 js api大家可以自己去了解一下，我把参考的文档和相关官方链接都贴出来，为大家提供方便

https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b

https://developers.weixin.qq.com/community/develop/doc/0006823b3204681d28277dacd51004