小程序，页面导航传参

页面导航传参

在小程序中，页面之间的传参可以通过声明式导航和编程式导航的方式传递参数。本文将为大家详细介绍这两种导航方式，并提供示例代码。

1. 声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用 ？分隔
参数键与参数值用 = 相连
不同参数用 & 分隔

代码示例如下：

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

在接收参数的页面，在 onLoad 方法中可以直接通过 options 参数获取到传递过来的参数：

onLoad: function(options) {
  console.log(options) // { name: 'zs', age: '20' }
}

2. 编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

<button bindtap="gotoInfo2">跳转到info页面</button>

gotoInfo2() {
  wx.navigateTo({
    url: '/pages/info/info?name=ls&gender=男'
  })
}

在接收参数的页面，在 onLoad 方法中同样可以通过 options 参数获取到传递过来的参数：

onLoad: function(options) {
  console.log(options) // { name: 'ls', gender: '男' }
}

总结：

页面之间的传参在小程序中非常简单，可以通过声明式导航和编程式导航的方式传递参数，并且在接收参数的页面都可以通过 onLoad 方法中的 options 参数来获取传递过来的参数。