You need to enable JavaScript to run this app.
导航

通用组件教程

最近更新时间2023.04.25 23:02:33

首次发布时间2022.12.19 11:53:57

2 通用组件教程

2.1 基础类

1、图片组件

一、功能介绍

  • 支持上传图片,多用于页面背景图;

  • 图片没有交互,如需交互请使用按钮组件;


    二、图片规范

  • 图片格式jpg、png、gif。请大家一定注意,图片上传是有大小限制的:gif不超过10mb,jpg、png不超过500kb;

三、常用配置
    (1)图片大小调整、位置移动、透明度调整:

  • 将图层模式设置为「移动」,拖拽即可移动位置,调整大小。

(2)图片长按可保存设置

  • 开启「用户长按可保存」开关。常用于答题测评类活动,用户拿到测试结果后促使其分享至朋友圈;

2、文字组件

  • 支持自由编辑文字,包括字体、字号、字体颜色、加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐;

  • 字体:目前为用户提供了丰富的字体以供使用;

  • 需要注意的是:目前提供的字体均为第三方提供的开源字体,详细版权信息请点击文档进行查看;




3、矩形形状组件

  • 支持更改颜色、圆角设置等,多充作文字背景图用;


    常用配置
    (1)图片大小调整、位置移动、透明度调整:

  • 将图层模式设置为「移动」,拖拽即可移动位置,调整大小。


    (2)圆角设置

  • 调整即可使矩形四角趋于光滑。



4、富文本组件

  • 富文本是基础组件的一种,是编辑文字的一种工具。在富文本设置栏内点击编辑富文本内容即可编辑文本内容;

  • 目前可以编辑:字体,字号字体颜色,加租,斜体,删除线,下划线,对齐,超链接,字间距,行间距,有序列表,无需列表;



    使用相关:

  • 双击富文本组件弹出富文本组件编辑框,会展示富文本组件的默认内容,可进行编辑,点击确定按钮会将编辑好的内容覆盖之前的富文本组件的内容,点击取消将丢失编辑内容,请谨慎操作。

  • 富文本组件可以支持苹果的emoji表情使用😘

使用场景:

  • 活动规则页:作为某个活动的规则页使用,添加规则内容在页面内;

5、按钮组件

一、功能介绍

  • 点击按钮可实现多种基础交互动作。


  【常见交互行为】
  (1)跳转链接

  • 点击按钮可以跳转到一个新的页面。


  (2)跳转活动内页面

  • 在同一个活动中存在多个页面,点击按钮可跳转至其中一页;常会用在答题测评类活动中。


  (3)打开弹窗

  • 点击按钮后在原页面弹出一个蒙层,需要配合「弹窗」组件使用。常见于抽奖兑换活动中,用来展示用户所得奖品。


  (4)关闭弹窗

  • 点击按钮后关闭弹窗蒙层。


  (5)隐藏自己 #

  • 点击后隐藏。


  二、常用配置
  (1)按钮移动位置,调整大小,设置透明度

  • 将图层模式设置为「移动」,拖拽即可移动位置,调整大小。

(2)按钮设置为固定悬浮

  • 将图层模式设置为「固定」,可以实现按钮在屏幕的某个固定位置不动。

2.2 表单类

1、勾选条款组件

默认用户勾选后才可提交表单,可用于勾选保密协议等。


填写表单项名称

提示的文案可以更改

设置是否是必填项,当你这里选择设为必填项之后,如果用户提交时没有勾选会弹出错误提示(提示的文案可更改)

同样的,如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来

同样的,如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来

可设置字体

设置字号

设置字体颜色

设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐

设置背景和边框,不用的话可以不勾选

2、图片上传组件

  • 使用该功能后,用户可以点击“+”上传图片,建议用户上传小于10M的图片,大于这个大小的图可能会上传超时最后上传失败;

  • 为方便后台数据区分,请务必记得填写「表单项名称」;

3、单行输入框组件

一个可填写的框,用户可在里面填写单行文本,文本内容会回收到数据中




填写表单项名称;
更改输入框内作为提示的文案;
设置是否必填;
设置是否限制用户填写的字符长度;
比如你可以在这里设置,要求他写的是2个字以上,5个字以下;

如果填写的超出这个范围,会弹出错误提示(4类:“无”提示、Toast、图片、弹窗)
这个判断逻辑是在填写的当下,而不是在点击提交按钮之后

如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来;

可以设置内容格式,目前提供手机号和邮箱两种检验(比如:你选择手机号之后,输入框能自己识别填写的是不是手机号码(11位数字))
如果填错了会出提示,提示可以自定义

可以设置字体

设置字号

设置字体颜色(字体颜色更改不在提示语上生效,而是在用户输入的内容上生效)

设置加粗、下划线、倾斜、左右中对齐等等

设置背景和边框,不用的话可以不勾选

4、多行输入框组件

  • 一个可填写的框,用户可在里面填写多行文本,文本内容会回收到数据中,适用于要填写内容比较多的地方。

5、单选项组件

  • 设置选项供用户点击一项选择,选择数据可回收至后台。
单选项设置表单项名称必填,用于后台数据的区分; 选项选中后双击可编辑选项;; 可增加选项; 可设置是否必填
字体设置可设置字体; 设置字号; 设置字体颜色; 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐; 设置背景和边框,不用的话可以不勾选;

6、多选项组件

  • 设置选项供用户点击一项或多项选择,可设置最多选择几项,选择数据可回收至后台;

  • 多项选择配置基本与单项选择相同,不同的配置项见下方。

选项配置多项选择选择框是方形,而单项选择选择框为圆形; 设置是否必填; 设置限制可选数量和最多可选的选项数量; 当选择的数量超过你设置的限制数量时,会发出错误提示;
自定义弹窗提示如果你选择弹窗作为错误提示,需要在活动中增加一个弹窗组件,并把它和这个地方链接;

7、下拉列表组件

  • 你可以提供一系列默认项,用户点击后展开列表,用户不用填写能直接选择你提供的默认项中的一项。
下拉选项填写表单项名称; 选中后双击更改你给的选项的信息; 添加选项; 删除选项; 设置是否必填,打开则设为必填项;
文字样式可设置字体; 设置字号; 设置字体颜色; 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐; 设置背景和边框,不用的话可以不勾选;
H5预览预览效果如图

8、提交按钮组件

  • 用户点击后可提交表单,提交按钮可收集以上所有组件收集来的信息。 使用表单组件一定要有提交按钮,不然无法收集信息在后台形成表单,ps.⭕一个活动中只能放置一个提交按钮;

  • 表单中所有组件设置必填后,判断的位置会是在用户点击提交按钮之后,除了勾选条款组件外,如果有必填项没填,用户点击提交会弹出toast提示,默认文案为”请填写完整“;

  • 勾选条款组件的错误提示方式和文案可以自定义;

提交成功用户提交时的提示设置: 提交成功设置: 提交成功的提示有六类:Toast、图片、弹窗、跳转页面、跳转URL,当然你也可以选择“无”提示。 Toast:提交后弹出Toast提示; 图片:提交后展示你给的图片; 弹窗:弹窗内可以放你想放的组件,比如抽奖等,增强活动丰富性; 跳转页面:跳转到本活动的某一页(针对多页面的活动) 跳转URL:跳转到某个链接,可以用这里和其他活动关联起来 登陆后才可提交: 如果你要收集用户的id,必须要把“登陆后才可提交”打开; 若没有登陆便提交,会出现错误提示: 错误提示有四类:“无”提示、Toast、图片、弹窗;
必填项校验必填项校验:开启后,如果你有设置其他表单组件为必填项,那么点击这个提交按钮时会对必填项的填写情况进行检验,如果存在没有填写完的必填项,则会弹出错误提示
只允许提交一次只允许提交一次:设置后用户无法二次提交,按钮会展示”不可提交“状态,并且再次点击时弹出错误提示

展示用户上次填写数据

展示用户上次填写数据:设置后,用户在进入活动页时表单不会是空白状态,而是会显示他上次填写的内容 注意事项:若使用此项功能,建议活动页面上线后,不要修改相关表单类组件的「表单项名称」,否则,在回显数据时,会展示错误信息。

自定义弹窗提示需要注意的是:除了提交成功后的提示有六种交互外,其他提示都只有四种交互。 当你选择“弹窗”作为提示方式,你需要在活动中添加一个弹窗组件,并把它和此处关联起来。

2.3 容器类

1、弹窗组件

一、功能介绍

  • 是一个在蒙版上的独立页面,可以在弹窗内编辑文字、图片等多种组件

  • 与其他组件的交互功能组合使用,常见于基础按钮的交互行为和抽奖组件的Toast设置

  • 一般常用于抽奖活动和表单活动,常见于抽奖结果展示和表单提交成功提示

二、内容配置

  • 添加弹窗组件

  • 可以把弹窗理解为一个「容器」,弹窗内可以插入任何组件

  • 点击「图层」调出页面层级结构一览表,在表中双击弹窗(如弹窗#1)修改名称

  • 保证每一个弹窗都有自己独特的名字


  组件大小调整、位置移动、透明度调整:

  • 蒙层即弹窗以外灰色的透明部分。若勾选「点击蒙层可关闭」,则用户在查看弹窗时点击灰色透明蒙层可以关闭弹窗;若不勾选「点击蒙层可关闭」,则需要额外的按钮来关闭弹窗

以点击按钮出现弹窗为例:

  • 在页面中插入一个弹窗,修改名字为“弹窗#1”;

  • 在弹窗中加入一张图片,或者按照你的想法加入其他组件,此处上传一张示例图

  • 加入一个按钮,在按钮设置中,选择“编辑事件动作”将按钮和弹窗联动起来

  • 动作类型选择「打开弹窗」

  • 弹窗组件选择「弹窗#1」

  • 实现效果:点击按钮出现弹窗(此处为图片展示),点击蒙层弹窗自动关闭

以提交表单后出现弹窗提示为例

  • 在页面中插入一个弹窗,修改名字为“弹窗#2”;

  • 在弹窗中加入一张图片,或者按照你的想法加入其他组件,此处上传一张示例图

  • 加入一个提交按钮,在校验规则中,选择“提交成功提示”为“弹窗”,将提交按钮和弹窗联动起来

  • 实现点击提交出现弹窗(此处为图片),一般用于表单提交成功反馈

2、滑动容器

一、功能介绍

  • 支持用户左右、上下滑动查看内容

  • 容器内可以添加各种组件,组件排放从左到右

二、内容配置

  • 滑动容器的显示页面默认宽度为600px,默认高度为400px

组件大小调整、位置移动、透明度调整:

关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节

设置滑动内容可查看宽度和滑动方向:

  • 滑动方向暂时只支持水平方向

  • 支持选中滑动容器后,点击需要组件依次进行添加

  • 支持鼠标拖拽,可以将需要的组件拖拽到滑动容器内

  • 内容宽度要根据设计稿需求,多次调节至理想大小

3、折叠面板

一、组件效果

可以通过对箭头的点击实现内容的展示和收起,折叠过程的切换会有动画效果


  二、常规配置
  组件大小调整、位置移动、透明度调整:

选择折叠面板

操作栏位置:顶部/底部

用户观看时默认状态是展开/折叠
操作栏高度

操作栏背景图自行上传

折叠图标是否显示

可以把原来的箭头样式图删除后改成自己需要的箭头样式

内容面板高度由什么决定
可选择【由内容撑开】或【固定高度】
由内容撑开:根据内容高度自动匹配高度
固定高度:可自行设置固定高度

内容面板背景自行上传或默认


在选项卡内部添加内容时,请先选中对应的折叠容器,否则内容会被错误的添加在选项卡外部

4、导航栏组件

一、组件作用

不同块的内容全部排列,但选择不同块内容时对应的导航栏的tab时会自动定位到该块内容的位置

点击tab后,对应内容会滚动到最上方(注意看tab上的蓝条,出现在哪个位置说明我点击了哪个tab)(但是如果你页面不够长,也有可能只是定位到底部,因为页面拉不上来了,下面没有内容)
比如这里 四个颜色对应四个tab,我后面添加了一堆图片拉长了页面,不然第四个tab(绿色)的只会出现在页面底部,而不会出现在导航栏顶端

二、组件配置

1.添加组件

2.配置组件

如果你需要,可以调整tab栏的高度
设置tab个数
如果你不想这些tab平均分配大小,你可以自定义比例
开启吸顶,tab栏就会一直显示在导航栏最上方,你可以自如的切换tab
tab栏吸顶时的偏移,一般设置为0就可以

3.替换tab背景图

点击“选择图片”即可上传对应tab的背景图
所含有tab的图片尺寸需要相同

4.往导航栏添加你需要的内容





导航栏是个容器组件,所以在你要往每个子容器(就是tab)添加内容时,你需要先选中这个子容器(tab下方出现蓝色横条),再添加组件

如果你要更改这个tab的背景色,也需要先选中这个子容器(注意右侧配置栏标题的变化)

你可以打开结构树查看,确认自己要添加的组件添加到了你想添加的子容器中

5、轮播容器

一、组件效果

可以通过对左右箭头的点击实现不同块内容之间的切换,不同内容块支持自动轮播


  二、常规配置
  组件大小调整、位置移动、透明度调整:

关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节

选择轮播容器

添加多个轮播子容器

默认展示哪个轮播子容器

子容器宽度设置

横排or竖排展示

是否需要自动轮播

轮播间隔时间设置

数量指示点是否显示

切换箭头是否显示
可以把默认切换箭头删除,自行上传设计好的箭头样式


在轮播容器内添加内容时,请先选中对应的轮播子容器,否则内容会被错误的添加在选项卡外部

2.4 选项卡

1、单行选项卡

一、组件效果:
  可以实现不同tab(2-5个)下不同块内容的切换,比如

二、详细配置
  1.添加【单行选项卡】组件

  2.具体配置
  (1)更改展示项

  • 如果你的展示框不像上面那样,那说明你只选中了选项卡的一部分,而不是整个选项卡,如下,可以打开结构树确认。

  • 更改tab背景图

  • tab切图须知,tab切图需要将每个选中状态下的整个选项卡的bar切下来,而不是切单独的tab button.比如
选项1选中态选项2选中态选项3选中态
  • 上传后的效果


  (2)在选项卡各个tab下添加内容

2、探索版选项卡

添加单行选项卡

  • 点击选项卡——探索版选项卡组件即可添加

  • 右侧配置区向下滑动点击添加选项,最多支持添加20个选项卡


  调整选项卡位置及间距

  • 调节位置:当你添加一个探索版选项卡后,对应默认位置如下;

  • 外边距调节:


   这四个数值分别对应选项卡距离上、右、下、左四个边的距离。
  如何****切图
  各选项一致时:

  • 只需要设计选中状态和未选中状态两张图片;

  • 注意:选项卡默认宽度210px,高度84px。实际样式会根据上传的背景图片而变化。默认样式如下图:


   各选项不一致时:

  • 需要为每张选项卡设计选中状态和未选中状态两张图片。

  • 注意:选项卡默认宽度210px,高度84px。实际样式会根据上传的背景图片而变化。默认样式如下图,第一个及最后一张选项卡可以使用长方形图片,上传后正常展示


  只有两个选项时,如何配置?
  在探索版选项卡的默认状态下,如果只有两个选项的情况下会靠左展示,选项卡宽度会根据上传图片自动撑开; 建议设计尺寸:宽度:335px,外边距:20,选项间距:40。 如果外边距和选项卡距离有所改变请自行计算宽度。计算方法:选项宽度=(750-外边距*2-选项间距)/2

   对比使用以上方式,这边更建议直接使用👉单行选项卡


3、箭头选项卡

一、组件效果

可以通过对左右箭头的点击实现不同块内容之间的切换,两个tab之间的切换会有动画效果


二、常规配置

选择箭头选项卡

选项栏高度设置

切换选项的tab数量

更改活动打开时默认展示的tab

更改tab的样式

可以把原来的箭头样式图删除后改成自己需要的箭头样式


在选项卡内部添加内容时,请先选中对应的tab子容器,否则内容会被错误的添加在选项卡外部

2.5 音视频

1、URL视频

一、组件作用

利用内部服务器生成的链接承载可在当前页面播放的视频

注意,最好上传横屏视频,竖屏视频不会适应,播放效果如下


  二、组件配置

### 1.添加组件
### 2.设置组件图层位置和大小关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节

3.配置组件

将你复制来的链接前的【https:】删掉,保留【//】以后的链接,填入地址

上传视频封面,系统不会自动抓取,不上传的话会出现魔方的兜底封面

5.根据需求调整边框


2、音频

一、组件作用
  可点击后播放/暂停你所上传的音频文件(.mp3),也可隐藏按钮设置自动播放(用户对页面进行任意交互后自动播放),作为整个活动的bgm
  二、组件配置

### 1.添加组件

2.设置组件图层位置和大小

关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节

3.配置组件

  • 上传MP3格式的音频,小于1MB

  • 设置是否自动播放(但是也不是一打开页面就播放,而是需要用户在页面上产生交互(比如滑动页面))、会自动循环播放,一遍放完会重复播放第二遍,直到用户关闭页面

  • 设置是否展示音频按钮

  • 设置是否开启旋转动画(开启后播放按钮会旋转)

  • 上传播放和暂停状态的按钮样式


2.6 动画效果

1、计时器

一、组件效果
  用于展示距特定时间正计时和倒计时的组件

## 倒计时## 正计时

二、组件配置

### 1.添加组件
### 2.更改组件图层位置和大小关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节

3.具体配置组件

设置正计时/倒计时

设置时间(对于倒计时来说,你的活动时间要设置在未来,对于正计时来说,你的时间要设置在过去)
设置展示格式
自定义展示文案

### 4.配置背景和边框

2、跑马灯

一、组件效果

可以进行文字内容的滚动播放,比如用作弹幕、留言墙效果

## 向左滚动## 向上滚动

二、组件配置

### 1.添加组件
### 2.更改组件图层位置和大小关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节

3.具体配置组件

配置玩法规则后进行选择链接
轮播内容可以更改

设置滚动方向

4.调整文字



设置字体

设置字号

设置字体颜色

设置文字加粗、下划线、倾斜
设置文字缩进

对齐的调整对于该组件不生效

点击展开设置字间距、行间距、文字方向、删除线

同样也可对用户及奖品信息样式进行设置

5.配置背景和边框

也可选择对背景和边框进行设置

2.7 答题类

1、知识问答

一、组件效果

  • 答题可以区分正确和错误,存在正确/错误提示,问题内容可以是图片或文字



二、知识问答配置(以图片为例)

配置区板块具体释义

选项类型 - 支持图片和文字,此处选图片

每一道题目的分值可以手动输入,默认值是10分
从一道题自动跳转下一题的时间,默认为500毫秒

用户选中答案的图标默认是一个背景是灰色的勾,可以自行设计并上传选中图标

知识问答组件默认有四个选项,可以手动删减选项

选项的图片可以删除,重新手动上传设计好的图片

知识问答组件支持勾选正确答案,用户只有选中正确答案,才得分

不勾选则默认为错误答案

可以手动增加选项,选项数量没有限制

用户选择正确/错误答案的反馈设置

可以选择无、Toast、图片和弹窗

无 - 没有反馈

Toast - 一个小方块提示,需要手动输入提示内容

图片 - 弹出图片提示,需要手动上传图片

弹窗 - 弹窗提示,需要用户配置弹窗及弹窗内容,具体参考【弹窗链接】

2、答题得分

一、组件效果
  自动根据测试测评组件和知识问答组件累计用户最终得分并展示分数,不需要配置


二、答题得分配置

配置区板块具体释义

可以设置基础分数,默认值是0分

可以选择字体

可以选择字号,默认为24px

可以选择字体颜色,默认黑色

加粗、下划线、斜体、得分位置在此设置

3、测试测评

一、组件效果

  • 答题不区分正误,每个选项有不同分值,不提供正误反馈,问题内容可以是图片或文字



二、测试测评配置(以文字为例)

配置区板块具体释义

选项类型 - 支持图片和文字,此处选图片

从一道题自动跳转下一题的时间,默认为500毫秒

测试测评组件默认有四个选项,可以手动删减选项

选项的对应文案可以手动编辑

每个选项的分值需要手动键入,默认分值为10分

不区分正误选项

可以手动添加选项

可以选择选中选项时,文字的颜色

可以选择选中选项时,选项的背景色

4、重做按钮

一、组件效果

  • 从得分页跳转测试开始页面,可以重做问答



二、重做按钮配置

配置区板块具体释义

手动设置,跳转到测试开始页面

重做按钮的样式可以手动上传设计图样


!!请注意:
  如果你的题目配置了【用户答错后--跳出弹窗展示解析】,同时又在页面最后配置了【重做按钮】,那么需要在答题错误跳出的弹窗的按钮中,额外配置【关闭弹窗】的动作,否则会出现用户点击【重做按钮】重做后,到第一遍答错的题目时,还未选择就直接跳出解析的情况。具体的配置请看下图




2.8 其他

1、复制文本

一、组件效果

  • 给定一串文字,用户点击文字旁边的button能一键复制你的文字,可用于复制链接/邀请码等场景


  二、组件配置

### 1.添加组件

2.更改位置大小和图层

关于图层和位置的设置,请查看编辑器新手入门「图层和位置」章节

3.配置组件


可以更改输入框的提示文案

更改用户实际复制的文案,比如这里,用户点击复制按钮之后就会自动复制”实际复制文本“这几个字到手机
更改复制成功后的提示方式和文案,提示可以是toast、弹窗、图片或无提示

如果你的提示方式是弹窗
请现在你的活动中添加一个弹窗组件(在容器类组件中)
并把它和此处链接起来
你可以在弹窗中放置你想要的组件,具体请查看弹窗的教程

4.更改按钮样式(如果你需要的话)

快速双击选中复制按钮【注意,选中后它周围会出现篮框,并且右侧的配置会是【复制文本按钮元素设置】

上传你的按钮图

更改填充方式
设置是否重复(当你上传的背景图在设置完填充方式后小于组件时,会出现空白,这时候可以选择重复设置背景,选择不重复则保留空白
位置:设置背景相对于组件的位置对准点

5.根据需求配置背景和边框

2、下拉选择跳转

一、组件效果

点击后展开你设置的列表,用户自主选择选项后跳转到该选项对应的页面(链接)中

二、组件配置

1.添加组件
2.配置组件关于图层和位置的设置,请查看编辑器新手入门「图层和位置」章节

3.配置跳转项


设置展示文案

设置选项文案

设置选项对应的跳转链接,需要是//开头。
比如你平时获取的链接是https://www.bytedance.com/zh/
那么你在这里要填的是//www.bytedance.com/zh/

添加选项

更改展开和收起的图标(如果你需要)

3.根据你的要求配置背景