这就是很多开发者在研发小程序时都会碰到的问题。在小程序中展开页面重定向就是非常常用的操作方式,比如说从一个页面重定向至另一个页面,或者从一个 Tab 页重定向至另一个 Tab 页。如果您就是一名小程序开发者,那么本文将协助您介绍如何同时实现页面重定向,并且提问以下几个问题:
1. 小程序中如何展开页面重定向呢?
2. 页面重定向时必须特别注意哪些问题?
3. 如何在页面重定向中传达参数?
4. 如何掌控页面栈和回到?
在通过以下几个方面的了解,本文将为您答疑上述问题。
一、小程序中如何展开页面重定向?
小程序中同时实现页面重定向可以采用 wx.navigateTo()、wx.switchTab()、wx.reLaunch() 和 wx.redirectTo() 四个函数。具体内容各函数的采用方法如下:
1. wx.navigateTo()
该函数用作留存当前页面,重定向至应用领域内的某个页面。重定向后可以通过回到按钮回到至原页面。采用方法如下:
```
wx.navigateTo({
url: '/pages/example/example'
})
```
其中 url 为被重定向页面的路径。
2. wx.switchTab()
该函数用作重定向至应用领域内的某个 Tab。由于 Tab 页面无法滑动删掉,采用该函数重定向时不能被留存至页面栈中。采用方法如下:
```
wx.switchTab({
url: '/pages/index/index'
})
```
其中 url 为被重定向 Tab 的路径。
3. wx.reLaunch()
该函数用作停用所有页面并重定向至应用领域内的某个页面。采用方法如下:
```
wx.reLaunch({
url: '/pages/home/home'
})
```
其中 url 为被重定向页面的路径。
4. wx.redirectTo()
该函数用作停用当前页面并重定向至应用领域内的某个页面。采用方法如下:
```
wx.redirectTo({
url: '/pages/setting/setting'
})
```
其中 url 为被重定向页面的路径。
二、页面重定向时必须特别注意哪些问题?
在小程序中展开页面重定向时,应当特别注意以下几个问题:
1. 路径问题:被重定向的页面路径必须恰当核对,否则可以重定向失利。
2. 页面栈问题:采用 wx.navigateTo() 函数展开页面重定向时,被重定向的页面可以被留存至页面栈中,可以通过回到按钮回到至原页面。当页面栈已八十时,再次冲引援引致重定向失利。可以采用 wx.redirectTo() 和 wx.reLaunch() 函数化解该问题。
3. 生命周期问题:通过 wx.navigateTo() 函数重定向的页面可以步入 onHide 状态,被留存至页面栈中。当从被留存的页面回到至前一个页面时,前一个页面的 onShow 函数不能被引爆。如果须要创下前一个页面的数据,可以通过将须要更新的数据存储在页面属性中,在 onShow 函数中针对该属性展开更新。
三、如何在页面重定向中传达参数?
小程序中展开页面重定向时经常须要传达参数。可以通过在 url 中嵌入参数的方式展开重定向,或者通过页面属性的方式展开传达。
1. url 录弁
在 url 中以 ? 隔开路径和参数,通过 & 嵌入多个参数。参数格式为 key=value,比如:
```
wx.navigateTo({
url: '/pages/detail/detail?id=1&name=test'
})
```
在被重定向的页面中,可以通过 onShow 函数以获取传达的参数:
```
onShow: function(options) {
// 以获取传达的参数,在 options 中存储
var id = options.id;
var name = options.name;
}
```
2. 属性录弁
在页面重定向时,可以将须要传达的数据存储在被重定向的页面属性中,在被重定向的页面中以获取该属性值即可。比如:
```
// 页面 A 中
wx.navigateTo({
url: '/pages/detail/detail'
success: function(res) {
// 向页面 B 传递数据
res.eventChannel.emit('acceptDataFromA', { data: 'test' })
}
})
// 页面 B 中
Page({
onLoad: function(options) {
var eventChannel = this.getOpenerEventChannel()
// 监听源自 A 页面传达的数据
eventChannel.on('acceptDataFromA', function(data) {
console.log(data)
})
}
})
```
四、如何掌控页面栈和回到?
在小程序中展开页面重定向时,须要特别注意页面栈和回到问题。可以通过以下方式掌控页面栈和回到。
1. wx.switchTab() 和 wx.reLaunch() 不留存至页面栈中,因此采用这两个函数无须害怕重定向后可以影响前一个页面的数据。
2. 采用 wx.navigateTo() 函数展开页面重定向时,被重定向的页面可以被留存至页面栈中。可以采用 wx.navigateBack() 函数回到至前一个页面,也可以采用 wx.reLaunch() 函数停用当前所有页面,并重定向至应用领域内的某个页面。
3. 在页面栈中,可以通过 getCurrentPages() 函数以获取所有页面实例的数组。数组中第一个元素为当前页面,最后一个元素为栈底页面。
4. 可以通过在页面属性中保护页面历史记录,同时实现自定义回到。比如,将历史记录数组存储在 App.globalData 中,在页面回到按钮时,以获取数组中最后一个页面的路径,通过 wx.navigateTo() 函数展开重定向。
五、总结
通过本文了解,您必须晓得在小程序中如何同时实现页面重定向了吧。当然,在实际研发中还可以碰到一些其他的问题,在这里不一一列举。对于新手来说,如果碰到了问题可以先查阅官方文档和 API 文档,如果问题无能为力可以回去社区求救。坚信您一定能够掌控小程序页面重定向的常见问题,从而更好地展开小程序开发。