小程序中wx.request在tabbar中的onload生命周期不触发的问题

最新推荐文章于 2025-02-25 23:11:52 发布
原创 最新推荐文章于 2025-02-25 23:11:52 发布 · 983 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #小程序

本文解析了微信小程序中onLoad与onTabItemTap的触发机制差异。作者发现仅在页面首次加载时onLoad会被触发，而后续通过tabbar切换不会再次调用。为确保每次切换页面时都能执行请求，作者推荐使用onTabItemTap代替。

遇到一个大坑！！！
小程序写的请求放在onload生命周期中，希望进入页面他就会自己执行，但是发现只有在刷新页面后才会触发一次，并且只触发一次
之后在进入这个页面就不会触发onload函数了，请求自然也不会通
后来发现是因为tabbar页面切换，他没有走onload
最后我是添加了
onTabItemTap(e){ // ajax拉去数据 console.log(e) },
成功执行了我的wx.request
巨坑！！！

微信小程序 在tabBar某一项的右上角添加文本（购物车数量）
憨虫子的博客
05-20 7636
首先我们在进入小程序后，肯定是通过用户授权并获取到用户的openID的，或者说至少有那么一个用户信息字段（比如在数据库中的用户表里，有openID、ID等）是跟购物车挂钩的，否则怎么能知道是我的购物车里有什么宝贝呢？在这里我是将用户表中的ID字段返回作为用户的唯一标识存储在globalData.userInfo中的。 在用户将商品添加到购物车后，数据库中的购物车表（cart表）主要存储了三个信息...
小程序自定义tabbar不执行onload等函数问题解决方案
qq_37018640的博客
03-31 3904
tabbar自定义的方式，小程序不加载一级页面的onLoad函数 最近在csdn中和实际项目中发现到这个问题，自定义的插件除官方的tabbar外，有很多技术博客定义的自定义tabbar在美观程度上达到了很好的程度，但是点击后跳转的页面并不进行onload等方法的初次执行，这在程序的执行上和感觉上是不完美的 onLoad: function () { let myComponent = th...
原生小程序tabbar切换onload不生效
qq_32058147的博客
10-29 1053
今天在用原生写一个民宿项目时，当登录后退出再换其他账号再进来时，发现tabar切换到订单模块是onload没有发请求，所以数据还是上个账号的缓存数据，于是我把请求试着加入onshow里面，发现直接陷入请求死循环了，为了解决这个bug，我试过很多方法，最后用wx.switchTab解决了这个问题。 ...
小程序切换tab页面不执行onLoad解决
Jester的博客
04-04 1万+
用户一开始进入到小程序的首页，在首页列表中通过navigateTo跳转新页面进行一些操作，然后通过switchTab返回首页。发现跳转首页后数据并没有发生变化，在调试里面可以看到通过switchTab跳转到首页之后，页面并没有执行onLoad操作，所以数据和未授权之前相比是一样的。 解决： （1）通过getCurrentPages（）获取页面栈来进行操作 wx.switchTab({ ...
微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行
九州县令的博客
06-05 3180
相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全，后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中，最简单的就是在启动页添加跳转成功的方法 wx.switchTab({ url: '/pages/index/index', success: function (e) { var page = getCurrentPages().pop(); if (page == undefined
微信小程序面试题
Sunshinedada的博客
02-25 1049
onLoad: 页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。onShow: 页面显示时触发调用。onReady: 页面初次渲染完成时触发,一个页面只会调用一次。onHide: 页面隐藏时触发，如navigateTo或底部tab切换到其他页面等。onUnload: 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 1246
微信小程序和uni-app面试高频知识点
【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件
2303_76696898的博客
10-02 3049
本文详细介绍了小程序开发中的多个关键知识点，包括页面导航（声明式和编程式导航及传参）、页面事件（下拉刷新和上拉触底）、生命周期（应用和页面生命周期函数）、WXS 脚本（概述、基础语法和特点）以及自定义组件（创建、引用、样式、数据、监听器、生命周期、插槽和父子通信等）
精选资源
微信小程序面试题.pdf
05-01
小程序生命周期钩子函数 - **常用钩子函数**： - **onLoad()**：页面加载时触发，可以用于初始化页面数据或获取数据。 - **onShow()**：页面显示时触发，可以用于页面状态的恢复。 - **onHide()**：页面隐藏时...
微信小程序之踩坑之旅一，wx.request 和 wx.uploadFile
03-29
微信小程序公测也有段时间了，但是里面的坑踩了一个又一个，心也是够累的。本文说说关于 wx.request 和 wx.uploadFile 对请求响应的不同表现。 wx.request 使用 wx.request 发出请求，在对接口的响应做处理时，官方提供了三个回调函数，分别是 success，fail，complete，看了官方文档，其实也很清晰什么时候用什么回调，在这里也不多赘述了。 wx.uploadFile 使用 wx.uploadFile 可以上传文件，并可以携带一些额外的信息，在对接口的响应做处理时，和 wx.request 一样，也提供了同样的三个回调函数，在官方文档中，其描述几乎
微信小程序底部导航跳转tabBar页不触发onLoad
weixin_42177572的博客
01-12 1803
小程序tabBar跳转不触发onLoad
微信小程序的生命周期-onLoad
m0_51930636的博客
04-24 1516
需要注意的是，在 Vue.js 中，data 中定义的数据是响应式的，如果你直接修改 data 中的数据，会触发组件的重新渲染。但是，在微信小程序中，data 中定义的数据不是响应式的，因此修改 data 中的数据不会自动触发组件的重新渲染。如果你需要在 onLoad 生命周期中访问 data 中的数据，可以使用 this.data 来访问，但如果你需要修改 data 中的数据，建议在 onReady 生命周期中或者之后的生命周期中进行修改。data 中定义的数据是组件的初始数据，在组件创建时被赋值。
跳转至tabBar页面不触发页面的onLoad，点击底部tabar不触发onLoad
lzq_20120119的博客
06-17 1512
小程序想跳转tabar页面带参数。使用了全局变量app.js的全局。 跳转到页面后发现不是每次都执行onLoad方法，传参失败。 更换跳转的方法解决： 由wx.switchTab改为wx.reLaunch 就可以了
小程序 切换到tabBar页面不刷新问题
热门推荐
weixin_42617556的博客
07-05 1万+
小程序 切换到tabBar页面不刷新问题小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等。下面我们重点研究切换到tabBar的两种方式。wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.reLaunch：关闭所有页面，打开到应用内的某个页面。下面贴出官方文档截图：从官方文档...
小程序中的生命周期
一片涟漪
10-05 562
1，应用生命周期 App: App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。 **关于小程序的退出：**当用户点击小程序左上角关闭，或者按设备Home键离开微信，小程序并没有直接销毁，而是触发onHide方法进入了后台，短时间内当再次进入微信或者再次打开小程序，小程序会从后台状态进入前台，此为“热启动”。注意当小程序进入后台状态一定时间后，或者系统资源占用过高，微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。 **小程序的
小程序问题：封装公共组件的onLoad方法不生效
专注于前后端技术知识分享。
11-06 7727
于是就出现了页面数据不能加载的问题，在一番打印查找之后，发现是组件中onLoad方法一直没有执行，导致内部的方法没有调用，表格里的数据没有拿到。然后在Component构造器的lifetimes配置项中，使用与onLoad方法同等作用的attached 方法，发现内部的方法成功调用，拿到表格数据。uni中，在页面当中引用公共组件时onLoad方法不执行 ，可以使用vue自带生命周期函数created、mounted ，或者使用$refs获取组件中的方法并调用来解决。// 组件所在页面的生命周期声明对象。
1、其他页面返回tabBar页面不刷新（onLoad，onShow，onTabItemTap）
interstingh的博客
03-16 1812
原因：在onLoad里修改数据，但是onLoad 首次进入页面触发，只触发一次。解决方法：在onShow里修改数据，onShow每次打开页面都会调用一次。拓展：onTabItemTap()在 tabbar 切换时触发。
微信小程序的onLoad方法不执行
FarryNiu的博客
06-12 3401
微信小程序解决onLoad方法不执行问题
小程序返回tabBar页面刷新tabBar，有没有生命函数刷新
最新发布
12-02
<think> 在微信小程序中，当从其他页面返回到tabBar页面时，并不会触发tabBar页面的onLoad或onShow等生命周期函数（实际上onShow会触发，但onLoad不会）。但是，有时候我们需要在返回到tabBar页面时进行一些刷新操作。 微信小程序的页面生命周期包括： - onLoad: 页面加载时触发，一个页面只会调用一次。 - onShow: 页面显示/切入前台时触发。 - onReady: 页面初次渲染完成时触发，一个页面只会调用一次。 - onHide: 页面隐藏/切入后台时触发。 - onUnload: 页面卸载时触发。 对于tabBar页面，它并不会被卸载，而是会被隐藏。因此，当我们离开tabBar页面（跳转到非tabBar页面）时，会触发tabBar页面的onHide，当我们再次返回（从非tabBar页面返回）时，会触发onShow。 所以，我们可以在tabBar页面的onShow生命周期函数中进行刷新操作。 但是有一个注意点：第一次进入tabBar页面时，会触发onLoad和onShow，而我们返回时只会触发onShow。所以，我们需要在onShow中判断是否需要刷新，或者直接进行刷新（如果刷新操作不频繁且对性能影响不大）。 另外，微信小程序还提供了一个专门用于监听页面显示的生命周期函数：onShow，我们可以在这里执行刷新数据等操作。 示例代码： 假设我们有一个tabBar页面（首页），我们希望在每次显示这个页面的时候都刷新数据。 在home.js中： ```javascript Page({ data: { // 数据 list: [], // ...其他数据 }, onLoad: function (options) { // 第一次加载时获取数据 this.loadData(); }, onShow: function () { // 每次页面显示的时候，我们重新刷新数据 // 注意：这里可能会造成重复加载（比如第一次加载时onLoad和onShow都会触发），所以我们可以优化一下 // 方案1：在onLoad中调用，onShow中不调用（但这样返回时不会刷新） // 方案2：在onShow中调用，但通过一个标记避免第一次重复（因为第一次onLoad和onShow都会调用） // 方案3：直接在onShow中调用，如果刷新操作不重复且可以多次执行，则无妨（例如数据相同则不会重复渲染） // 或者，我们可以考虑使用一个状态来记录是否已经加载过，或者是否需要刷新 // 这里我们选择在onShow中直接刷新，但为了避免第一次进入时重复（因为onLoad中已经调用了一次），我们可以不在onLoad中调用，而只在onShow中调用。 // 但是注意：onLoad只在第一次加载时调用，而onShow每次显示都调用。如果我们希望每次显示都刷新，那么我们就只在onShow中调用。 // 因此，我们可以去掉onLoad中的loadData，而只在onShow中调用。 this.loadData(); }, loadData: function() { // 模拟加载数据 // 实际中可能是网络请求 const newData = ...; // 获取新数据 this.setData({ list: newData }); }, // ...其他方法 }) ``` 但是，如果我们希望第一次加载时不重复，我们可以设置一个标记： ```javascript Page({ data: { list: [], isFirstLoad: true // 第一次加载标记 }, onLoad: function (options) { // 第一次加载时获取数据 this.loadData(); }, onShow: function () { if (this.data.isFirstLoad) { // 如果是第一次，因为onLoad已经调用过，所以跳过 // 然后将标记设为false this.setData({ isFirstLoad: false }); } else { // 不是第一次，则刷新数据 this.loadData(); } }, loadData: function() { // 加载数据 // ... } }) ``` 或者，我们也可以考虑在onShow中每次都需要刷新，不管是不是第一次，因为第一次的时候数据可能已经过时（比如从其他页面操作后返回，需要刷新）。所以，如果我们的数据刷新是幂等的，而且对实时性要求高，那么可以每次onShow都刷新。 但是，这样可能会带来性能问题（频繁请求）。所以，我们需要根据业务场景来决定。 另一种做法：我们可以在页面上添加一个刷新事件，例如使用onPullDownRefresh（下拉刷新）来让用户手动刷新，然后在返回时自动刷新可能并不是必须的。 所以，总结一下： 1. 如果每次进入页面都需要刷新，那么就在onShow中调用加载数据的方法（包括第一次）。 2. 如果第一次加载已经在onLoad中做了，为了避免重复，可以在onShow中通过判断条件来决定是否刷新（例如，根据时间间隔，或者根据一个标记）。 根据微信官方文档，tabBar页面在第一次加载后，再次进入时不会重新加载（即不会触发onLoad），只会触发onShow。所以，我们可以选择在onShow中执行刷新操作，这样每次进入（包括第一次和返回）都会执行。 但是注意：第一次进入时，会先触发onLoad，再触发onShow。所以，如果我们同时在onLoad和onShow中调用同一个加载方法，那么第一次进入时就会调用两次。因此，我们通常只在onShow中调用，而不再在onLoad中调用，这样就不会重复。 所以，推荐做法是：将数据加载放在onShow中，这样每次进入页面（无论第一次还是返回）都会刷新数据。如果担心刷新太频繁，可以加入一些判断条件（比如距离上次刷新时间超过一定时间才刷新）。 示例： ```javascript Page({ data: { list: [], lastRefreshTime: 0 // 上次刷新时间 }, onShow: function () { const now = new Date().getTime(); // 如果距离上次刷新时间超过30秒，或者第一次（lastRefreshTime为0）则刷新 if (now - this.data.lastRefreshTime > 30000 || this.data.lastRefreshTime === 0) { this.loadData(); this.setData({ lastRefreshTime: now }); } }, loadData: function() { // 加载数据... } }) ``` 这样，在30秒内返回页面不会刷新，超过30秒则会刷新。 当然，具体是否刷新以及刷新条件可以根据业务需求调整。 另外，还有一种情况：从其他页面返回时，可能其他页面已经修改了一些数据，我们希望在返回时立即刷新。那么我们可以不使用时间间隔，而是每次返回都刷新。这取决于你的应用场景。 所以，回答你的问题：使用onShow生命周期函数来刷新tabBar页面。 注意：在非tabBar页面跳转到tabBar页面时，会触发tabBar页面的onShow；同样，当从其他页面返回tabBar页面时，也会触发onShow。因此，在onShow中刷新是合适的。 但是，如果跳转是切换到另一个tabBar页面（通过点击tabBar切换），那么当前离开的tabBar页面会触发onHide，而进入的tabBar页面会触发onShow。所以，如果你希望每次点击tabBar切换到这个页面时也刷新，那么同样可以在onShow中处理。 因此，综合来看，在onShow中刷新数据是合适的。 另外，如果刷新操作是异步的（比如网络请求），需要考虑快速切换的情况，防止上一次的请求还未完成又发起了新的请求，或者页面已经销毁（虽然tabBar页面不会销毁，但也要注意异步回调中可能访问不到this的情况）。可以使用Promise、async/await或者标记来控制。 例如，使用一个标记来防止重复请求： ```javascript Page({ data: { list: [], isLoading: false // 是否正在加载 }, onShow: function () { this.loadData(); }, loadData: function() { if (this.data.isLoading) { return; } this.setData({ isLoading: true }); // 模拟网络请求 wx.request({ url: 'https://example.com/data', success: (res) => { this.setData({ list: res.data }); }, complete: () => { this.setData({ isLoading: false }); } }); } }) ``` 这样，在请求未完成时，再次触发loadData不会发起新的请求。 综上所述，使用onShow生命周期函数来刷新tabBar页面。 </think>在微信小程序中，当用户从其他页面返回到 tabBar 页面时，可以通过 **`onShow`** 生命周期函数来实现页面刷新。tabBar 页面不会触发 `onLoad`（除非首次加载），但每次进入页面（包括返回）都会触发 `onShow`。 ### 解决方案： ```javascript // pages/tabPage/index.js Page({ // 页面显示/切入前台时触发 onShow() { this.refreshTabData(); // 每次进入页面时刷新数据 }, // 自定义刷新方法 refreshTabData() { console.log("刷新tabBar页面数据..."); // 这里执行数据刷新逻辑（例如重新请求接口） wx.showLoading({ title: '刷新中' }); // 模拟接口请求 setTimeout(() => { this.setData({ message: "最新数据：" + new Date().toLocaleString() }); wx.hideLoading(); }, 1000); }, // 页面数据 data: { message: "初始数据" } }) ``` ```html <!-- pages/tabPage/index.wxml --> <view class="container"> <text>{{message}}</text> <button bindtap="refreshTabData">手动刷新</button> </view> ``` ### 关键点解释： 1. **`onShow` 生命周期**： - 触发场景：页面显示时（首次进入、从其他页面返回、从后台切回前台） - 最佳实践：在此函数中执行数据刷新，确保每次用户看到页面时都是最新数据 2. **与 `onLoad` 的区别**： - `onLoad` 只触发一次（页面创建时） - `onShow` 每次页面显示时都触发 - tabBar 页面切换时不会销毁页面实例，因此不会触发 `onLoad` 3. **优化建议**： - 添加防抖逻辑避免频繁刷新 - 结合页面参数判断是否需要强制刷新 ```javascript onShow(options) { if (options.from === 'refresh') { // 根据场景判断 this.refreshTabData(); } } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值