使用场景
页面 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 设置点击(tap)事件,唤起事件面板,并选择打开页面。
3.4 配置打开页面要跳转的页面,输入需要传递的参数,单击保存。
3.5 参数传入可以用静态数据,或使用表达式计算。
4. 单击右上角预览,在页面 A 中单击按钮跳转至页面 B,可以看到输入框组件的内容会根据传参变更为666。
自定义代码方式的页面跳转配置
新建页面 A 和 B,步骤如上面示例。
左侧代码区,单击新建。
创建 Javascript 方法,PageId 是页面 ID,params 为传递参数数据格式。
设置点击事件,选择 Javascript 代码。
选择自定义方法,保存。
预览效果:
$w.utils.navigateTo({pageId: 'index', // 页面 Idparams: { key: 'value' }, //key代表变量名称,value代表变量值});
说明:
如果在小程序的开发过程中,使用了小程序模板消息推送,并且期望通过单击推送消息来打开对应的小程序页面,则可在对应的小程序消息 JSON 模板“page”参数中传入相应的页面 ID,格式如:
{ "page":
"pages/page_id_xxx/index"
}
,替换其中的 page_id_xxx 为对应页面的 ID 即可。