0.0.4 • Published 4 years ago
@retailwe/ui-live-barrage v0.0.4
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
属性值的对应关系也要重新梳理。