微信小程序 跳转传参数与传对象详解及实例代码

下面来详细讲解一下微信小程序中跳转传参数与传对象的方法及示例代码。

下面来详细讲解一下微信小程序中跳转传参数与传对象的方法及示例代码。

一、传参数

在小程序中跳转页面并传递参数，可以通过url上携带参数来实现，例如下面的示例代码：

1.1 发送方（A页面）

wx.navigateTo({
  url: '/pages/b/b?name='+this.data.name+'&age='+this.data.age
})

在 A 页面中使用 wx.navigateTo() 方法跳转到 B 页面的同时传递了两个参数，参数名称为 name 和 age，值分别为 this.data.name 和 this.data.age。

1.2 接收方（B页面）

Page({
  data: {
    name: '',
    age: ''
  },
  onLoad: function (options) {
    console.log(options) // {name: "张三", age: "18"}
    this.setData({
      name: options.name,
      age: options.age
    })
  }
})

在 B 页面中通过 onLoad() 方法获取参数，并将其赋值给 data 中对应的变量。在本示例中，获取到的参数列表为 {name: "张三", age: "18"}。在 setData() 方法中通过 options.name 和 options.age 获取到了参数的值。

二、传对象

如果需要传递的参数较多，可以将其封装为一个对象，再在url上传递该对象的字符串形式，如下所示：

2.1 发送方（A页面）

let data = {
  name: this.data.name,
  age: this.data.age,
  gender: '男',
  address: {
    city: '北京',
    district: '海淀区'
  }
}
wx.navigateTo({
  url: '/pages/b/b?data=' + JSON.stringify(data)
})

在 A 页面中通过 JSON.stringify() 方法将对象转换为字符串，并将其作为参数传递给了 B 页面。

2.2 接收方（B页面）

Page({
  data: {
    data: {}
  },
  onLoad: function (options) {
    console.log(options) // {data: "{"name":"张三","age":18,"gender":"男","address":{"city":"北京","district":"海淀区"}}"}
    this.setData({
      data: JSON.parse(options.data)
    })
  }
})

在 B 页面中通过 JSON.parse() 方法将字符串解析为对象，并将其赋值给 data 中对应的变量。在本示例中，获取到了一个包含多个属性的对象 {name: "张三", age: 18, gender: "男", address: {city: "北京", district: "海淀区"}}。

通过以上的步骤，就可以在小程序中实现页面跳转并传递参数的操作了。