页面跳转传参配置

最近更新时间:2025-08-13 16:33:11

我的收藏

使用场景

页面 URL 参数通常用于两个页面跳转间的数据传递。

基础功能

可视化方式的页面跳转配置

支持定义多个 URL 参数,用于接收数据。



若开启必填,则跳转到页面时,必须携带该参数,若设置默认值,则 URL 中无此参数时默认使用该值。




应用示例

利用系统自带 URL 参数传递机制

页面 A 携带 URL 参数 ID,点击页面 A 中的按钮,跳转到页面 B,B 页面显示参数 ID。
1. 在编辑器中创建两个页面,分别命名为页面 A 与页面 B。

2. 目标页面 B,定义从其他页面跳转需要传入的 URL 参数,用于接收数据。
2.1 切换到目标页面 B,在右侧属性面板中新建页面 URL 参数 ID

2.2 完成 URL 参数新建后,给页面 B 中的单行输入框组件,输入值并绑定对应 URL 参数$w.page.dataset.params.ID

2.3 此时,目标页面 B 需要的参数就定义好了。下一步需要从其他页面跳转时,设置传入参数。
3. 页面 A 设置跳转动作,并设置所需的传递参数。
3.1 切换到另一个页面 A,设置按钮点击事件。
3.2 设置点击(tap)事件,唤起事件面板,并选择打开页面。

3.3 配置打开页面要跳转的页面,输入需要传递的参数,例如ID=123,单击保存

说明:
参数传入可以用静态数据,或使用表达式计算。
4. 单击右上角预览,在页面 A 中单击按钮跳转至页面 B,可以看到输入框组件的内容会根据传参变更为123。


自定义代码方式的页面跳转配置

1. 在编辑器中创建页面 A 和页面 B,实现在页面 A 中点击按钮跳转到页面 B。

2. 页面 A 中按钮配置点击事件,调用JavaScript代码方法进行页面跳转并传递参数,可调用如下页面跳转的 前端 API,详细 API 文档请参见 navigateTo,PageId 是目标页面 ID,params 为参数格式。

$w.utils.navigateTo({
pageId: 'index', // 页面 Id
params: { area: '深圳' }, //area为示例参数名称,‘深圳’为示例参数值
});
3. 目标页面 B 新建页面参数area,用来接收页面 A 传递的参数。

4. 若参数area设置默认值,则 URL 中无此参数时默认使用该值,例如默认值设置为‘123’,则在 URL 中无此参数时,area默认取值‘123’。

说明:
如果在小程序的开发过程中,使用了小程序模板消息推送,并且期望通过单击推送消息来打开对应的小程序页面,则可在对应的小程序消息 JSON 模板“page”参数中传入相应的页面 ID,格式如:{ "page": "pages/page_id_xxx/index" },替换其中的 page_id_xxx 为对应页面的 ID 即可。

分包页面跳转配置指引

注意:
子包页面跳转,传递参数暂时不支持可视化配置,需手动创建 {key1:value1,key2:value2....} 类型的对象格式。