有奖捉虫:行业应用 & 管理与支持文档专题 HOT

使用场景

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

基础功能

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

支持定义多个 URL 参数,用于接收数据。
?
?
?
若开启必填,则跳转到页面时,必须携带该参数,若设置默认值,则 URL 中无此参数时默认使用该值。
?
?
?

应用示例

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

页面 A 携带URL参数 ID,单击按钮,跳转到页面 B,B 页面显示参数 ID。
1. 在编辑器中创建两个页面,分别命名为页面 A 与页面 B。
?
?
?
2. 目标页面 B,定义从其他页面跳转需要传入的 URL 参数,用于接收数据。
2.1 切换到目标页面 B,在右侧属性面板中新建页面 URL 参数
?
?
?
新建 URL 参数名称,填入名称,是否开启必填开关后确认即可。
?
?
?
2.2 完成 URL 参数新建后,给页面 B 拖入一个单行输入框组件,并绑定对应 URL 参数。
?
?
?
2.3 此时,目标页面 B 需要的参数就定义好了。下一步需要从其他页面跳转时,设置传入参数。
3. 页面 A 设置跳转动作,并设置所需的传递参数。
3.1 切换到另一个页面 A。
?
?
?
3.2 选中要跳转页面的组件。
?
?
?
3.3 设置点击(tab)事件,唤起事件面板,并选择打开页面。
?
?
?
3.4 配置打开页面要跳转的页面,输入需要传递的参数,单击保存
?
?
?
3.5 参数传入可以用静态数据,或使用表达式计算。
4. 单击右上角预览,在页面 A 中单击按钮跳转至页面 B,可以看到输入框组件的内容会根据传参变更为666
?
?
?

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

新建页面 A 和 B,步骤如上面示例。
左侧代码区,单击新建
?
?
?
创建 Javascript 方法,PageId 是页面 ID,params 为传递参数数据格式。
?
?
?
设置点击事件,选择 Javascript 代码。
?
?
?
选择自定义方法,保存。
?
?
?
预览效果:
?
?
?
?
如果需要在自定义代码中进行页面跳转和传参,可调用如下页面跳转的 前端 API,详细 API 文档请参见 navigateTo
$w.utils.navigateTo({
pageId: 'index', // 页面 Id
params: { key: 'value' },
});
说明:
如果在小程序的开发过程中,使用了小程序模板消息推送,并且期望通过单击推送消息来打开对应的小程序页面,则可在对应的小程序消息 JSON 模板“page”参数中传入相应的页面 ID,格式如:{ "page": "pages/page_id_xxx/index" },替换其中的 page_id_xxx 为对应页面的 ID 即可。
?


http://www.vxiaotou.com