npm package: @retailwe/ui-live-barrage
Description: 效果图如下所示: ![](https://cdn.qs.qq.com/mp/example/barrage-example5.gif)
Latest version: 0.0.4

# live-barrage 直播间弹幕组件

效果图如下所示:
![](https://cdn.qs.qq.com/mp/example/barrage-example5.gif)

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

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

## 1 引入

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

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

## 2 代码演示

### 2.1 基础用法

```html
  <!-- 默认配置信息 -->
  <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>
```

```js
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`类型说明：

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

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

示例数据如下：

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

### 3.3 弹幕配置信息

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

```js
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 ，则开启自动滚动
};
```

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

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

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

### 3.4 标签配置信息

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

```js
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`属性值的对应关系也要重新梳理。