微信小程序页面间的跳转及数据传递(一)
文章目录
微信小程序的页面并非传统的 web 网页,所以小程序框架提供了专门的方法来管理页面路由,处理页面间的跳转和数据的传递。
从 微信小程序 官方文档中,我们知道有 5 种方法可以打开一个小程序的页面,它们分别是wx.navigateTo
、 wx.navigateBack
、 wx.redirectTo
、 wx.switchTab
、 wx.reLaunch
。
为什么会有上述5种方法? 因为这5种方法分别对应着不同的应用场景。
1.普通的页面间跳转: wx.navigateTo(),可传递数据
1)使用wx.navigateTo(),将会保留当前页面(将当前页面存储在页面栈中),并且跳转到参数 url 指定的某个页面。如果在跳转后的页面使用wx.navigateBack()
或者 使用 返回键
可以返回到原页面。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用? 分隔,参数键与参数值用= 相连,不同参数用& 分隔;如 ‘path?key=value&key2=value2’ |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
另外3个参数分别对应接口调用成功、失败、结束的回调函数,不是必需的。
示例代码:
// index.js
wx.navigateTo({
url: '../list/list?ticketId=1001', // 跳转到 list 页面,带来参数 ticketId=1001
success: () => {
// 接口调用成功的回调函数
},
fail: () => {
// 接口调用失败的回调函数
},
complete: () => {
// 接口调用结束的回调函数(调用成功、失败都会执行)
}
});
2)使用 wx.navigateTo()
实现页面跳转时,可将需要传递给目标页面的数据,放在路径的参数
中。在目标页面(示例中的 list 页面)对应的逻辑层代码(list.js )的 生命周期函数onLoad()
中可以解析出来。
// list.js
Page({
onLoad: function(options) {
var data = options.query; // 上一个页面传递的数据
}
});
3)如果需要传递复杂的数据并非简单的字符串,而是 对象
或者数组
, 则需要用 JSON.stringify()
将原数据转换成 JSON 字符串
。
// index.js
var data = {
ticketId: 1001,
account: '123456',
}
var dataString = JSON.stringify(data);
wx.navigateTo({
url: '../list/list?info=dataString',
});
// list.js
Page({
onLoad: function(options) {
var data = JSON.parse(options.info); // 将index 页面传递的数据 JSON 字符串还原为 JSON 对象
}
});
2. 返回之前的某个页面: wx.navigateBack()
使用 wx.navigateBack()
将会关闭当前页面(不会将当前页面存储在页面栈中),返回上一页面或多级页面。可通过 getCurrentPages()
获取当前的页面栈,决定需要返回几层。
参数说明:
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
delta | Number | 1 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
示例代码:
// index 页面
wx.navigateTo({
url: '../list/list?cateId=1001'
})
// list 页面
wx.navigateTo({
url: '../detail/detail?ticektId=1001'
})
// detail 页面
wx.navigateBack({
delta: 2 // 将返回 index 页面
});
wx.navigateBack({
delta: 1 // 将返回 list 页面
})
3. 重定向到某个页: wx.redirectTo(), 可传递数据
使用wx.redirectTo()
将会关闭当前页面(当前页面不会保存在页面栈中),并且跳转到参数 url 指定的某个页面。该方法使用的参数及页面间的数据传递方式与wx.navigateTo()
一样。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用? 分隔,参数键与参数值用= 相连,不同参数用& 分隔;如 ‘path?key=value&key2=value2’ |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
wx.redirectTo({
url: '../test/test?id=1'
});
注意:
由于wx.redirectTo()
关闭当前页面,且并未将当前页面保存在页面栈中,所以无法使用 wx.navigateBack()
返回到原页面。