• Barrage for MiniProgram
    • 效果示例
    • 使用方法
    • 配置
      • Barrage 默认配置
      • 弹幕数据配置
    • 接口
    • 说明

    Barrage for MiniProgram

    小程序弹幕组件。通过 view 的 transform 移动弹幕，覆盖在 原生组件上时，请确保组件已经同层化。参考用例

    效果示例

    alt barrage

    使用方法

    • npm 安装，参考 小程序 npm 支持
    1. npm install --save miniprogram-barrage
    • JSON 组件声明
    1. {
    2.   "usingComponents": {
    3.     "barrage": "miniprogram-barrage",
    4.   }
    5. }
    • wxml 引入弹幕组件
    1. <video class="video" src="{{src}}">
    2.   <barrage class="barrage"></barrage>
    3. </video>
    • js 获取实例
    1.  Page({
    2.   onReady() {
    3.     this.addBarrage()
    4.   },
    5.   addBarrage() {
    6.     const barrageComp = this.selectComponent('.barrage')
    7.     this.barrage = barrageComp.getBarrageInstance({
    8.       font: 'bold 16px sans-serif',
    9.       duration: 10,
    10.       lineHeight: 2,
    11.       mode: 'separate',
    12.       padding: [10, 0, 10, 0],
    13.       tunnelShow: false
    14.     })
    15.     this.barrage.open()
    16.     this.barrage.addData(data)
    17.   }
    18.  })

    配置

    Barrage 默认配置

    1. {
    2.   duration: 10, // 弹幕动画时长 (移动 2000px 所需时长)
    3.   lineHeight: 1.2, // 弹幕行高
    4.   padding: [0, 0, 0, 0], // 弹幕区四周留白
    5.   alpha: 1, // 全局透明度
    6.   font: '10px sans-serif', // 全局字体
    7.   mode: 'separate', // 弹幕重叠 overlap  不重叠 separate
    8.   range: [0, 1], // 弹幕显示的垂直范围，支持两个值。[0,1]表示弹幕整个随机分布，
    9.   tunnelShow: false, // 显示轨道线
    10.   tunnelMaxNum: 30, // 隧道最大缓冲长度
    11.   maxLength: 30, // 弹幕最大字节长度，汉字算双字节
    12.   safeGap: 4, // 发送时的安全间隔
    13.   enableTap: false, // 点击弹幕停止动画高亮显示
    14. }

    弹幕数据配置

    1. {
    2.   color: '#000000', // 默认黑色
    3.   content: '', // 弹幕内容
    4.   image: {
    5.     head: {src, width, height}, // 弹幕头部添加图片
    6.     tail: {src, width, height}, // 弹幕尾部添加图片
    7.     gap: 4 // 图片与文本间隔
    8.   }
    10. }

    接口

    1. barrage.open() // 开启弹幕功能
    2. barrage.close() // 关闭弹幕功能，清空弹幕
    3. barrage.addData() // 添加弹幕数据
    4. barrage.setRange() // 设置垂直方向显示范围
    5. barrage.setFont() // 设置全局字体
    6. barrage.setAlpha() // 设置全局透明度
    7. barrage.showTunnel() // 显示弹幕轨道
    8. barrage.hideTunnel() // 隐藏弹幕轨道

    说明

    • 通过 canvas 实现弹幕组件时，对于低版本基础库由于缺失 raf 接口，动画效果不够流畅。
    • 2.9.0 起小程序新的 canvas 接口可替代 view 的实现，参考片段