点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)

文章目录

      • [1. `tabBar` 的跳转方式](#1. tabBar 的跳转方式)
      • [2. `tabBar` 跳转的特点](#2. tabBar 跳转的特点)
      • [3. 你的配置分析](#3. 你的配置分析)
      • [4. 生命周期触发情况](#4. 生命周期触发情况)
      • [5. 总结](#5. 总结)
  • 很多人不明白什么是第一次加载,两种情况讨论,第一种情况假设我是开发者,第一次加载就是指点击微信开发者工具上边的编译按钮,每点击一次就是一次加载。

  • 第二种情况,就是用户身份,当用户第一次进入微信小程序时,这时会第一次加载,如果此时退出微信小程序,再次进入微信小程序,会不会重新加载?这个都有可能,情况比较多,比如手机内存充足,就不会重新加载,内存不足,可能需要重新加载,所以这个得看情况。

在微信小程序中,点击底部的 tabBar 属于 wx.switchTab 跳转方式。


1. tabBar 的跳转方式

  • 当你点击 tabBar 中的某个选项时,小程序会使用 wx.switchTab 的方式进行页面跳转。
  • wx.switchTab 是专门用于跳转到 tabBar 页面的 API,它会关闭所有非 tabBar 页面,并切换到目标 tabBar 页面。

2. tabBar 跳转的特点

  • 页面栈管理
    • tabBar 页面是独立的,不会保留非 tabBar 页面的页面栈。
    • 跳转到 tabBar 页面时,当前页面栈中的所有非 tabBar 页面都会被关闭。
  • 生命周期触发
    • 跳转到 tabBar 页面时,目标页面的 onLoad 不会触发(除非是第一次加载)。
    • 每次切换到 tabBar 页面时,会触发 onShow 生命周期函数。

3. 你的配置分析

根据你的 tabBar 配置:

json 复制代码
"tabBar": {
  "color": "#333",
  "selectedColor": "#000000",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "产品",
      "iconPath": "icons/Group 31.png",
      "selectedIconPath": "/icons/Group 32.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "icons/Group 35.png",
      "selectedIconPath": "/icons/Group 33.png"
    }
  ]
}
  • 当你点击 "产品""我的" 时,小程序会使用 wx.switchTab 的方式跳转到对应的页面(pages/home/homepages/my/my)。

4. 生命周期触发情况

  • 第一次加载
    • 目标页面的 onLoadonShowonReady 会依次触发。
  • 后续切换
    • 每次点击 tabBar 切换页面时,只会触发目标页面的 onShow ,而不会触发 onLoad

5. 总结

  • 点击 tabBar 属于 wx.switchTab 跳转方式。
  • 跳转到 tabBar 页面时,onLoad 只会在第一次加载时触发,后续切换只会触发 onShow
  • 如果你需要在每次切换到 tabBar 页面时执行某些逻辑,可以将代码放在 onShow 中。
相关推荐
小王码农记5 小时前
微信小程序中使用weui组件库
微信小程序·小程序
ResponseState2007 小时前
测试:"小程序前端切一下生产服务器" 前端: "你自己切换就行啦"
前端·javascript·微信小程序
gongzemin7 小时前
uni-app 微信小程序发送订阅消息
前端·微信小程序·uni-app
大大。11 小时前
微信小程序防止重复点击事件
微信小程序·小程序
V+zmm1013412 小时前
基于微信小程序疫苗预约系统ssm+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
小王码农记13 小时前
原生微信小程序中使用Sass
微信小程序·小程序·sass
机智的奎哥13 小时前
微信小程序实现长按录音,点击播放等功能,CSS实现语音录制动画效果
前端·javascript·css·微信·微信小程序·小程序
萧寂17313 小时前
微信小程序动态更改富文本的css样式
css·微信小程序·小程序
浩宇软件开发14 小时前
微信小程序实现登录注册
微信小程序·小程序