其他类组件
其他类组件涵盖进度展示、动画播放、地理位置展示、数据表格、日历、相机预览、微信生态组件等相对独立的场景能力。
本篇手册按组件结构化列出：定义（含基础使用场景）、个性化配置、数据源配置、行为触发器及特殊限制说明（各组件按需呈现相应章节）。
本篇只列出各组件的专属配置、数据源配置和行为配置。位置、尺寸、布局、样式、文本等通用设计字段见 设计面板参考。
包含组件与核心属性
| 组件名称 | 支持的客户端 | 数据源配置 | 行为配置 |
|---|---|---|---|
| 进度条 | 网页端、移动端 App | — | ✓ |
| Lottie 进度条 | 微信小程序 | — | ✓ |
| 分割线 | 网页端、微信小程序、移动端 App | — | — |
| 动画 (Lottie) | 网页端、微信小程序、移动端 App | — | ✓ |
| 地图 | 网页端、微信小程序、移动端 App | 仅多标记点 ✓ | 仅标记点 ✓ |
| 表格 | 网页端 | ✓ | — |
| 日历 | 网页端 | — | ✓ |
| 相机 | 微信小程序 | — | — |
| 微信广告栏 | 微信小程序 | — | — |
| 微信关注公众号 | 微信小程序 | — | — |
进度条
组件定义
用于展示数值型进度，例如任务完成度、上传进度、审核进度等。进度条会用「当前进度 / 总进度」计算展示比例，可显示为线条或圆形。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 条形 | 枚举 | 线条 / 圆形 | 全平台 | 设置进度条的展示形态：水平线条或圆形进度环。 |
| 显示格式 | 枚举 | 无 / 百分比 / 数值 | 全平台 | 控制进度文字的展示方式：不显示文本、显示百分比、或显示当前进度数值。 |
| 当前进度 | 整数 | 0 | 全平台 | 当前进度值，支持数据绑定。 |
| 总进度 | 整数 | 100 | 全平台 | 进度总量，用于和当前进度计算比例，支持数据绑定。 |
行为配置
支持的触发器包括：进度改变时。当 当前进度 或 总进度 的计算结果发生变化时触发。详细触发规则请参考：触发器参考。
Lottie 进度条
组件定义
微信小程序专用的 Lottie 动画进度组件。它不直接按百分比拉伸图形，而是根据当前进度映射到 Lottie 文件中的帧位置，用动画帧展示进度变化。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 上传 Lottie | 文件 | 空 | 仅微信小程序 | 上传符合 Lottie 规范的动画 JSON 文件作为完整的进度条动画。 |
| 当前进度 | 整数 | 空 | 仅微信小程序 | 进度条当前位置，支持数据绑定，必须为数字类型且不可为空。 |
| 总进度 | 整数 | 空 | 仅微信小程序 | Lottie 文件的总帧数。 |
| 步进值 | 整数 | 1 | 仅微信小程序 | 每次变化的最小单位（帧）。 |
行为配置
支持的触发器包括：进度改变时。详细触发规则请参考：触发器参考。
分割线组件
组件定义
用于在页面元素或区块之间绘制线条，常用于内容分隔、区域边界提示或轻量装饰。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 线型 | 枚举 | 实线 / 虚线 | 全平台 | 设置线条为实线或虚线。 |
| 线宽 | 整数 | 默认值由组件样式决定（单位像素） | 全平台 | 控制线条粗细。水平线调整高度，垂直线调整宽度。 |
| 方向 | 枚举 | 水平 / 垂直 | 全平台 | 设置线条方向。切换方向时，编辑器会同步交换组件宽高，便于继续编辑。 |
| 线段长度 | 整数 | 默认空（单位像素） | 仅虚线 | 控制虚线中每段线的长度。 |
| 线段间距 | 整数 | 默认空（单位像素） | 仅虚线 | 控制虚线线段之间的间距。 |
行为配置
分割线属于纯视觉分隔组件，在 Zion 编辑器中不支持行为配置。
动画组件
组件定义
用于在页面中播放 Lottie 格式动画（JSON 文件）。常用于加载状态、引导动效、结果反馈等轻量动画场景。
设计资源可参考 LottieFiles 官方社区 。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| Lottie 文件 | 文件 | 空 | 全平台 | 上传 Lottie 格式动画 JSON 文件。 |
| 循环 | 布尔值 | false | 全平台 | 动画播放完毕后是否重新开始播放。 |
| 自动播放 | 布尔值 | true | 全平台 | 页面加载后是否自动播放。关闭后，可通过其他组件的行为控制动画播放。 |
动画设计规范与小程序端限制
为了保证微信小程序和移动设备上的加载稳定性，建议遵循以下规范：
- 文件大小：建议 JSON 文件控制在 1 MB 以内，最大不应超过 2 MB，否则低端机型可能加载失败。
- 帧率：建议动画帧率不超过 30 fps，复杂动画可适当降帧。
- 文本图层：若 AE 动画中包含文本，请在导出前执行“从文字创建形状”，避免字体在小程序端无法渲染。
- 表达式：小程序端不支持运行 AE 表达式。包含
wiggle等表达式时，请先在 AE 中将表达式转换为关键帧。 - 外部素材：小程序端不支持外部图片资源，尽量使用纯矢量动画，避免复杂遮罩和滤镜。
行为配置
支持的触发器包括：完成时。如需播放、暂停或重播动画，请在按钮等组件的行为中配置对应的动画操作。详细触发规则请参考：触发器参考。
地图组件
组件定义
用于展示地图、中心位置、当前位置和标记点。地图组件本身负责展示地理信息；点击交互配置在标记点上。
前置条件与服务注册
- 网页端：依托高德地图服务。请前往高德地图开放平台 注册账号，配置应用并生成 API Key 和安全密钥。API 调用选择 Web端服务，地图组件选择 Web端(JS API)。
- Zion 绑定配置：在「项目设置 - 全局 - 地图 API 密钥」填写对应的 API Key 和安全密钥。
- 微信小程序端：使用微信内置的腾讯地图服务，无需配置高德 Key。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 初始缩放 | 整数 | 1 至 19 | 全平台 | 设置地图初始缩放级别。数值越大，视野范围越小，街区和建筑显示越细。 |
| 周边信息 | 布尔值 | false | 全平台 | 是否显示地图周边的商家、地标等信息。 |
| 当前位置 | 布尔值 | false | 全平台 | 开启后，运行时会请求用户定位权限，并在地图中显示用户当前位置。 |
| 中心点 | 地理位置 / JSON | 默认天安门附近 | 全平台 | 设置地图初始化时的中心位置，支持数据绑定。 |
| 标记点 | 开关 | 关闭 | 全平台 | 开启后生成标记点子组件，可配置单个或多个标记点。 |
| 多标记点 | 布尔值 | false | 开启「标记点」后 | 开启后按数据源数组渲染多个标记点。 |
| 数据源 | 数组 | 默认空 | 开启「多标记点」后 | 绑定包含经纬度、标记名称、图标等字段的数据列表。 |
标记点配置
开启 标记点 后，可进入标记点子组件配置以下属性。
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 说明 |
|---|---|---|---|
| 图标 | 图片 | 默认空 | 设置标记点图标，支持上传图片或数据绑定。 |
| 标记名称 | 文本 | 默认空 | 设置标记点名称，支持数据绑定。 |
| 经纬度 | 地理位置 / JSON | 空 | 设置该标记点在地图上的坐标。多标记点模式下通常绑定当前数据项中的经纬度字段。 |
经纬度数据获取与转换步骤
由于国内地图坐标系安全保护限制，不同地图服务商存在坐标偏移。若需要在 Zion 中精准定位和展示标记点，需进行如下校正转换：
- 获取原始坐标：登录高德地图坐标拾取器 ，搜索具体地标位置并复制坐标。
- 坐标转换：登录第三方坐标转换工具 ，按工具步骤完成坐标纠偏。
- 数据录入：在 Zion 数据库的经纬度字段或组件经纬度属性中填入转换后的坐标。
功能边界与约束限制
- 单点与多点标记：单标记点直接配置标记点属性；多标记点需要绑定包含经纬度字段的数据源数组。
- 不支持选点：地图仅用于展示位置，不能通过点击地图获取坐标。
行为配置
地图组件本身不支持行为配置。交互逻辑配置在标记点子组件上，支持的触发器包括：点击时，例如点击门店标记点后打开详情弹窗。详细触发规则请参考：触发器参考。
表格组件
组件定义
网页端专用的数据表格组件，用于展示多行、多列结构化数据，常见于后台管理、报表、数据列表等场景。表格可绑定数据表，选择展示列，并通过行为导出数据。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 行高 | 长整数 | 默认空（单位像素） | 仅网页端 | 设置表格数据行高度。 |
| 表头 | 样式 | 默认配置 | 仅网页端 | 配置表头背景色、文字颜色和字号。 |
| 表尾 | 样式 | 默认配置 | 仅网页端 | 配置表尾背景色、文字颜色和字号。 |
| 单元格 | 样式 | 默认配置 | 仅网页端 | 配置表格分割线颜色和粗细。 |
数据源配置
注：此配置项集成在右侧面板独立的「数据」标签页中。
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 说明 |
|---|---|---|---|
| 数据源 | 数据表 | 默认空 | 选择要展示的数据表。选择后可继续配置筛选、排序、订阅/查询方式和请求限额。 |
| 数据列 | 数组 | 默认空 | 选择要展示的数据列，并配置列标题、列宽和显示顺序。默认列宽约 140 像素。 |
行为配置
表格组件本身不支持组件级触发器。若需要导出表格数据，可在按钮等组件的行为中配置「表格导出」操作，将当前表格数据导出为 Excel（.xlsx）或 CSV 文件。
日历组件
组件定义
网页端专用的日历组件，用于展示月历并响应用户点击日期的操作。支持默认选中日期、深色模式和高亮今日。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 选中的日期 | 文本 / 日期 | 空 | 仅网页端 | 页面打开时默认选中的日期，支持数据绑定。建议使用 YYYY-MM-DD 格式。 |
| 深色模式 | 布尔值 | false | 仅网页端 | 开启后切换为深色日历样式，并同步调整组件背景色。 |
| 高亮今日 | 布尔值 | true | 仅网页端 | 是否在日历中高亮当前系统日期。 |
行为配置
支持的触发器包括：点击日期事件。用户点击某一天时触发，可用于设置变量、查询当天日程或打开详情弹窗。详细触发规则请参考：触发器参考。
相机组件
组件定义
微信小程序专属组件，用于在页面内显示实时摄像头预览画面。相机组件只负责展示取景画面；拍照、录像、切换摄像头等操作需要通过其他组件的行为触发。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 相机位置 | 枚举 | 后置 / 前置 | 微信小程序 | 指定默认使用后置摄像头还是前置摄像头。 |
| 闪光灯 | 枚举 | 自动 / 开 / 关 / 手电筒 | 微信小程序 | 设置闪光灯状态：自动、开启、关闭或常亮。 |
| 画面大小 | 枚举 | 小 / 中 / 大 | 微信小程序 | 设置相机帧数据尺寸。 |
| 分辨率 | 枚举 | 低 / 中 / 高 | 微信小程序 | 设置预览画面的分辨率。 |
行为配置
相机组件本身不支持触发器。如果需要拍照、录制视频或切换前后摄像头，请在按钮等组件的点击行为中配置「相机操作」。
微信广告栏组件
组件定义
微信小程序专用的腾讯官方流量主广告组件，用于展示小程序广告位。未开通小程序流量主能力时，该组件不会产生实际广告效果。
个性化配置项
| 属性名称 | 预期数据类型 | 默认值 / 可选项 | 适用平台与条件 | 说明 |
|---|---|---|---|---|
| 广告 ID | 文本 | 空 | 仅微信小程序 | 填入小程序流量主管理后台生成的广告位 ID。为空时，运行时不会展示有效广告内容。 |
行为配置
广告展示、点击和跳转由微信官方广告组件处理，Zion 中不支持行为配置。
微信关注公众号组件
组件定义
微信小程序专用的关注卡片，用于展示与当前小程序关联的微信公众号，引导用户关注。
配置与规格约束
- 绑定要求：小程序与公众号需在微信公众平台完成同主体关联，否则组件无法正常展示。
- 配置项：该组件没有专属属性配置，展示样式由微信官方组件决定。
行为配置
关注行为由微信官方组件处理，Zion 中不支持行为配置。