小程序弹幕组件，覆盖在 原生组件上时，请确保组件已经同层化。参考用例。弹幕组件的实现采用了 canvas & dom 两种方式，通过 rendering-mode 属性进行指定。dom 的方式兼容性高，当对小程序基础库低版本( v2.9.2 以下）有要求时，可以采用这种渲染方式。canvas 的方式通常性能更好，动画更为流畅，但仅在基础库 v2.9.2 版本及以上可以使用。
注意事项：在开发者工具上，canvas 的渲染方式无法使用 view 等普通组件覆盖在弹幕上方，需采用 cover-view。真机上可以使用普通的 view 覆盖在弹幕上。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| z-index | number | 10 | 否 | 弹幕的层级 |
| rendering-mode | string | canvas | 否 | 渲染模式 |
- npm 安装，参考 小程序 npm 支持
npm install --save miniprogram-barrage
- JSON 组件声明
{
"usingComponents": {
"barrage": "miniprogram-barrage",
}
}
- wxml 引入弹幕组件
<video class="video" src="{{src}}">
<barrage class="barrage" rendering-mode="canvas" z-index="100"></barrage>
</video>- js 获取实例
Page({
onReady() {
this.addBarrage()
},
addBarrage() {
const barrageComp = this.selectComponent('.barrage')
this.barrage = barrageComp.getBarrageInstance({
font: 'bold 16px sans-serif',
duration: this.data.duration,
lineHeight: 2,
mode: 'separate',
padding: [10, 0, 10, 0],
range: [0, 1]
})
this.barrage.open()
this.barrage.addData(data)
}
}){
duration: 15, // 弹幕动画时长 (移动 2000px 所需时长)
lineHeight: 1.2, // 弹幕行高
padding: [0, 0, 0, 0], // 弹幕区四周留白
alpha: 1, // 全局透明度
font: '10px sans-serif', // 字体大小
mode: 'separate', // 弹幕重叠 overlap 不重叠 separate
range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布，
tunnelShow: false, // 显示轨道线
tunnelMaxNum: 30, // 隧道最大缓冲长度
maxLength: 30, // 弹幕最大字节长度，汉字算双字节
safeGap: 4, // 发送时的安全间隔
}{
color: '#000000', // 默认黑色
content: '', // 弹幕内容
image: {
head: {src, width, height, gap = 4}, // 弹幕头部添加图片
tail: {src, width, height, gap = 4}, // 弹幕尾部添加图片
}
}barrage.open() // 开启弹幕功能
barrage.close() // 关闭弹幕功能，清空弹幕
barrage.addData(data: array) // 添加弹幕数据
barrage.send(data: object) // 发送一条弹幕数据
barrage.setRange(range: array) // 设置垂直方向显示范围，默认 [0, 1]
barrage.setFont(font: string) // 设置全局字体，注 canvas 的渲染方式仅可设置大小，不支持字体设置
barrage.setAlpha(alpha: number) // 设置全局透明度, alpha 0 ~ 1, 值越小，越透明
barrage.showTunnel() // 显示弹幕轨道
barrage.hideTunnel() // 隐藏弹幕轨道