.

弹幕插件使用教程

老赵发表于:2022年11月23日 14:58:31更新于:2023年06月06日 11:39:47

插件简介

很多H5都需要用户参与互动的环节,除了常见的点赞,还需要给用户积极发言的空间,增加用户在H5中的活跃度、参与感。常用于主题节日祝福、生日、婚礼、年会等的弹幕留言。另外,该弹幕应用对于使用弹幕的H5制作人员也较友好,支持随机或固定的弹幕播放、文字样式设置,满足于更多的小程序场景需求。

弹幕应用支持以下功能:

  • 支持用户输入、模拟弹幕两种弹幕形式

  • 支持记录用户弹幕内容

  • 可新增/删除/编辑/弹幕内容

  • 支持弹幕次数限制

  • 支持弹幕单次、循环播放控制

  • 支持所有弹幕随机、顺序播放

  • 支持弹幕轨道数量限制

  • 支持调节弹幕内容背景色、字体颜色

  • 支持开启/关闭弹幕清屏

  • 支持弹幕自定义提示语

  • 支持弹幕自定义发送类型,如输入或下拉预设内容


弹幕应用添加及配置


一、添加弹幕应用插件

在顶部工具栏中的高级组件——弹幕来添加组件。

注意:

1. 每个H5只可以添加1个弹幕应用插件;

 2. 使用弹幕插件需开启微信授权。

 image.png

点击弹幕组件,能看到基础的弹幕开关按钮和整个的弹幕层,多为透明状态,点击选中弹幕应用,右侧为该应用的配置面板。

二、插件基本设置

配置面板可配置弹幕应用的相关信息。

image.png

活动标题:活动标题修改后,弹幕对应的后台数据表单名称跟随修改。 

image.png

image.png

活动图片:可配置弹幕开/关按钮的2个状态图及弹幕发送按钮图。

活动时间:活动开始到结束的时间,期间内用户可以进行发弹幕操作;

image.png

三、规则设置

开启用户输入弹幕功能:点击【开启用户输入弹幕功能】开关后,有2个功能:

一是弹幕应用插件支持用户输入发送弹幕内容,如图:

image.png

二是可进一步设置弹幕规则,规则设置包含:

  • 每个微信用户每日/每周/每月最多可发几次(可选范围:1~10)弹幕。 image.png

  • 当任意用户进入H5时,在已有弹幕的情况下,弹幕在页面中显示的行数。

image.png

随机弹幕:正常弹幕从左往右播放时,会根据时间顺序从早到晚依次出现,但开启随机弹幕开关后,每个弹幕就会随机出现,且用户每次进入H5,弹幕的随机结果也有可能不一致。

image.png

循环播放:用户进入H5后,默认全部弹幕仅播放1次。当勾选循环播放后,全部的弹幕会重新从头播放,一直循环。注意:弹幕按顺序播放的继续按顺序播放,随机播放的每次循环播放前都会重新随机弹幕顺序。

image.png弹幕背景透明:默认为开启状态,即所有弹幕文字内容的背景色是透明的,或理解为无背景色。

当关闭时,弹幕文字内容就可显示背景色。

image.png

字体颜色:用于修改弹幕内容的文字颜色: 


弹幕剩余次数提示语的自定义:@剩余次数@前后的文字可以自定义

image.png


弹幕发送类型的自定义:可设置输入类型或下拉预设文字内容


image.png



四、样式设置

有时我们会需要对插件本身部分样式进行个性化调整,样式设置中支持我们自行编辑CSS 文档,支持嵌套,便于我们根据自己的想法需求去调整抽奖组件的布局和外观。

后续,我们将在【样式设置】面板中增加一些默认的css代码,方便不会代码的用户自定义文字颜色、字号等设置。

image.png

五、模拟弹幕

主要针对一些特殊的需求场景:如首次进入H5的用户,在没有话题及其他用户开场时,感受不到讨论的参与感与吸引力,想要提前输入一些模拟弹幕,调动气氛和用户参与积极性。

还有一种场景是不需要用户参与弹幕互动,仅为整个小程序去补充弹幕飘过的动画效果,活跃气氛。

点击添加弹幕按钮即可添加模拟弹幕内容。也支持修改删除。

注意:当弹幕中真实弹幕和模拟弹幕都包含时,两种弹幕会一起按顺序/随机播放,不另作区分。

image.png

六、后台数据管理

点击属性面板中的后台数据管理,可进入该弹幕应用数据表页面查看的弹幕内容。

image.png

点击查看数据进入弹幕内容数据查看界面。数据表会记录用户的微信OpenID、头像、昵称、弹幕内容、弹幕提交时间。

image.png

权限:弹幕应用的创建者可对弹幕数据进行编辑/删除

七、预览

以上弹幕应用设置完成后,我们可以左上角预览当前页,

或点击发布手机扫码即可。


--------- 不了解设计的程序员不是好客服 ---------------