鸿蒙-BulletChat组件

这是一款基于 HarmonyOS 开发的创新性手持弹幕应用组件，专为粉丝应援场景打造！它不仅仅是一个简单的文字展示工具，更融入了鸿蒙生态独特的分布式能力与交互乐趣，使其具备了极高的可玩性和便捷性。核心亮点在于其独创的 “碰一碰” 和 “抓一抓” 分享功能，让应援信息的传递瞬间完成，心意即刻同步！

ShuiShenHuoLe

203人浏览 · 2025-12-01 12:39:12

ShuiShenHuoLe · 2025-12-01 12:39:12 发布

BulletChat

这是一款基于 HarmonyOS 开发的创新性手持弹幕应用组件专为粉丝应援场景打造！它不仅仅是一个简单的文字展示工具，更融入了鸿蒙生态独特的分布式能力与交互乐趣，使其具备了极高的可玩性和便捷性。核心亮点在于其独创的 “碰一碰”和 “抓一抓”分享功能，让应援信息的传递瞬间完成，心意即刻同步！

如何下载

ohpm install @shuishenhuole/bulletchat

演示图片

演示视频

点击播放

前置配置

碰一碰和抓一抓依赖与 app linking 能力
相关配置可以查阅如下文档实现

我的个人网站

csdn 发布的文章

华为技术社区

组件介绍

参数名	类型	是否必填	描述
text	string	否	弹幕文字默认为 “shuishenhuole”
title	string	否	弹幕分享标题默认为 “BulletChat”
desc	string	否	弹幕分享描述默认为 “来自水深火乐的分享”
OpenLink	string ｜ null	否	分享的 app linking 链接默认为 null 如果该值没有提供则不会触发抓一抓碰一碰
fontOption	FontOption	否	字体的配置文件
BCbackgroundColor	ResourceColor	否	背景板的颜色默认为 Color.Black
AutoLandScape	boolean	否	是否自动旋转为横屏默认为 true

FontOption对象说明

参数名	类型	是否必填	描述
fontSize	Length	否	弹幕字体大小
fontWeight	FontWeight ｜ number ｜ string	否	弹幕字体粗细
fontFamily	Resource ｜ string	否	弹幕的字体族
fontStyle	FontStyle	否	弹幕字体的样式
fontColor	ResourceColor	否	弹幕字体颜色
letterSpacing	number ｜ ResourceStr	否	弹幕的字体间距
textShadow	ShadowOptions ｜ Array	否	弹幕的字体阴影
marqueeOptions	TextMarqueeOptions	否	Marquee 初始化参数(需要 sdk 版本>=18)

TextMarqueeOptions对象说明

参数名	类型	是否必填	描述
start	boolean	是	控制跑马灯进入播放状态。true 表示播放，false 表示不播放。
step	number	否	滚动动画文本滚动步长。默认值：4.0vp
loop	number	否	设置重复滚动的次数，小于等于零时无限循环。默认值：-1
fromStart	boolean	否	设置文本从头开始滚动或反向滚动。true 表示从头开始滚动，false 表示反向滚动。默认值：true
delay	number	否	设置每次滚动的时间间隔。默认值：0 单位：毫秒
fadeout	boolean	否	设置文字超长时的渐隐效果。true 表示支持渐隐效果，false 表示不支持渐隐效果。当 Text 内容超出显示范围时，未完全展现的文字边缘将应用渐隐效果。若两端均有文字未完全显示，则两端同时应用渐隐效果。在渐隐效果开启状态下，clip 属性将自动锁定为 true，不允许设置为 false。默认值：false
marqueeStartPolicy	MarqueeStartPolicy	否	设置跑马灯启动策略，该属性值生效需将 start 设置为 true。默认值：MarqueeStartPolicy.DEFAULT

MarqueeStartPolicy枚举说明

名称	值	说明
DEFAULT	0	默认持续滚动。
ON_FOCUS	1	获焦以及鼠标悬浮时开始滚动。

使用方法

BulletChat({
  text: "Hello world",
  title: "share kit",
  desc: "来自水深火乐的分享",
  OpenLink: "{app linking链接}",
  fontOption: {
    fontSize: 100,
    textShadow: {
      radius: 20,
      color: Color.Green,
    },
  },
});