Skip to Content
UI 搭建参考手册页面与弹窗

页面与弹窗参考

页面和弹窗都是承载 UI 的界面单元,都可以包含组件树,并支持设计、数据和行为配置。

对象定义

对象管理位置打开方式典型用途
页面左边栏「页面」列表通过路由、导航或跳转访问首页、列表页、详情页、个人中心页
弹窗左边栏「弹窗」列表通过「打开弹窗」行为唤起确认框、表单弹层、详情弹层、抽屉

设计

页面和弹窗都可以配置尺寸、布局、样式等通用设计项。通用字段见 设计面板参考

页面专属配置

配置项适用客户端说明
网页路径网页当前页面在浏览器中的访问路径。
网页标题网页浏览器标签页中显示的标题。
SEO 设置网页配置标题、描述、关键词及分享缩略图等搜索和分享信息。
是否为初始屏幕网页配置当前页面是否作为网页端初始展示页面。
导航栏微信小程序是否使用微信原生顶部导航栏。
分享给朋友微信小程序配置小程序页面分享给好友时的标题与图片。
底部导航栏微信小程序配置微信原生底部 Tab 导航,通常用于主要页面入口。

弹窗专属配置

配置项说明
尺寸配置弹窗宽度、高度等显示尺寸。
位置配置弹窗在视口中的显示位置。
点击蒙版关闭配置用户点击背景蒙版时是否关闭弹窗。
💡

弹窗内部是一块独立画布,可以像页面一样添加文本、按钮、输入框、列表等组件。

数据

页面和弹窗都可以承载数据上下文。数据配置用于让内部组件读取数据或在行为中传参。

配置项页面弹窗
数据源页面级查询/订阅,常用于整页共享查询结果。弹窗级查询/订阅,常用于弹窗内部展示详情或加载表单数据。
变量页面运行期间的临时状态。弹窗运行期间的临时状态。
输入 / 入参页面可通过路径参数、查询参数等接收外部数据。弹窗可在打开时接收输入数据。

数据绑定、数据源和参数的完整说明见 数据绑定变量参数

行为

页面和弹窗都可以配置行为,但触发时机不同。

对象常见触发时机 / 行为
页面页面加载时、页面卸载时、定时任务等。
弹窗弹窗内部组件点击、提交表单、关闭弹窗等。

页面加载行为常用于初始化页面状态,例如设置变量、请求数据或打开提示。定时任务适合按时间间隔触发的前端行为。

弹窗通常由页面或组件上的行为打开,并在弹窗内部通过按钮等组件关闭或提交。

动作说明
打开弹窗在页面或组件行为中选择目标弹窗,并按需传入输入数据。
关闭弹窗在弹窗内部组件行为中关闭当前弹窗或指定弹窗。

行为模型和动作列表见 行为配置

使用建议

场景建议
需要一个可访问的主界面使用页面。
需要临时显示确认、表单或详情使用弹窗。
多个组件都要使用同一份数据放在页面或弹窗的数据源中。
弹窗要展示当前列表行数据打开弹窗前,将当前列表项数据作为输入传入,或先写入页面变量。

相关阅读

Last updated on