下面来详细讲解一下微信小程序中跳转传参数与传对象的方法及示例代码。
下面来详细讲解一下微信小程序中跳转传参数与传对象的方法及示例代码。
一、传参数
在小程序中跳转页面并传递参数,可以通过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: "海淀区"}}
。
通过以上的步骤,就可以在小程序中实现页面跳转并传递参数的操作了。
本文标题为:微信小程序 跳转传参数与传对象详解及实例代码
![](/xwassets/images/pre.png)
![](/xwassets/images/next.png)
- JavaScript webpack模块打包器如何优化前端性能 2022-10-21
- vue组件,局部组件,全局组件,模板抽取 2023-10-08
- vue-vuex-getters的基本使用 2023-10-08
- React Hooks 实现的中文输入组件 2023-07-10
- 在Vue中实现随hash改变响应菜单高亮 2023-12-24
- ajax 操作全局监测,用户session失效的解决方法 2022-12-28
- js实现的在本地预览图片功能示例 2023-12-24
- echarts饼图指示器文字颜色设置不同实例详解 2022-08-30
- JavaScript接入百度地图API的方法步骤 2024-01-15
- html2canvas渲染时候,样式走样问题。(前端) 2023-10-27