页面与弹窗参考
页面和弹窗都是承载 UI 的界面单元,都可以包含组件树,并支持设计、数据和行为配置。
对象定义
| 对象 | 管理位置 | 打开方式 | 典型用途 |
|---|---|---|---|
| 页面 | 左边栏「页面」列表 | 通过路由、导航或跳转访问 | 首页、列表页、详情页、个人中心页 |
| 弹窗 | 左边栏「弹窗」列表 | 通过「打开弹窗」行为唤起 | 确认框、表单弹层、详情弹层、抽屉 |
设计
页面和弹窗都可以配置尺寸、布局、样式等通用设计项。通用字段见 设计面板参考。
页面专属配置
| 配置项 | 适用客户端 | 说明 |
|---|---|---|
| 网页路径 | 网页 | 当前页面在浏览器中的访问路径。 |
| 网页标题 | 网页 | 浏览器标签页中显示的标题。 |
| SEO 设置 | 网页 | 配置标题、描述、关键词及分享缩略图等搜索和分享信息。 |
| 是否为初始屏幕 | 网页 | 配置当前页面是否作为网页端初始展示页面。 |
| 导航栏 | 微信小程序 | 是否使用微信原生顶部导航栏。 |
| 分享给朋友 | 微信小程序 | 配置小程序页面分享给好友时的标题与图片。 |
| 底部导航栏 | 微信小程序 | 配置微信原生底部 Tab 导航,通常用于主要页面入口。 |
弹窗专属配置
| 配置项 | 说明 |
|---|---|
| 尺寸 | 配置弹窗宽度、高度等显示尺寸。 |
| 位置 | 配置弹窗在视口中的显示位置。 |
| 点击蒙版关闭 | 配置用户点击背景蒙版时是否关闭弹窗。 |
💡
弹窗内部是一块独立画布,可以像页面一样添加文本、按钮、输入框、列表等组件。
数据
页面和弹窗都可以承载数据上下文。数据配置用于让内部组件读取数据或在行为中传参。
| 配置项 | 页面 | 弹窗 |
|---|---|---|
| 数据源 | 页面级查询/订阅,常用于整页共享查询结果。 | 弹窗级查询/订阅,常用于弹窗内部展示详情或加载表单数据。 |
| 变量 | 页面运行期间的临时状态。 | 弹窗运行期间的临时状态。 |
| 输入 / 入参 | 页面可通过路径参数、查询参数等接收外部数据。 | 弹窗可在打开时接收输入数据。 |
数据绑定、数据源和参数的完整说明见 数据绑定、变量 和 参数。
行为
页面和弹窗都可以配置行为,但触发时机不同。
| 对象 | 常见触发时机 / 行为 |
|---|---|
| 页面 | 页面加载时、页面卸载时、定时任务等。 |
| 弹窗 | 弹窗内部组件点击、提交表单、关闭弹窗等。 |
页面加载行为常用于初始化页面状态,例如设置变量、请求数据或打开提示。定时任务适合按时间间隔触发的前端行为。
弹窗通常由页面或组件上的行为打开,并在弹窗内部通过按钮等组件关闭或提交。
| 动作 | 说明 |
|---|---|
| 打开弹窗 | 在页面或组件行为中选择目标弹窗,并按需传入输入数据。 |
| 关闭弹窗 | 在弹窗内部组件行为中关闭当前弹窗或指定弹窗。 |
行为模型和动作列表见 行为配置。
使用建议
| 场景 | 建议 |
|---|---|
| 需要一个可访问的主界面 | 使用页面。 |
| 需要临时显示确认、表单或详情 | 使用弹窗。 |
| 多个组件都要使用同一份数据 | 放在页面或弹窗的数据源中。 |
| 弹窗要展示当前列表行数据 | 打开弹窗前,将当前列表项数据作为输入传入,或先写入页面变量。 |
相关阅读
Last updated on