如何实现小程序中的页面跳转？

这就是很多开发者在研发小程序时都会碰到的问题。在小程序中展开页面重定向就是非常常用的操作方式，比如说从一个页面重定向至另一个页面，或者从一个 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 文档，如果问题无能为力可以回去社区求救。坚信您一定能够掌控小程序页面重定向的常见问题，从而更好地展开小程序开发。