# 2. 页面组件教程 #### 2.1 基础类 ##### （1）图片组件

* 支持上传图片，多用于页面背景图；图片可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8408782bb4bb4fdca3c16d3d6f620f95~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击图片可跳转至任意页面。 | | | | | \ |跳转链接 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53c10e8e55874a3daefe61079f141144~tplv-goo7wpa0wc-image.image =1128x) |点击图片可以跳转至其他链接。 | | | | | \ |打开弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aa71ee96837348939d76c079c48e59a6~tplv-goo7wpa0wc-image.image =1122x) |点击图片后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/059e1aea30e945dcb42fc35ff7cee2d3~tplv-goo7wpa0wc-image.image =1108x) |点击图片后关闭弹窗。 | | | | | \ |JS动作 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/22d5738200584ae9af643b6ff84fb8e9~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | * 其他常用配置： * 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。 * 内容设置：支持上传图片/选择其他图片素材，设置「加载中状态展示颜色」，开启「用户长按可保存」（常用于答题测评类活动，用户拿到测试结果后促使其分享至朋友圈）。

##### （2）文字组件

* 支持自由编辑文字，包括字体、字号、字体颜色、加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐； * 字体：目前为用户提供了丰富的字体以供使用（目前提供的字体均为第三方提供的开源字体）； * 文字组件可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d54a2b5f3fc74c20b119fa5a143db79d~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击文字可跳转至任意页面。 |\ | | | | | | | | \ |跳转链接 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6cecdbec4bc443b284070a73605772cd~tplv-goo7wpa0wc-image.image =1128x) |点击文字可以跳转至其他链接。 | | | | | \ |打开弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/315a52ee65a84f2c9a8e8cafcc32d2ff~tplv-goo7wpa0wc-image.image =1122x) |点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5188a586912f4ef089bbaed683164046~tplv-goo7wpa0wc-image.image =1108x) |点击文字后关闭弹窗。 | | | | | \ |JS动作 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f237fb3ed80e430dbcd69e7230a97367~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | ##### （3）矩形形状组件

* 支持更改颜色、圆角设置等，多用作文字背景图。 ##### （4）富文本组件

* 富文本是基础组件的一种，是编辑文字的一种工具。 * 在富文本设置栏内点击「编辑富文本内容」即可编辑文本内容，支持设置：字体，字号，加租，斜体，删除线，下划线，有序列表，无序列表，字间距，行间距，超链接，字体颜色，对齐。 * 使用场景：作为某个活动的规则页使用，添加规则内容在页面中。

##### （5）按钮组件

* 点击按钮可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b69ea117ecc547649d533768ff1af656~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击文字可跳转至任意页面。 |\ | | | | | | | | \ |跳转链接 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/892bb310211f4a22a77131b329c29905~tplv-goo7wpa0wc-image.image =1128x) |点击文字可以跳转至其他链接。 | | | | | \ |打开弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6221640e33784b0fb042304fb426d177~tplv-goo7wpa0wc-image.image =1122x) |点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37d1de0c69094600889243bf84b2e9b4~tplv-goo7wpa0wc-image.image =1108x) |点击文字后关闭弹窗。 | | | | | \ |隐藏自己 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d2c7d3bc178b4a8fba538b9479593d3f~tplv-goo7wpa0wc-image.image =1104x) |点击按钮后隐藏当前按钮组件。 | | | | | \ |JS动作 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/31fdcbcdcd2b4257a3c4fdb27ccd54c0~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | * 其他常用配置： * 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。 * 将图层模式设置为「固定」，可以实现按钮在屏幕的某个固定位置不动。

##### （6）分享按钮组件

* 点击按钮可弹窗生成分享海报，或调用浏览器的分享操作。 * 支持分享当前活动链接、公众号二维码、其他链接。

| | | | \ |分享方式 |示意图 |详细说明 | |---|---|---| | | | | \ |海报/二维码 |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4d1643521aef43c0a095fcf08d4522b1~tplv-goo7wpa0wc-image.image =304x) |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/55e08d57e479481aa53b8d650c464626~tplv-goo7wpa0wc-image.image =901x) |\ | | |* 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案 |\ | | |* 可自定义关闭不需要展示的元素 | |^^| | | \ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8c16a922ccab4ddb9b839f54da8a2e84~tplv-goo7wpa0wc-image.image =1441x) |单击海报中的内容，可进行内容编辑，可调整图片、文字等内容的大小和位置 |\ | | | |\ | | |* 用户头像：默认获取用户的头像，可设置兜底图片，用户没有头像时自动展示兜底图片 |\ | | |* 用户昵称：默认获取用户的昵称，可设置兜底昵称内容，用户没有昵称信息时显示兜底名称 |\ | | |* 图片：可自定义修改主图，可修改主图大小，可调整主图在整个海报中的布局，支持覆盖整张海报 |\ | | |* 二维码：可调整大小，不建议小于108px，否则扫码时不容易识别 |\ | | |* 描述文案：海报中可自定义的文字，可修改颜色、大小等 |\ | | |* 关闭按钮：海报弹窗的关闭按钮，可修改按钮图片 |\ | | |* 保存图片提示文案：海报弹窗下方的提示文案，可修改 |\ | | | |\ | | |注意：海报图片一般是由用户长按后保存至本地，建议检查一下访问的APP端是否支持长按保存，若不支持可提醒用户进行截图保存 | | | | | \ |端内分享+海报兜底 |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d50b25c34f694a3caac1288b0ca15198~tplv-goo7wpa0wc-image.image =304x) |* 端内分享：指H5在各个APP应用端内访问时，调用该APP原生的分享操作，将H5分享出去 | |^^| | | \ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/32fd71fb280f4e74b8d067fbc5b56513~tplv-goo7wpa0wc-image.image =313x) |* 左侧示例图是微信内的分享，引导用户点击微信右上角的分享操作 | |^^| | | \ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/73e7a64f967141b48e28633731837802~tplv-goo7wpa0wc-image.image =453x) |* 左侧示例图是某APP的分享，会直接调起该APP的分享操作 |\ | | |* 哪些APP支持直接调起：市面上大部分手机浏览器，有提供分享操作的都可调起 |\ | | |* 自有APP是否可以调起：可以，需通过应用管理把APP的share调起方法写入SDK，详情参考「8 应用管理」的操作说明 | |^^| | | \ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/735525a2284e41469580065c4daac46a~tplv-goo7wpa0wc-image.image =901x) |* 什么情况下会展示海报：当访问的APP端**没有**分享操作可以调用时，用户点击分享会自动展示为海报 |\ | | |* 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案 |\ | | |* 可自定义关闭不需要展示的元素 | #### 2.2 表单类 ##### （1）勾选条款组件 * 默认用户勾选后才可提交表单，可用于勾选用户隐私协议等。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/191ce05b83d24d2185a56ab6af3f4442~tplv-goo7wpa0wc-image.image =1738x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e449969c97d947c7b8e9026f2fcc675f~tplv-goo7wpa0wc-image.image =1698x) |【勾选条款设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为必填：若设为必填项，用户提交时没有勾选会弹出错误提示 |\ | | 2. 错误提示：支持设置错误提示，toast、图片或弹窗的形式 |\ | |3. 跳转文本： |\ | | 1. 提示文案：支持修改条款名称 |\ | | 2. 点击反馈：支持设置点击条款的反馈动作，toast、图片、弹窗、跳转页面或跳转URL的形式 |\ | |4. 文本样式： |\ | | 1. 设置字体、字号、字体颜色 |\ | | 2. 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐 |\ | | 3. 设置背景和边框，不用的话可以不勾选 |\ | | |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0d31532571ba49109f4706aa6df3dfbc~tplv-goo7wpa0wc-image.image =1714x) |选中条款可以修改位置大小、文本样式。 | ##### （2）图片上传组件 * 使用该功能后，用户可以点击“+”上传图片，建议用户上传小于10M的图片，大于10M可能会上传超时导致上传失败； * 为方便后台数据区分，请务必记得填写「表单项名称」；

##### （3）单行输入框组件 * 单行输入框，C端用户可输入单行文本提交数据 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/489fd79c953a45edb3d9b91f33ea8da6~tplv-goo7wpa0wc-image.image =1766x) |\ | |\ | |【单行输入框设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示 |\ | | 3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） |\ | | 4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/415923d009164811a4d2c904ef173f96~tplv-goo7wpa0wc-image.image =1708x) |选中标题可以修改位置大小、文本样式。 |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ffa5bd50f7de49a7907cbf061efe3e18~tplv-goo7wpa0wc-image.image =1696x) |选中输入框可以修改位置大小、文本样式。 | ##### （4）多行输入框组件 * 多行输入框，C端用户可输入多行文本提交数据 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/269886c65e1c4e8c9d30f2885e379917~tplv-goo7wpa0wc-image.image =1700x) |【多行输入框设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示 |\ | | 3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） |\ | | 4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a7243a3dd2c14a0eb07c2a2653a22805~tplv-goo7wpa0wc-image.image =1716x) |选中标题可以修改位置大小、文本样式。 |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d1a8859597a34e5ca299432af40e14af~tplv-goo7wpa0wc-image.image =1710x) |选中输入框可以修改位置大小、文本样式。 | ##### （5）单项选择组件 * 设置选项供用户点击一项选择，选择数据可回收至后台。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a5a6ef1482da4fcd9528744f0815a066~tplv-goo7wpa0wc-image.image =1704x) |【单项选择设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、添加选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8fced22ba2ea47bda5932926cd1c4a73~tplv-goo7wpa0wc-image.image =1718x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/873cbc6369674e169139893bf4d17b63~tplv-goo7wpa0wc-image.image =1714x) |选中选项区域可以修改位置大小、文本样式。 |\ | | | ##### （6）多项选择组件 * 设置选项供用户点击一项或多项选择，可设置最多选择几项，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6832ac57ddb84e348fe01fab19cf5e39~tplv-goo7wpa0wc-image.image =1698x) |【多项选择设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、添加选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 |\ | | 3. 限制可选数量：开启后，可以设置最多选择几项、勾选超出限制时的错误提示（4类：无提示、Toast、图片、弹窗）。 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/61ad35b69f6b45d4b72e447a84e566eb~tplv-goo7wpa0wc-image.image =1716x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/56e1a8b6be694a988453fa4bc087cdb5~tplv-goo7wpa0wc-image.image =1702x) |选中选项区域可以修改位置大小、文本样式。 |\ | | | ##### （7）下拉列表组件 * 设置选项供用户下拉选择其中一项，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ | |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3434737244d24fcf985e4c9db0f56e53~tplv-goo7wpa0wc-image.image =2036x) |\ | |【下拉列表设置】 |\ | | |\ | |1. 内容设置： |\ | | 1. 表单项名称：修改表单项名称 |\ | | 2. 添加选项：单个添加下拉选项 |\ | | 3. 批量管理：批量添加、删除下拉选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/26013da70a3d4258942bc0e58d8f59c9~tplv-goo7wpa0wc-image.image =1700x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c2e4f0f2ea7b4c0e95e602f66d976cd2~tplv-goo7wpa0wc-image.image =1694x) |选中下拉框可以修改位置大小、文本样式。 |\ | | | ##### （8）提交按钮组件 * 用户点击按钮后可提交表单信息，收集以上所有组件的数据。使用表单组件一定要有提交按钮，否则无法收集信息在后台形成表单（注意：一个活动中只能放置一个提交按钮）； * 表单中所有组件设置必填后，除了勾选条款组件外，如果有必填项没填，在用户提交按钮时将会弹出toast提示，默认文案为“请填写完整“； * 勾选条款组件的错误提示方式和文案支持自定义； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/80ea2ce797ff4e6496490fe10c15af7d~tplv-goo7wpa0wc-image.image =1706x) |【提交按钮校验规则】 |\ | | |\ | |1. 提交成功提示：提交成功的提示有六种，无提示、Toast、图片、弹窗、跳转页面、跳转URL。 |\ | | 1. Toast：提交后弹出Toast提示 |\ | | 2. 图片：提交后展示一张图片; |\ | | 3. 弹窗：弹窗内可以放各种组件，比如抽奖等，增强活动丰富性; |\ | | 4. 跳转页面：跳转到本活动的某一页（针对多页面的活动） |\ | | 5. 跳转URL：跳转到某个链接，这里和其他活动关联起来 |\ | |2. 登录后才可提交： |\ | | 1. 如果需要收集用户的id，可以把“登录后才可提交”打开； |\ | | 2. 若用户没有登录便提交，会出现错误提示。 |\ | |3. 必填项校验：开启后，如果有设置表单组件为必填项，那么用户点击提交按钮时会对必填项的填写情况进行检验，如果存在没有填写完的必填项，则会弹出错误提示。 |\ | |4. 只允许提交一次：开启后，用户无法二次提交，按钮会展示”不可提交“状态，并且再次点击时弹出错误提示。 |\ | |5. 展示用户上次填写数据：开启后，用户在进入活动页时表单将会展示上次填写的内容（注意：若使用此项功能，建议活动页面上线后，不要修改相关表单类组件的「表单项名称」，否则，在回显数据时，会展示错误信息。） | ##### （9）报名按钮组件 * 用户点击按钮后可提交表单信息，收集以上所有组件的数据。 * 与提交按钮不同的是，报名按钮可以关联玩法「提交表单任务」，用户点击报名按钮提交表单后可获得玩法机会。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/145edbb774bd4d7ba2bd226377e6a2f2~tplv-goo7wpa0wc-image.image =295x) |【内容设置】可关联玩法提交表单任务，需在玩法规则设置时添加「提交表单任务」。 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/526c9e74d39c49e29ed83f88a05582ca~tplv-goo7wpa0wc-image.image =295x) |【样式设置】可设置「未报名」和「已报名」的按钮样式，目前默认表单任务都只允许提交报名1次。 |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/de451d6d1de640b1b1e7996cf0c69871~tplv-goo7wpa0wc-image.image =622x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8b23f6d1b0584bc58dcfad46de633ff4~tplv-goo7wpa0wc-image.image =600x) |【反馈设置】主要针对用户点击报名提交后，不同场景提示内容的配置 |\ | | |\ | |1. 报名成功提醒：用户提交数据完成时的提示内容 |\ | |2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录便提交，会出现错误提示。 |\ | |3. 不在活动时间内：用户点击提交时，不在玩法活动可参与的时间范围内的提示内容 |\ | |4. 不再报名任务时间：用户点击提交时，不在报名任务可参与的时间范围内的提示内容 |\ | |5. 命中黑名单：用户在黑名单内时的提示内容 |\ | |6. 不在本次活动范围：用户点击提交时，用户不在玩法圈选的可参与范围内的提示内容 |\ | |7. 参与机会不足：用户点击提交时，用户参与玩法机会不足的提示内容 |\ | |8. 参与次数达到上限：用户点击提交时，用户参与玩法次数达到上限的提示内容 |\ | |9. 频繁点击：频繁点击时的提示内容 |\ | |10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | |11. 必填项校验：用户提交时部分必填项没有填写完整的提示内容 |\ | | |\ | | | #### 2.3 容器类 ##### （1）弹窗组件 **功能介绍** * 弹窗是一个在蒙版上的独立页面，可以在弹窗内插入文字、图片等多种组件 * 通常与其他组件的交互功能组合使用，常见于基础按钮的交互行为、抽奖结果展示、表单提交成功提示等场景

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a9c5942b5e964b668ed316ed42b9e846~tplv-goo7wpa0wc-image.image =2176x) |**step1: 添加弹窗组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/da889cc02c9f481cae54de6cceacee3e~tplv-goo7wpa0wc-image.image =2190x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/111c3acd58e2424f9057efecb3ce177b~tplv-goo7wpa0wc-image.image =1708x) |**step2: 添加弹窗背景** |\ | | |\ | |1. 加入「矩形形状」组件作为弹窗背景 |\ | |2. 按需调整矩形尺寸、背景颜色等 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d9c30d32cae84325b1a864f0bf76ea4c~tplv-goo7wpa0wc-image.image =2188x) |**step3: 添加弹窗内容** |\ | |选中弹窗后，将文字、图片、按钮等组件添加至弹窗容器内 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/899f7e2b87bb4623b09cfec7c0aaa7ad~tplv-goo7wpa0wc-image.image =2814x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0498cf41d97d436285a04b6dfb0b52b1~tplv-goo7wpa0wc-image.image =2810x) |**step4: 设置弹窗位置和大小** |\ | | |\ | |1. 「图层」面板选中弹窗，可以设置弹窗的高度、位置、点击蒙层可关闭弹窗 |\ | |2. 关闭弹窗： |\ | | 1. 若勾选「点击蒙层可关闭」，则用户在查看弹窗时点击灰色透明蒙层可以关闭弹窗；（蒙层即弹窗以外灰色的透明部分） |\ | | 2. 若不勾选「点击蒙层可关闭」，则需要额外的按钮来关闭弹窗。 |\ | |3. 修改弹窗名称：在「图层」面板双击弹窗（如弹窗）即可修改名称 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f7e446a7b4c1453dbf3a3c8106b89588~tplv-goo7wpa0wc-image.image =1738x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9bd0cdf3590f4e459da270870cc3597c~tplv-goo7wpa0wc-image.image =1156x) |**step5: 设置打开弹窗的交互动作** |\ | |以点击按钮打开弹窗为例： |\ | | |\ | |1. 页面加入一个按钮，点击「编辑交互动作」打开弹窗设置 |\ | |2. 动作触发条件选「单击事件」，动作类型选「打开弹窗」，弹窗组件选择前面设置的弹窗 | ##### （2）滑动容器 **功能介绍** * 支持在滑动容器区域内左右、上下滑动查看内容 * 可以在容器内插入文字、图片等多种组件

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9bdb5a82011d4aefba78017ba0a8adfd~tplv-goo7wpa0wc-image.image =2216x) |**step1: 添加滑动容器组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3feacdfaa2bd4de9ba66b276c78b1b38~tplv-goo7wpa0wc-image.image =1730x) |**step2: 设置图层、位置大小** |\ | | |\ | |1. 滑动容器的显示页面默认宽度为600px，默认高度为400px |\ | |2. 可以设置滑动容器组件的大小、位置移动、透明度 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ea2e476471c4450aba7b84e269ed4e90~tplv-goo7wpa0wc-image.image =2196x) |**step3: 设置滑动内容可查看宽度和滑动方向** |\ | | |\ | |* 滑动方向支持水平、垂直方向 |\ | |* 支持鼠标拖拽，可以将需要的组件拖拽到滑动容器内 |\ | |* 内容宽度要根据设计稿需求，多次调节至理想大小 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/347f3ffeac8a4a2588ae55ceaf7fbc26~tplv-goo7wpa0wc-image.image =2174x) |**step4: 添加容器内容** |\ | |选中滑动容器后，点击文字、图片等组件依次添加至容器内 | ##### （3）折叠面板 **组件效果** 可以通过对箭头的点击实现内容的展示和收起，折叠过程的切换会有动画效果。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3a39e7447d1942cab5525e9d687bf192~tplv-goo7wpa0wc-image.image =2180x) |**step1: 添加折叠面板组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ad31e6a6d8314dfeb89d5947a7fbf09c~tplv-goo7wpa0wc-image.image =628x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4456640649584abf8133db759ca4f0ab~tplv-goo7wpa0wc-image.image =610x) |**step2: 内容设置** |\ | | |\ | |1. 操作栏位置：下拉操作栏所在位置，支持设置「顶部」或「底部」 |\ | |2. 默认状态：支持设置初始默认是「展开」或「折叠」的状态 |\ | |3. 操作栏高度：支持设置操作栏的高度 |\ | |4. 操作栏背景图：支持自行上传图片作为操作栏的背景图 |\ | |5. 折叠图标：支持设置是否显示折叠图标，也可以上传图片，把原来的箭头样式替换成自己需要的箭头样式 |\ | |6. 内容面板高度：可选择「由内容撑开」或「固定高度」 |\ | | * 由内容撑开：根据内容高度自动匹配高度 |\ | | * 固定高度：可自行设置固定高度 |\ | | |\ | | |\ | |内容面板背景自行上传或默认 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7533be4df03e42d486b3e8fe4a0ae90c~tplv-goo7wpa0wc-image.image =630x) |**step3: 内容面板背景** |\ | |设置内容面板区域的背景样式 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/43c27c923fc2460bb11ae9266e27851b~tplv-goo7wpa0wc-image.image =2200x) |**step4: 添加容器内容** |\ | |选中折叠面板后，点击文字、图片等组件依次添加至容器内 | ##### （4）导航栏组件 **组件效果** 不同块的内容全部排列，当选择不同模块内容时对应的导航栏的tab时会自动定位到该模块内容的位置。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d0b1a4c8e112432c9eb97522d43b149c~tplv-goo7wpa0wc-image.image =2194x) |**step1: 添加导航栏组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9e08ac112ebc48e590bf1d0fbc410df2~tplv-goo7wpa0wc-image.image =2812x) |**step2: 设置导航栏tab样式** |\ | |点击导航栏tab区域，对导航栏进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 热区设置：支持自定义每个tab所占宽度比例，如下图所示 |\ | | |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e2f0102e8bb844328d3d5a5dbea39314~tplv-goo7wpa0wc-image.image =1740x) |\ | | |\ | |4. 是否开启吸顶：开启后，tab栏就会一直显示在导航栏最上方 |\ | |5. 选项栏背景图片：支持替换tab栏的背景图片 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/de9cc23f31c642f793bd95f49dcf96c1~tplv-goo7wpa0wc-image.image =2812x) |**step3: 设置导航栏子容器样式** |\ | |选中导航栏子容器，可以设置容器高度和背景样式 |\ | | |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7ecb9c2776c44762aa6d59ff1579bb1b~tplv-goo7wpa0wc-image.image =2812x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中导航栏子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | ##### （5）轮播容器 **组件效果** 可以手动点击箭头左右切换不同模块的内容，也支持自动轮播

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ead4b4398128420b8454bab683f03a90~tplv-goo7wpa0wc-image.image =2198x) |**step1: 添加轮播容器组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/020fe769a2fc41cdac02fd32a688e0da~tplv-goo7wpa0wc-image.image =2812x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e4a034b289164158bfc55e7f7024a00b~tplv-goo7wpa0wc-image.image =622x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bdd474e2e96e4e95a3c4a4c56a167616~tplv-goo7wpa0wc-image.image =600x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fdc76f20a3f44df6a0c8138363e8b1e1~tplv-goo7wpa0wc-image.image =618x) |**step2: 设置轮播容器样式** |\ | |点击最外层的轮播容器，进行如下设置： |\ | | |\ | |1. 修改图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 添加或删除轮播子容器 |\ | | 2. 默认展示：选择初始默认展示的轮播子容器 |\ | | 3. 子容器宽度：设置子容器的宽度 |\ | | 4. 自动轮播：开启后，将会自动切换不同子容器模块的内容，支持设置间隔时间 |\ | | 5. 数量指示点：开启后，将会在组件底部显示数量指示点，支持修改指示点的默认色和选中色 |\ | | 6. 切换箭头：开启后，将会在组件左右侧显示切换箭头，支持修改左箭头和右箭头的图片 |\ | | 7. 左右间距：指箭头与组件边框的水平方向距离，该数值须小于组件宽度的一半 |\ | | 8. 循环切换：开启后，将不间断顺序循环切换，即切换到最后一个子轮播容器时，再次点击右箭头将切换至第一个子轮播容器 |\ | | 9. 背景：支持修改轮播容器的背景样式 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c337179c85b441c8938baeb38aace9c5~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置轮播子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9a8aebff7fff4f24b8d3dbecb86e0227~tplv-goo7wpa0wc-image.image =2218x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的轮播子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | #### 2.4 选项卡 ##### （1）单行选项卡 **组件效果** 可以实现**不同tab（2-5个）下不同模块内容的切换**，比如： ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2c69077c2e05486ebe2658a9bc0f8ae3~tplv-goo7wpa0wc-image.image =360x) ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/afc2042e34454f23885f8640af1cd2ca~tplv-goo7wpa0wc-image.image =360x) **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e31bb5f30ba94c5e9fa019f1f3e53a61~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加单行选项卡组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9d5ce23292b74af684a6882f680a4242~tplv-goo7wpa0wc-image.image =2814x) |**step2: 设置单行选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 可点击项：支持设置可点击的tab项 |\ | |4. 默认选中项：选择初始默认展示的tab |\ | |5. 热区设置：支持自定义每个tab所占宽度比例，如下图所示： |\ | | |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e217af1f2543497ababc3f3b806fcde1~tplv-goo7wpa0wc-image.image =1696x) |\ | | |\ | |6. 选项栏背景图片：支持替换tab栏的背景图片 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/76c931cd8b4049a788ef5845f6d50e94~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f61f4c26a91f49f9a63c4cf671f7d890~tplv-goo7wpa0wc-image.image =2224x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | ##### （2）探索版选项卡 **组件介绍** * 探索版选项卡最多支持添加20个选项卡，可以左右滑动查看选项 * 选项文字内容支持编辑 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/61276c778eb24f3baee5d8af9ce4648e~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加探索版选项卡组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/af5d8ee447074237aff1787c7d50e6af~tplv-goo7wpa0wc-image.image =2812x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f9a1508f6a9f4baea5d1413920669b0e~tplv-goo7wpa0wc-image.image =614x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/84ed483c10ec4001a8f1f8cee650f1bf~tplv-goo7wpa0wc-image.image =612x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3e2d9d4950044617bdb4ca4d7b74b76a~tplv-goo7wpa0wc-image.image =590x) |\ | |**step2: 设置探索版选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 外边距：这四个数值分别对应选项卡距离上、右、下、左四个边的距离 |\ | |2. 选项栏高度：支持调整tab栏的高度 |\ | |3. 选项栏背景色：设置选项栏整体的背景颜色 |\ | |4. 各选项间距：设置tab之间的距离 |\ | |5. 选项背景：支持设置各选项一致、各选项不一致 |\ | | 1. 各选项一致时： |\ | | * 只需要设计选中状态和未选中状态两张图片； |\ | | * 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。 |\ | | |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7de72742d9c34c6c97b017d0950d8413~tplv-goo7wpa0wc-image.image =596x) |\ | | |\ | | 4. 各选项不一致时： |\ | | * 需要为每张选项卡设计选中状态和未选中状态两张图片。 |\ | | * 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。 |\ | | |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/007582561004419687dd8e1f73069cd6~tplv-goo7wpa0wc-image.image =592x) |\ | | |\ | |6. 在最下方可以添加更多选项 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/70b7b2658afa4318ac9275fd7d9abd1c~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c1b524005a9f4cfc89c5026289e0309b~tplv-goo7wpa0wc-image.image =2170x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | **只有两个选项时，如何配置？** 在探索版选项卡的默认状态下，如果只有两个选项的情况下会靠左展示，选项卡宽度会根据上传图片自动撑开；建议设计尺寸：宽度：335px，外边距：20，选项间距：40。如果外边距和选项卡距离有所改变请自行计算宽度。计算方法：选项宽度=（750-外边距*2-选项间距）/2

##### （3）箭头选项卡 **组件效果** 可以通过对左右箭头的点击实现不同块内容之间的切换,两个tab之间的切换会有动画效果

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7efeed94ae104236982093e7a6d77627~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加箭头选项卡组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b0f42e6c733f44e393ebede20cf656c1~tplv-goo7wpa0wc-image.image =2814x) |**step2: 设置箭头选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 默认选中项：选择初始默认展示的tab |\ | |4. 选项栏背景图片：支持替换tab栏的背景图片 |\ | |5. 左右箭头图标：支持替换左箭头和右箭头的图片 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6757feee01c24124a405234f2c05ae9e~tplv-goo7wpa0wc-image.image =2812x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1b9dfac0467241f59cb933262daec565~tplv-goo7wpa0wc-image.image =2156x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | #### 2.5 答题类答题类组件目前主要用于趣味答题、性格测试等**前端**页面内容，没有关联玩法规则，不会记录用户的答题数据，仅用于用户趣味引流和分享。 ##### （1）知识问答 **组件效果** 答题可以区分正确和错误，存在正确/错误提示，问题内容可以是图片或文字（该组件只有一个正确答案，答对可以增加分值）

**知识问答配置流程（以图片为例）** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3be0dbd565eb420aa4ae8d362d2449c6~tplv-goo7wpa0wc-image.image =2184x) |**step1: 添加知识问答组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/783e78a7466444eebbe93376a67ce193~tplv-goo7wpa0wc-image.image =624x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c09c9082241c45a88eeb6c249a12d40e~tplv-goo7wpa0wc-image.image =604x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4d2a1378c99f49e3adf1cc7a47cbae98~tplv-goo7wpa0wc-image.image =582x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1d67cd54fc454543a3e8aa25e84eb6f0~tplv-goo7wpa0wc-image.image =590x) |**step2: 知识问答设置** |\ | |一个问答组件对应一道题目，在不同页面添加对问答组件，可以实现答题跳转的效果。 |\ | |选中组件进行如下设置： |\ | | |\ | |1. 设置组件的图层、大小位置 |\ | |2. 选项类型：支持选择图片、文字类型的选项 |\ | |3. 本题分值：设置本题分值 |\ | |4. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间 |\ | |5. 选中图标：用户选中答案的图标默认是一个灰色背景的图标，可以重新上传设计好的图片 |\ | |6. 选项内容：知识问答组件默认有四个选项，可以手动添加、删减选项 |\ | | 1. 选项的图片可以删除，重新上传设计好的图片 |\ | | 2. 知识问答组件支持勾选正确答案，用户只有选中正确答案，才得分 |\ | | 3. 不勾选则默认为错误答案 |\ | | 4. 可以手动增加选项，选项数量没有限制 |\ | |7. 正误反馈：用户选择正确/错误答案的反馈设置，可以选择无、Toast、图片和弹窗 |\ | |8. 支持设置背景和边框样式 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/50213013dde74dac99fda4a0f2249154~tplv-goo7wpa0wc-image.image =1730x) |**step3: 答题通用配置** |\ | |点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。 |\ | | |\ | |1. 跳转规则： |\ | | 1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个 |\ | | 2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数 |\ | |2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答 | ##### （2）测试测评 **组件效果** 答题不区分正误，每个选项有不同分值，不提供正误反馈，问题内容可以是图片或文字（该组件无标准答案，每个答案都有对应的分值）

**测试测评配置流程（以文字为例）** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2836ccafdd214c5ea7e41bb21c6e395e~tplv-goo7wpa0wc-image.image =2166x) |**step1: 添加测试测评组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/71f57f3cf09140b88f225d0bb786fe21~tplv-goo7wpa0wc-image.image =608x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e5b1fab65b9946b0a35c27ee4fdfaee9~tplv-goo7wpa0wc-image.image =594x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/beaa02879261482aa7f602c1a476a129~tplv-goo7wpa0wc-image.image =592x) |**step2: 测试测评设置** |\ | |一个测评组件对应一道题目，在不同页面添加对测评组件，可以实现答题跳转的效果。 |\ | |选中组件进行如下设置： |\ | | |\ | |1. 设置组件的图层、大小位置 |\ | |2. 选项类型：支持选择图片、文字类型的选项 |\ | |3. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间 |\ | |4. 选项内容：测试测评组件默认有四个选项，可以手动添加、删减选项 |\ | | 1. 选项的对应文案可以手动编辑 |\ | | 2. 每个选项的分值需要手动输入 |\ | | 3. 每个选项不区分正误 |\ | | 4. 可以手动增加选项，选项数量没有限制 |\ | |5. 选中文字色：可以设置选中选项时的文字颜色 |\ | |6. 选中背景色：可以设置选中选项时的背景颜色 |\ | |7. 支持设置背景和边框样式 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/388e7744021e4f0b96ad2dec91cbfa3d~tplv-goo7wpa0wc-image.image =1716x) |**step3: 答题通用配置** |\ | |点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。 |\ | | |\ | |1. 跳转规则： |\ | | 1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个 |\ | | 2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数 |\ | |2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答 | ##### （3）答题得分 **组件效果** 自动根据知识问答组件、测试测评组件累计用户最终得分并展示分数。

**答题得分配置** | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6e3f131a39f840189dac1096118cafdb~tplv-goo7wpa0wc-image.image =606x) |1. 可以设置基础分数，最终得分将在此基础上加总 |\ | |2. 可以选择字体、字号、字体颜色，以及加粗、下划线、斜体等样式设置 | ##### （4）重做按钮 **组件效果** 从得分页跳转测试开始页面，可以重新作答。

**重做按钮配置** | | | \ |示意图 |详细说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aa51576b58884e5fb9e7957c80462a04~tplv-goo7wpa0wc-image.image =606x) |1. 跳转页码：点击按钮后跳转的页面 |\ | |2. 重做按钮的样式可以手动上传设计图样 | #### 2.6 音视频 ##### （1）视频 **组件场景** 本地上传视频素材，或者利用内部服务器生成的链接承载可在当前页面播放的视频（注意：最好上传横屏视频，竖屏视频不会自适应，竖屏视频播放效果如下）。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4fd527af5baf40bb8fe2d609394d2474~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加视频组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e0faa098604e4f4e975aa4f04b76f380~tplv-goo7wpa0wc-image.image =630x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/afbdfc2fb03942f5a948234c751fa50e~tplv-goo7wpa0wc-image.image =598x) |**step2: 视频设置** |\ | | |\ | |1. 设置视频组件的图层、位置大小 |\ | |2. 选取视频方式： |\ | | 1. 输入URL：需要手动填写视频地址URL，将链接前的【https:】删掉，保留【//】以后的链接，填入地址 |\ | | 2. 选择素材：选择上传至素材管理的视频 |\ | |3. 进入页面自动播放：开启后，打开页面时自动播放该视频内容 |\ | |4. 上传视频封面：系统不会自动抓取视频封面，不上传的话会出现魔方的兜底封面 |\ | |5. 边框：根据需求调整边框样式 |\ | | |\ | | | ##### （2）音频 **组件场景** 可点击后播放/暂停音频文件，也可隐藏按钮设置自动播放（用户对页面进行任意交互后自动播放），通常用作整个活动的背景音乐。 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3870e5caad6d44b89b797a32da4451ec~tplv-goo7wpa0wc-image.image =2170x) |**step1: 添加音频组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e8830ba73f21458dab693e92f964c9bc~tplv-goo7wpa0wc-image.image =598x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8fb7a0aa0e724001a719917007057b6d~tplv-goo7wpa0wc-image.image =598x) |**step2: 音频设置** |\ | | |\ | |1. 设置音频组件的图层、位置大小 |\ | |2. 选取音频素材：选择上传至素材管理的音频 |\ | |3. 自动播放：开启后，用户对页面进行交互时(例如滑动页面)可自动播放音频 |\ | |4. 展示音频按钮：设置是否展示音频按钮 |\ | |5. 旋转动画：设置是否开启旋转动画（开启后播放按钮会旋转），会自动循环播放，一遍放完会重复播放第二遍，直到用户关闭页面 |\ | |6. 音频按钮样式：支持修改播放和暂停状态的按钮样式 | #### 2.7 动画效果 ##### （1）计时器 **组件效果** 用于展示距特定时间的正计时和倒计时。 | | | \ |倒计时 |正计时 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/cf50c4b06d004f4fb58f047ae6d73335~tplv-goo7wpa0wc-image.image =488x) |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ebb1473b117c442399383dbb2534894d~tplv-goo7wpa0wc-image.image =488x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/40b5ea00635c444e9c8bf88415064765~tplv-goo7wpa0wc-image.image =2172x) |**step1: 添加计时器组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/69539cda4eaa46d182bb1f14df9c0176~tplv-goo7wpa0wc-image.image =594x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e7b29eb2837540ec910fa99e85648e46~tplv-goo7wpa0wc-image.image =600x) |\ | |**step2: 计时器设置** |\ | | |\ | |1. 设置计时器组件的图层、位置大小 |\ | |2. 计时方式：设置正计时/倒计时 |\ | |3. 截止/开始时间：对于倒计时来说，时间要设置在未来，对于正计时来说，时间要设置在过去 |\ | |4. 展示文案：默认为“计时：”，可以修改其他文案 |\ | |5. 时间展示格式：可以选择展示哪些时间格式，包括天、小时、分、秒，支持修改格式展示名称 |\ | |6. 设置背景和边框，不用的话可以不勾选 | ##### （2）跑马灯 **组件效果** 可以进行文字内容的滚动播放，比如用作弹幕、留言墙效果 | | | \ |向左滚动 |向上滚动 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c39ce558e88f4a9c86c8c7638415643d~tplv-goo7wpa0wc-image.image =488x) |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/626b5d31816f4c18a6ea43a5ffc83117~tplv-goo7wpa0wc-image.image =488x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d96733da74b242a88477b932805dc893~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加跑马灯组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/25045c77976a46b3bcc7b5da5293fa55~tplv-goo7wpa0wc-image.image =626x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/39bbaef052cf47339a929fb9c6196ab8~tplv-goo7wpa0wc-image.image =590x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5af9bc30f8c341bfa965b0f99c3e4ad4~tplv-goo7wpa0wc-image.image =594x) |**step2: 跑马灯设置** |\ | | |\ | |1. 设置跑马灯组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 添加或移除跑马灯选项 |\ | | 2. 滚动方向：向上或向左滚动 |\ | | 3. 滚动周期：即滚动一遍所需时长，单位为秒 |\ | | 4. 内容间距：不同选项之间的距离 |\ | |3. 设置选项字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |4. 设置背景和边框，不用的话可以不勾选 | ##### （3）Lottie动画 **组件效果** 在H5页面中展示动态图片，与gif图效果类似，但lottie动画的源文件格式在页面上展示会更加高清和流畅。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/64d3f63d4b2545d1b250211534870424~tplv-goo7wpa0wc-image.image =2172x) |**step1: 添加Lottie动画组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aff01addd4b746079ef1d2c5c7308657~tplv-goo7wpa0wc-image.image =598x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/dd3c56c50cea484cb5200ee6cbe9d4f7~tplv-goo7wpa0wc-image.image =584x) |**step2: Lottie动画设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 交互动作：点击「编辑交互动作」，可以设置动画区域点击后，跳转页面、打开弹窗等等动作 |\ | |3. 内容设置： |\ | | 1. 上传lottie动画文件：点击「重新上传」上传文件，支持zip的压缩文件格式，可由设计师直接从adobe等软件直接导出 |\ | | 2. 循环播放：开启后，默认自动循环播放动画，若关闭则只会播放一次 |\ | | 3. 播放完成后不显示：关闭「循环播放」后，可以开启此项，即播放一次之后隐藏动画 |\ | | 4. 点击穿透：开启后，用户点击动画区域则相当于点击动画底层的内容，例如动画底层有一个按钮，则用户点击的时候触发的是按钮 | #### 2.8 其他 ##### （1）复制文本 **组件效果** 给定一串文字，用户点击文字旁边的button能一键复制你的文字，可用于复制链接/邀请码等场景。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2c839350500b433f8a2fbc36fa8372fe~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加复制文本组件** | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a0432214ffe749b79f9a9262638f00a4~tplv-goo7wpa0wc-image.image =604x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e923137f8cba407f8d596155dc984c35~tplv-goo7wpa0wc-image.image =580x) |**step2: 复制文本设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 展示文本：支持修改展示的文本内容 |\ | |3. 实际复制文本：支持修改用户实际复制的文本内容 |\ | |4. 提示信息：复制成功的反馈提示，包含Toast、图片、弹窗、无 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2f1ebf68a80a43c5ac4c6a70d2f2a385~tplv-goo7wpa0wc-image.image =1694x) |**step3: 复制文本文字元素设置** |\ | | |\ | |1. 设置文字的图层、位置大小 |\ | |2. 设置文本样式、背景和边框 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/eb807a06e1584c66bd31f9afaad4996f~tplv-goo7wpa0wc-image.image =1698x) |**step4: 复制文本按钮元素设置** |\ | | |\ | |1. 设置按钮的位置大小、可见度 |\ | |2. 修改按钮的样式，支持图片、填充的背景类型 |\ | | |\ | | | ##### （2）下拉选择跳转 **组件效果** 点击后展开预先设置的列表，用户自主选择选项后跳转到该选项对应的页面（链接）中。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/902a4b1538714752974d200882b94f07~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加下拉选择跳转组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4fea1fc6bcdc4458949286fe541a13c0~tplv-goo7wpa0wc-image.image =594x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a9b7b24a51de447c94bde76db1e765f3~tplv-goo7wpa0wc-image.image =588x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/13fad18eca0e4ac9bc7a3ca49b10c170~tplv-goo7wpa0wc-image.image =590x) |**step2: 下拉选择跳转设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 展示文案：可以修改下拉框展示的文案 |\ | |3. 选项内容：设置不同选项的展示文案和点击后跳转的url，链接需要是//开头 |\ | | * 比如你平时获取的链接是https://www.bytedance.com/zh/ |\ | | * 那么你在这里要填的是//www.bytedance.com/zh/ |\ | |4. 展开图标、收起图标：可以上传图片替换图标 |\ | |5. 设置背景和边框，不用的话可以不勾选 | #### 2.9 通用玩法组件 **了解前端组件与后端玩法功能的关系** 1. 前端组件、后端玩法是什么：一个活动必须配置前端组件和后端玩法。前端组件是指编辑器左侧的各种组件，用来配置活动页面上各种展示信息，如图片、文字等。 2. 后端玩法是指互动玩法规则内的各种玩法，用来控制活动逻辑，不会直观展示在活动页面上，如玩法类型、活动时间、奖励设置、黑白名单等。 ##### （1）玩法跑马灯 **组件效果** 可以进行用户中奖信息的滚动播放，与动画效果组件中的「跑马灯」不同之处在于，「玩法跑马灯」需要关联一个玩法规则。 | | | \ |横向滚动 |纵向滚动 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/880c555c174e422d8ca3d46368c9d14b~tplv-goo7wpa0wc-image.image =604x) |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/693f182b8df34d7d90f7ebe119bd96e0~tplv-goo7wpa0wc-image.image =616x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7fc7f62b24a1408393430fb26b2dc4e4~tplv-goo7wpa0wc-image.image =2180x) |**step1: 添加玩法跑马灯组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a433a7651d714e02b29d63b2a456b483~tplv-goo7wpa0wc-image.image =596x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fea32303c4404bf79971cbb7cf53958c~tplv-goo7wpa0wc-image.image =588x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8c2dcf243a0e460f9bd14a5bd351a475~tplv-goo7wpa0wc-image.image =584x) |**step2: 玩法跑马灯设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据，例如关联抽奖玩法，轮播内容将展示中奖信息 |\ | | 2. 轮播文本：设置部分轮播文本 |\ | |3. 轮播样式：可以设置横向轮播、纵向轮播，实际中奖信息将展示用户进入界面时，最近30条中奖用户数据，循环滚动 |\ | |4. 可配文本样式：设置可配文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |5. 用户及奖品信息样式：设置用户及奖品信息的文吧样式，配置内容同上 |\ | |6. 设置背景和边框，不用的话可以不勾选 | ##### （2）奖品展示点击按钮展示用户已获得的奖品，该组件可以关联一个或多个玩法，可以查看所有玩法获得的奖励。 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0e784e7313f44c949fd8d3591e2aea44~tplv-goo7wpa0wc-image.image =2186x) |**step1: 添加奖品展示组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1d34a33b9e0646fab247d46a554401aa~tplv-goo7wpa0wc-image.image =614x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a8cac64dcc1f4314823c54812c5aa4d0~tplv-goo7wpa0wc-image.image =594x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a98dc590ef61424fbdbcbe725b1f124a~tplv-goo7wpa0wc-image.image =592x) |**step2: 奖品展示设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据 |\ | |3. 我的奖品按钮样式：支持修改按钮样式以及显示的文本内容 |\ | |4. 设置按钮文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c7d202d692c3405a80adfe6adc332275~tplv-goo7wpa0wc-image.image =1738x) |**step3: 相关页配置-地址填写页** |\ | | |\ | |1. 设置地址填写页的位置大小、可见度、圆角 |\ | |2. 弹窗设置：开启后将展示勾选条款 |\ | |3. 字段设置：设置需要填写的表单字段 |\ | |4. 校验规则：设置提交成功、未勾选协议提交的反馈文案 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5cb7834d6f684e948c1b5d924278c980~tplv-goo7wpa0wc-image.image =1696x) |**step4: 相关页配置-兑换码详情页** |\ | | |\ | |1. 设置兑换码详情页的位置大小、可见度、圆角 |\ | |2. 设置背景和边框，不用的话可以不勾选 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/351292c73dc34e1e9ce953eef6d098da~tplv-goo7wpa0wc-image.image =1706x) |**step5: 相关页配置-我的奖品页** |\ | | |\ | |1. 设置我的奖品页的位置大小、可见度、圆角 |\ | |2. 设置背景和边框，不用的话可以不勾选 | #### 2.10 玩法任务组件 **任务组件功能亮点** * 任务列表组件支持结合规则批量设置规则下的任务，通过任务获得奖励。 * 提供任务列表形式，支持多个任务同一组件配置。 * 提供任务组件的多样式选择，节约配置时间。 * 任务组件支持多个玩法自由选择。例如：抽奖+任务。后续会支持：任务+兑换、任务+投票等玩法联动。（注：本章节仅介绍组件相关样式配置，具体玩法逻辑请参考“互动玩法”） ##### （1）任务列表组件

**搭建case分享** 「任务列表组件」可以关联的任务类型包括：点击任务、行为事件任务、用户分群任务、自定义任务。（无法关联分享任务、提交表单任务，分享任务有单独的「分享任务组件」，提交表单任务有「报名按钮」组件） | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c5a8226fced045ffa56477d7a58407d5~tplv-goo7wpa0wc-image.image =2166x) |**step1: 添加任务列表组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b5925616db19472faf6f2fee83a3ac3d~tplv-goo7wpa0wc-image.image =598x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9f30ad1a6a0e42fb98462cd0713a5e5f~tplv-goo7wpa0wc-image.image =584x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a7b524760011475bad417c9623e900cf~tplv-goo7wpa0wc-image.image =576x) |**step2: 任务列表组件设置** |\ | | |\ | |1. 设置任务列表组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择配置好的含有多个任务的玩法规则。 |\ | | 2. 选择任务&任务触发机制：选择玩法规则后，在下方选择任务并配置任务触发机制，例如选择「观看视频任务」，触发配置「跳转链接」。 |\ | |3. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供两种样式 |\ | |4. 反馈：主要针对用户点击【去做任务】按钮后，不同场景提示内容的配置 |\ | | 1. 任务已完成：若当前用户已完成此任务，会出现该提示 |\ | | 2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录，会出现错误提示。 |\ | | 3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容 |\ | | 4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容 |\ | | 5. 命中黑名单：用户在黑名单内时的提示内容 |\ | | 6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容 |\ | | 7. 参与机会不足：用户参与玩法机会不足的提示内容 |\ | | 8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容 |\ | | 9. 频繁点击：频繁点击时的提示内容 |\ | | 10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5837a6622bfb4cbfb572359e687057d2~tplv-goo7wpa0wc-image.image =1704x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ec70cd8b88c34dbc9a830c34f7d8d5f9~tplv-goo7wpa0wc-image.image =1694x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53a17d8387f14151b5e33e78eb90854b~tplv-goo7wpa0wc-image.image =1696x) |**step3: 组件内元素样式设置** |\ | |选中组件中的按钮、文本、图片等元素，可以进行元素样式设置 |\ | | | ##### （2）分享任务组件

**搭建case分享** 「分享任务组件」可以关联的任务类型包括：分享任务，添加分享任务组件可以通过分享任务获取相应的奖励。 | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2048b08455834983861403a0d47922ad~tplv-goo7wpa0wc-image.image =2194x) |**step1: 添加分享任务组件** |\ | | | | | | \ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a2ef7b4e283747739e0777188078d00b~tplv-goo7wpa0wc-image.image =610x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/79807c910da344d9b3b7ad00c94b7023~tplv-goo7wpa0wc-image.image =590x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d91634f63adb4807aeb64c814f505b2b~tplv-goo7wpa0wc-image.image =576x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/81b81d0f147946189ae6ae251b35d699~tplv-goo7wpa0wc-image.image =586x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2ae5a0b3bad14ee4a333c07efa14aec8~tplv-goo7wpa0wc-image.image =578x) |\ |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/35aa43d3f77d4f78bbdfb1822edaeead~tplv-goo7wpa0wc-image.image =576x) |**step2: 分享任务组件设置** |\ | | |\ | |1. 设置分享任务组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择含有分享任务的玩法 |\ | | 2. 选择任务：选择玩法规则后，在下方选择分享任务 |\ | |3. 分享设置： |\ | | 1. 分享内容：支持分享当前活动链接、公众号二维码、其他链接 |\ | | 2. 分享方式：支持海报/二维码、端内分享+海报兜底，详情参考「2.1基础类-分享按钮组件」 |\ | |4. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供四种样式 |\ | | |\ | |![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a14b27ba4e6d42f093fe7e407c931eaf~tplv-goo7wpa0wc-image.image =1036x) |\ | | |\ | |5. 按钮状态样式设置：支持修改未完成/已完成状态的样式，建议将「未完成分享」的背景配置为亮色，将「已完成分享」的背景配置为暗色，提高用户感知。 |\ | |6. 反馈：主要针对用户点击【分享得奖励】或【去分享】按钮后，不同场景提示内容的配置 |\ | | 1. 任务已完成：若当前用户已完成此任务，会出现该提示 |\ | | 2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录，会出现错误提示。 |\ | | 3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容 |\ | | 4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容 |\ | | 5. 命中黑名单：用户在黑名单内时的提示内容 |\ | | 6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容 |\ | | 7. 参与机会不足：用户参与玩法机会不足的提示内容 |\ | | 8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容 |\ | | 9. 频繁点击：频繁点击时的提示内容 |\ | | 10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | | 11. 分享中断未完成：用户未完成分享的提示内容 |\ | |7. 设置背景和边框，不用的话可以不勾选 | ##### （3）通用任务组件 **搭建case分享** 「通用任务组件」可以关联的任务类型包括：点击任务、行为事件任务、用户分群任务、自定义任务。（无法关联分享任务、提交表单任务，分享任务有单独的「分享任务组件」，提交表单任务有「报名按钮」组件）

增长营销平台