微信小程序-导航方式

简介: 微信小程序-导航方式

导航方式


小程序的路由章节并不是需要学习怎么定义路由,因为路由已经在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'
})


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

目录
相关文章
|
1月前
|
小程序
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 页面导航 -- 导航传参(二十四)
【微信小程序】-- 页面导航 -- 导航传参(二十四)
|
1月前
|
小程序 API
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
|
2月前
|
前端开发 小程序 JavaScript
小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
5月前
|
小程序 JavaScript 定位技术
小程序点击指定地址按钮直接打开地图导航
小程序点击指定地址按钮直接打开地图导航
125 0
|
5月前
|
小程序 JavaScript
微信小程序模仿分类导航实现多个tab 页
微信小程序模仿分类导航实现多个tab 页
30 0
|
5月前
|
小程序 JavaScript
小程序点击轮播图跳转到tab导航界面
小程序点击轮播图跳转到tab导航界面
48 0
|
8月前
|
小程序 API
小程序----页面导航
小程序----页面导航
|
9月前
|
小程序 JavaScript 前端开发
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
424 0
|
16天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。

热门文章

最新文章