腾讯云微搭低代码 页面跳转传参配置

这篇说说腾讯云微搭低代码中页面URL参数的使用方法,支持可视化与自定义代码两种方式实现页面跳转时传递数据,并说明参数必填、默认值及分包跳转配置。 可视化配置:在目标页面定义URL参数并绑定组件,源页面通过跳转动作传入静态或动态数据。 自定义代码:使用$w.utils.navigateTo API传递参数,目标页面需提前定义同名参数接收。 分包跳转:子包页面暂不支持可视化配置,需手动创建对象格式参数。

相关产品
腾讯云微搭低代码 产品页,含版本规格、价格与购买入口。

一、使用场景

页面 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….} 类型的对象格式。

赞 (0)
上一篇 4天前
下一篇 4天前