使用页面变量和页面参数

页面变量和页面参数都需要先在页面中声明名称和类型，但数据进入页面的方式不同：

• 页面变量保存页面运行期间可以修改的状态，按照“声明 → 赋值 → 引用”的方式使用。
• 页面参数接收打开页面时传入的数据，按照“目标页面声明 → 调用方传值 → 目标页面引用”的方式使用。

变量和参数的作用域及选择方法见变量和参数。

使用页面变量

页面变量属于声明它的页面，可以在页面运行期间多次读取和修改。

声明页面变量

打开目标页面，在 数据 → 变量中添加页面变量。

为页面变量赋值

在组件事件中添加 设置变量，然后完成以下配置：

1. 将作用域设为 页面和组件。
2. 选择目标页面变量。
3. 绑定要写入的值。

值可以来自固定值、组件输出、当前列表项、页面参数或前序行为结果。数组变量还可以根据行为配置执行设置、添加或移除。

引用页面变量

页面变量可以用于：

• 组件的数据绑定。
• 数据源的筛选、排序或其他参数。
• 条件数据。
• 前端行为的入参。
• 控制组件的内容、显示状态或样式。

页面变量属于当前页面实例。页面实例卸载后，当前值失效；再次打开页面时重新使用初始值。

示例：保存商品搜索条件

目标

保存商品列表页中的搜索关键字，并根据关键字筛选商品。

关键配置

• 在商品列表页声明文本页面变量 search_keyword。
• 在搜索按钮的点击事件中添加 设置变量，将输入框输出写入 search_keyword。
• 商品列表的数据条件引用 search_keyword。
• 变量为空时，通过条件数据使用不带搜索条件的数据源。

预期结果

修改搜索内容后，商品列表随页面变量更新。页面实例卸载后，search_keyword 恢复为初始值。

使用页面参数

页面参数是目标页面对外声明的输入。调用方打开目标页面时传入参数值，目标页面再在数据绑定或行为中读取这些值。

声明页面参数

打开目标页面，在 数据中添加路径参数或查询参数，并设置名称和类型。

从外部传入参数

在其他页面添加 跳转页面行为并选择目标页面后，配置面板会显示目标页面声明的参数。参数值可以绑定固定值、组件输出、当前列表项、页面变量或调用方上下文中的其他数据。

路径参数需要传入有效值；查询参数可以根据目标页面的配置留空。不同客户端支持的参数类型见导航行为。

在目标页面引用参数

目标页面可以在以下位置读取页面参数：

• 页面数据源的筛选、排序或其他参数。
• 组件的数据绑定。
• 条件数据。
• 页面加载时行为及其他前端行为的入参。

页面参数的值由页面跳转或页面地址提供。如果进入页面后还需要修改并反复使用该值，可以先将它写入页面变量。

示例：使用路径参数打开商品详情

目标

在 Web 端点击商品列表项，打开对应的商品详情页。

关键配置

• 在商品详情页声明路径参数 product_id，类型与商品表的 id 字段一致。
• 在商品卡片的 跳转页面行为中，将当前商品的 id 传给 product_id。
• 商品详情页的数据源使用“id 等于 路径参数 → product_id”获取对应记录。

预期结果

点击不同商品时，页面地址和详情内容随商品变化。例如：

/products/1001

微信小程序端不支持路径参数。需要同时支持 Web 端和微信小程序端时，使用查询参数传递商品 ID。

示例：使用查询参数传递筛选条件

目标

从商品分类入口打开商品列表页，并展示指定分类的商品。

关键配置

• 在商品列表页声明查询参数 category_id，类型与商品分类表的 id 字段一致。
• 在分类入口的 跳转页面行为中，将当前分类的 id 传给 category_id。
• 商品列表的数据条件引用 category_id；参数为空时，通过条件数据展示全部商品。

预期结果

传入分类时，商品列表只展示对应分类的商品；未传入时展示全部商品。Web 端的页面地址类似：

/products?category_id=20

排查配置问题

相关阅读

• 变量和参数
• 获取数据源与数据绑定
• 配置条件数据
• 导航行为