0.1.4 • Published 3 years ago
@retailwe/ui-live-welcome v0.1.4
live-welcome 直播间用户行为提示组件
用户行为提示组件,组件已内置队列处理逻辑,每2.2s执行一次动画,可以有效防止消息堆积问题。同时可以自定义配置信息,修改动画文案和背景。
引入
全局引入,在miniprogram根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"wr-live-welcome": "@retailwe/ui-live-welcome/index"
}
代码演示
基础用法
<!-- 默认配置信息 -->
<wr-live-welcome id="wr-live-welcome"></wr-live-welcome>
<!-- 自定义配置信息 -->
<wr-live-welcome id="wr-live-welcome" typeMap="{{customSetting}}"></wr-live-welcome>
Page({
welcomeContext: null,
intervalTimer: null,
index: 0,
data: {
customSetting: CUSTOM_SETTING, // 自定义配置信息
},
// 组件数据
defaultData: DEFAULT_DATA,
onReady() {
if (!this.intervalTimer) {
// 模拟消息提示,每2s将新消息放入队列
(this.intervalTimer as any) = setInterval(() => {
// 获取live-welcome组件示例,调用`pushWelcome`方法将消息放入队列。
(this.getWelcomeContext() as any).pushWelcome(
this.defaultData[this.index % 6],
);
this.index++;
}, 2000);
}
},
onUnload() {
if (this.intervalTimer) {
clearInterval(this.intervalTimer as any);
this.intervalTimer = null;
}
},
// 获取welcome组件实例
getWelcomeContext() {
if (!this.welcomeContext) {
(this.welcomeContext as any) = this.selectComponent('#wr-live-welcome');
}
return this.welcomeContext;
},
});
示例配置信息
本组件默认配置方案如下,以数组形式展示。
- 其中数组的索引与type值相对应,1 - 有人来了; 2 - 用户关注了号主;3 - 分享了直播;4 - 商品感兴趣;5 - 购买; 6 - 购买了某种商品;
- 对每个item来说,可以设置
bgColor
,text
,iconIndex
三个属性。bgColor
:表示本动画的背景颜色。text
:表示本动画的文本信息,比如 “进入直播间” ,“已购买***”等等。iconIndex
:表示内置图标的索引号,取值范围为1-5,其中,1-订阅,2-分享,3-感兴趣,4-抢购,5-购买。
具体效果可参考:
const CLIENT_ACTION_TYPES_MAP = [
{},
{
bgColor: 'rgba(90, 102, 255, 0.9)',
text: '来了',
},
{
bgColor: 'rgba(25, 207, 201, 0.7)',
text: '关注了号主',
iconIndex: 1,
},
{
bgColor: 'rgba(39, 191, 71, 0.7)',
text: '分享了直播',
iconIndex: 2,
},
{
bgColor: 'rgba(255, 142, 27, 0.7)',
text: '对商品感兴趣',
iconIndex: 3,
},
{
bgColor: 'rgba(255, 84, 46, 0.7)',
text: '正在抢购',
iconIndex: 4,
},
{
bgColor: 'rgba(255, 48, 86, 0.7)',
text: '已购买',
iconIndex: 5,
},
];
示例数据
示例数据需与示例配置信息相对应,有nick
、type
、ext
三个属性。
nick
: 用户昵称。 比如“春风里 来了”,“春风里”就是nick
值,“来了”是示例配置信息中的text
值所设置的。type
:表示类型,与示例配置信息数组的索引相对应,比如取值为1,表示取CLIENT_ACTION_TYPES_MAP1中的配置。ext
: 拓展信息,常用于补充,比如“春风里 购买了 红色连衣裙”,“春风里”就是nick
值,“购买了”是示例配置信息中的text
值所设置的,而“红色连衣裙”就是ext
属性值。
注意: nick
和type
是必填项,ext
是可选项,更多配置可以参考下面示例自行理解。
// 示例数据
// type类型: 1 - 有人来了; 2 - 用户关注了号主;3 - 分享了直播;4 - 商品感兴趣;5 - 购买; 6 - 购买了某种商品
export const DEFAULT_DATA = [
{
nick: '今天天气真晴朗',
type: 1,
},
{
nick: '开大奔上故宫',
type: 2,
},
{
nick: '春风里',
type: 3,
},
{
nick: 'Canvas才是最佳技术实践方案',
type: 4,
},
{
nick: '月兔捣年糕',
type: 5,
},
{
nick: '猪***猪',
type: 6,
ext: '气质连衣裙',
},
];
API
Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
typeMap | 自定义配置信息,定义动画的类型文本、背景颜色。系统已经内置一套默认值 | Array | - | - |
id | 用于父组件获取本组件实例,调用本组件的pushWelcome 方法将消息加入队列 | String | - | - |