需求:在kbone项目中引入腾讯视频小程序播放插件渲染视频
腾讯视频小程序播放插件介绍:github传送门
在代码中需要使用<txv-video>标签进行展示,如下所示:
// 在你们的wxml上这样插入视频元素
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>
但是kbone框架并不认识<txv-video>标签,因为不是他的内置标签名,直接使用编译完成后会发现被渲染成<view>标签,当然视频也没法正常显示。
这时需要借助kbone官方提供的方法:使用小程序自定义组件官方文档传送门,使用自定义组件可以让kbone无法识别的一些标签进行正确解析和渲染。
以kbone框架为例,正确引入步骤如下:
1.建立自定义组件目录
要在 kbone 中使用自定义组件,需要将所有自定义组件和其依赖放到一个固定的目录,这个目录可以自己拟定,假设这个目录为 src/custom-component:
然后建立要创建的自定义组件名文件夹,比如这次要使用的txv-video
2.修改webpack插件的配置
在miniprogrom.config.js中的 generate 字段内补充 wxCustomComponent
root 是组件根目录,即上面提到的目录:src/custom-component,
usingComponents 则用来配置要用到的自定义组件。
键为组件名(txv-video),值可以为组件相对 root 字段的路径,也可以是一个配置对象。
本例使用配置对象进行相应配置:
- path 为组件相对路径
- props 表示要这个组件会被用到的 properties(txv插件需要的两个必需属性vid、playerid)
- propsVal 表示对应属性的默认值(本例未用到)
- events 表示这个组件会被监听到的事件(本例未用到)
3.将自定义组件放入组件根目录
以txv-video组件为例
index.wxml文件:使用<txv-video>标签
注意:需要使用插值{{}}语法方式赋值,如果使用v-bind指令(或简写:)并不生效,使用该组件时无法正常获取到对应值
// index.wxml
<txv-video vid="{{vid}}" playerid="{{playerid}}"></txv-video>
index.js文件:声明所需的属性和方法,可以参考官方文档
// index.js
Component({
properties: {
vid: String,
playerid: String
},
});
index.json文件:非kbone要求,属于腾讯视频小程序播放插件要求,键值名必须按如下正确书写
// index.json
{
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}
}
4. 在app.json中引入txv-video插件
此步骤属于腾讯视频小程序插件要求配置,在kbone中打开miniprogrom.config.js文件,找到appExtraConfig字段(kbone中appExtraConfig字段对应小程序中的app.json配置)
添加如下代码:
plugins: {
tencentvideo: {
version: "1.5.2",
provider: "wxa75efa648b60994b"
}
}
5.使用自定义组件
如下图所示,不需要额外导入可以直接使用该组件。
可以看到<txv-video>标签成功渲染,视频也可以正常显示,如下图所示: