微信小程序页面间的跳转及数据传递(二)
文章目录
在 微信小程序页面间的跳转及数据传递(一) 一文中,我们介绍了打开小程序的页面的三个方法wx.navigateTo
、 wx.navigateBack
、 wx.redirectTo
。本文将介绍另外两个方法 wx.switchTab
、 wx.reLaunch
。
1. 打开tabBar页面: wx.switchTab,URL不可传递数据
1)使用wx.switchTab
,将会跳转到参数 url 指定的 tabBar
页面,并关闭其他所有非 tabBar 页面。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
假设有 index 和 search 这两个 tabBar 页面。
// 配置文件 app.json
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "img/home01.png",
"selectedIconPath": "img/home02.png"
},
{
"pagePath": "pages/search/search",
"text": "查询",
"iconPath": "img/2017121106.png",
"selectedIconPath": "img/2017121105.png"
},
]
}
从 index 页跳转到 search 页
// index.js
wx.switchTab({
url: '../search/search'
});
2) 由于wx.switchTab
的 url 不能带参数,无法通过 url 在页面间传递数据。这时候我们该怎么处理数据的传递呢?
我们可以使用 全局对象 App
的 globalData
属性来存储数据。
// app.js
App({
// 全局变量
globalData: {
ticket: null , // 变量ticket,可以用于所有页面。
},
onLaunch: function () {
});
});
假设跳转前的页面为 index , 使用全局变量
来存储从 index 页面中的数据。要使用 全局变量就必须先通过getApp()
获取应用实例,再给app.globalData
赋值。
// index.js
//获取应用实例
const app = getApp();
Page({
data: {},
// 自定义的函数
chooseShow: function(event) {
// 需要传递的数据
var ticket = {
ticketId: 1001,
account: '123456',
};
// 使用全局变量来存储数据 ticket
app.globalData.ticket = ticket;
// 跳转到 search 页面 (search 为 tabBar 页面 )
wx.switchTab({
url: '../search/search'
});
}
});
跳转后的页面为 search 页。先通过getApp()
获取应用实例,再通过 app.globalData
来读取数据。
// search.js
//获取应用实例
const app = getApp();
// 获取全局变量中的数据 ticket
var ticket = app.globalData.ticket;
2.打开任意页面:wx.reLaunch(),URL可传递数据
使用 wx.reLaunch()
可以打开到应用内的任意的某个页面,同时关闭之前的所有页面(即清空了页面栈)。
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用? 分隔,参数键与参数值用= 相连,不同参数用& 分隔;如 ‘path?key=value&key2=value2’,如果跳转的页面路径是 tabBar 页面则不能带参数 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
// 打开 test 页面,并通过 url 路径参数传递数据 id=1
wx.reLaunch({
url: 'test?id=1'
})
//test.js
Page({
//
onLoad: function(options){
console.log(options.id);
}
})
wx.reLaunch()
使用的参数及页面间的数据传递方式与wx.navigateTo()
一样。
如果需要传递复杂的数据并非简单的字符串,而是 对象
或者数组
, 则需要用 JSON.stringify()
将原数据转换成 JSON 字符串
。在目标页面的 生命周期函数onLoad()
中,通过 JSON.parse()
将字符串解析成 对象
或数组
。
3.总结:
方法 | 可通过 url 传递数据 | 保持当前页面到页面栈中 | 可打开tabBar页面 |
---|---|---|---|
wx.navigateTo() | 是 | 是 | 否 |
wx.navigateBack() | 否 | 否 | 否 |
wx.redirectTo() | 是 | 否 | 否 |
wx.switchTab() | 否 | 否 | 是 |
wx.reLaunch() | 是 | 否 | 是 |