微信小程序-导航方式

导航方式

小程序的路由章节并不是需要学习怎么定义路由，因为路由已经在app.json全局配置文件中声明好了。在本章节我们需要掌握的就是如何实现page的切换。

page的切换小程序提供了两种实现方式，一种是通过组件来实现，另外一种是通过api实现。

小程序由于把页面进行了分类，不同类型的页面导航方式存在差异，因此此处我们至少需要创建三个页面。

• tabBar页面：2个
• 非tabBar页面：1个

跳转方式主要分为两种情况：

• 任意页面 → 非tabBar页面
• 任意页面 → tabBar页面

注意点：在页面的切换过程中，tabBar页面始终具备不会被销毁的特权，离开tabBar页面只会走其onHide周期。但是如果离开的是非tabBar页面，则其会被销毁，再次进入该非tabBar页面，其将被重新onLoad、onShow、onReady。

微信小程序有多种导航方式，可以根据需求选择适合的方式来实现页面之间的导航。

页面跳转：通过 wx.navigateTo 或 wx.redirectTo 方法实现页面跳转。navigateTo 会保留当前页面，可在新页面返回上一级，而 redirectTo 会关闭当前页面，直接跳转到目标页面。

javascript
// 在当前页面跳转到目标页面
wx.navigateTo({
  url: '/pages/targetPage/targetPage'
})

// 关闭当前页面，直接跳转到目标页面

wx.redirectTo({
  url: '/pages/targetPage/targetPage'
})
TabBar 导航：通过在 app.json 的 tabBar 字段中定义底部 tab 栏，用户可以在不同的 tab 页面之间切换。
json
// app.json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人中心"
      }
    ]
  }
}

页面重定向：通过 wx.reLaunch 方法实现页面重定向，它会关闭所有页面，打开并跳转到目标页面。

javascript
wx.reLaunch({
  url: '/pages/targetPage/targetPage'
})

返回上一页：通过 wx.navigateBack 方法返回上一页。

javascript

wx.navigateBack()

TabBar 切换：通过 wx.switchTab 方法切换到 TabBar 页面。

javascript

wx.switchTab({
  url: '/pages/home/home'
})

以上是常用的微信小程序导航方式，你可以根据具体需求选择适合的导航方式来实现页面之间的切换和跳转。希望对你有所帮助！如有更多问题，请随时提问。