live-barrage 直播间弹幕组件

效果图如下所示:

从效果图上我们还看到有几点重要信息:

• 历史弹幕上屏：为了活跃气氛，观众初次进入直播间可以观看前30条历史弹幕。
• 即时弹幕消息上屏：即时收到的弹幕消息从底部上屏，并实现自动滚动。
• 个人评论消息上屏：个人评论的消息“优先”上屏，不受即时消息堆积影响。
• 系统提示消息上屏：系统提示消息分两种，一种是固定提示，固定在弹幕列表头部，不会消失。另外一种是主播操作产生的临时提示，跟弹幕消息一起，超过数量限制时，就会被清理。

1 引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-live-barrage": "@retailwe/ui-live-barrage/index"
}

2 代码演示

2.1 基础用法

  <!-- 默认配置信息 -->
  <wr-live-barrage id="wr-live-barrage"></wr-live-barrage>
  <!-- 自定义配置信息 -->
  <wr-live-barrage id="wr-live-barrage" barrageHeight="600" config="{{DEFAULT_CONFIG}}" tagConfig="{{TAG_DEFAULT_CONFIG}}" systemHint="{{DEFAULT_SYSTEM_HINT}}"></wr-live-barrage>

import {
  BARRAGE_DATA,
  MY_BARRAGE_DATA,
  HISTORY_DATA,
  TAG_DEFAULT_CONFIG,
  DEFAULT_SYSTEM_HINT,
  DEFAULT_CONFIG,
} from './type';

Page({
  barrageContext: null,
  timer: null,
  index: 0,
  // 弹幕数据
  barrageData: BARRAGE_DATA,
  // 模拟我发送的评论数据
  myBarrageData: MY_BARRAGE_DATA,

  data: {
    TAG_DEFAULT_CONFIG,
    DEFAULT_SYSTEM_HINT,
    DEFAULT_CONFIG,
  },

  onReady() {
    // 20条历史弹幕数据上屏
    (this.getBarrageContext() as any).multiPushBarrage(HISTORY_DATA);
    if (!this.timer) {
      this.simulatedPushBarrage();
    }
  },
  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer as any);
      this.timer = null;
    }
  },
  // 模拟弹幕上屏
  simulatedPushBarrage() {
    (this.timer as any) = setTimeout(() => {
      (this.getBarrageContext() as any).sendBarrageEnterQueue([
        this.barrageData[this.index % 13],
      ]);
      this.index++;
      this.simulatedPushBarrage();
    }, (this.index % 4) * 200 + 800);
  },
  // 获取barrage组件实例
  getBarrageContext() {
    if (!this.barrageContext) {
      (this.barrageContext as any) = this.selectComponent('#wr-live-barrage');
    }
    return this.barrageContext;
  },

  // 自己发送评论
  handleSendBarrage() {
    (this.getBarrageContext() as any).sendBarrageBySelf(
      this.myBarrageData[this.index % 5],
    );
  },
});

3 API说明

3.1 Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | id | 用于父组件获取本组件实例，获取实例调用方法详见3.2 | String | - | - | | barrageHeight | 弹幕容器高度，可动态调节 | Number | 有 | - | | config | 弹幕配置信息，具体可配置参数详见3.3 | Object | 有 | - | | tagConfig | 标签配置信息，具体可配置参数详见3.4 | Array | 有 | - | | systemHint | 系统提示信息，长期存在于弹幕列表头部 | String | 有 | - |

3.2 实例可调用方法

| API | 说明 | 参数 | 默认值 | |-----------|-----------|-----------| -----------| | multiPushBarrage | 初始化直播间时，填充数十条历史弹幕数据，组件已经优化，实现分布式上屏 | queueI[] | - | | sendBarrageEnterQueue | 将接收到的弹幕消息放入弹幕池, 第二个参数表示是否执行弹幕过滤规则 | <queueI[], Boolean> | <-, true> | | sendBarrageBySelf | 自己发送的弹幕消息直接上屏 | queueI | - |

queueI类型说明：

interface queueI {
  name?: string; // 用户昵称
  comment?: string; // 评论内容
  isMe?: boolean; // 是否自己发送的弹幕
  tagIndex?: number; // 标签索引，可自定义，默认情况 0-主播，1-号主，2-粉丝
  systemInfo?: string; // 系统提示消息，如果存在这个属性，则前面四个属性无需存在
}

其中，name、comment为普通评论消息的必须属性，systemInfo为系统消息的必须属性，两者互斥。

示例数据如下：

  {
    name: 'rileycai',
    comment: '这是我的一条评论信息',
    isMe: true,
  },
  {
    name: '楚楚baby',
    comment: '大家晚上好',
    tagIndex: 0,
  },
  {
    systemInfo: '系统提示: 当前处于公开弹幕模式，您的弹幕在其它直播间可见。',
  },

3.3 弹幕配置信息

弹幕默认配置信息如下，如果需要调整配置，可以通过 config属性更改配置信息。

const DEFAULT_CONFIG = {
  INTERVAL: 300, // 刷新频率，默认300ms
  BARRAGE_MAX_COUNT: 50, // 上屏弹幕的最大数量
  POOL_MAX_COUNT: 50, // 弹幕池（未上屏）弹幕上限
  BARRAGE_MAX_FRAME: 6, // 每次最多拉多少弹幕
  SLEEP_TIME: 5000, // 休眠时间，默认5000ms
  CHECK_SLEEP: true, // 检查是否休眠，休眠超过 SLEEP_TIME ，则开启自动滚动
};

比如，需要取消弹幕休眠的功能，那么将执行如下操作

// 自定义配置信息,会覆盖默认配置信息
const CUSTOM_CONFIG = {
  CHECK_SLEEP: false, // 检查是否休眠，休眠超过 SLEEP_TIME ，则开启自动滚动
};

  <!-- 自定义配置信息 -->
  <wr-live-barrage id="wr-live-barrage" config="{{CUSTOM_CONFIG}}"></wr-live-barrage>

3.4 标签配置信息

标签默认配置信息如下，如果需要调整配置，可以通过 tagConfig属性更改配置信息。

const TAG_DEFAULT_CONFIG = [
  {
    bgColor: 'linear-gradient(to right, #fb3e3e, #ff834a)',
    tagName: '主播',
  },
  {
    bgColor: 'linear-gradient(to top, #ffb365, #ff8c17)',
    tagName: '号主',
  },
  {
    bgColor: 'linear-gradient(to left, #8bb1ff, #5195ff)',
    tagName: '粉丝',
  },
];

其中，TAG_DEFAULT_CONFIG数组的索引与弹幕数据queueI的tagIndex属性一一对应，默认情况 0-主播，1-号主，2-粉丝。

如果修改标签配置信息，那么tagIndex属性值的对应关系也要重新梳理。