微信小程序页面路由与生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45664442/article/details/104781946

本文详细介绍了微信小程序中的页面路由方式，包括利用tabBar、navigator组件的navigateTo、redirectTo、switchTab和reLaunch四种方式。同时，还探讨了页面的生命周期函数，如onLoad、onShow、onReady等，以及App的onLaunch、onShow和onHide等关键回调。此外，还提到了下拉刷新、上拉触底、页面滚动和转发等页面事件处理函数的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文件目录

app.js 入口文件
app.json 全局配置文件 ，不能写注释 
app.wxss  全局样式 
project.config.json  项目配置

2.页面路由

页面路由配置
"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/sort/sort",
    "pages/two/two"
  ],

（1）利用taBbar跳转,底部导航栏。tabBar里至少2个，最多5个。 tabbar 在设置页面切换的时候并没有卸载页面，而是显示和隐藏。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "img/home.png",
        "selectedIconPath": "img/home(1).png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "登录",
        "iconPath": "img/login.png",
        "selectedIconPath": "img/login(1).png"
      },
      {
        "pagePath": "pages/sort/sort",
        "text": "分类",
        "iconPath": "img/select.png",
        "selectedIconPath": "img/select(1).png"
      }
    ]
  },

（2）navigator实现跳转

<view >
    <navigator url="/pages/detail/detail">详情页</navigator>
    <navigator url="/pages/two/two" open-type="navigateTo">two</navigator>
    <navigator url="/pages/two/two" open-type="redirectTo">two</navigator>
    <navigator url="/pages/two/two" open-type="switchTab">two</navigator>
    <navigator url="/pages/detail/detail" open-type="reLaunch">登录</navigator>
</view>

当open-type="navigateTo"时，
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
open-type="redirectTo"时
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
open-type="switchTab"时
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
open-type="reLaunch"时
各种页面都能跳转，但是不压栈
3.页面的生命周期
onLoad
onShow
onReady 初始化上下文对象
onHide
onUnload
onShow 可执行多次。
App的声明函数
onLaunch 生命周期回调——监听小程序初始化。
onShow 生命周期回调——监听小程序启动或切前台。
onHide 生命周期回调——监听小程序切后台。
onError 错误监听函数。页面不存在监听函数。
onPageNotFound 未处理的 Promise 拒绝事件监听函数。
页面事件处理函数
onPullDownRefresh() 监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom()
监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。
onPageScroll(Object object)
监听用户滑动页面事件。

onShareAppMessage(Object object)
监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
onResize(Object object)
基础库 2.4.0 开始支持，低版本需做兼容处理。

小程序屏幕旋转时触发。详见响应显示区域变化

onTabItemTap(Object object)
基础库 1.9.0 开始支持，低版本需做兼容处理。

点击 tab 时触发