微信小程序：wx.navigateTo从子页面跳回父页面，页面不刷新的问题

最新推荐文章于 2025-06-23 13:47:56 发布
最新推荐文章于 2025-06-23 13:47:56 发布
阅读量1.8w 收藏 19
点赞数 9
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序 navigateTo页面跳转不刷新 onShow 小程序生命周期 跳回页面不刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35585701/article/details/81162574
本文解析了微信小程序的页面生命周期，特别是onLoad、onShow和onReady的触发顺序及其应用场景。针对页面跳转时不刷新的问题，提出了在onShow中强制刷新的解决方案。

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

先简要说说小程序的生命周期：
应用的生命周期：App({…}) 用来注册小程序，指定小程序的生命周期
页面的生命周期：Page({…}) 注册页面，指定页面的生命周期
具体注册函数的内容见小程序官网API

其中有三个生命周期函数的触发顺序：onLoad->onShow->onReady （页面加载->页面显示->页面初次渲染）
onLoad和onReady每个页面只会触发一次，如果一个页面没有onUnload，则不会再次触发onLoad和onReady
onReady：页面首次渲染完成，可以进行交互

下面谈一下项目使用过程中出现的从下一页面跳回上一页面，页面不刷新的问题，本质上来说是微信小程序中跳转API所对应的生命周期的问题
用wx.navigatorTo()进行页面跳转时，假设A—>B，此时B是作为A的一个子页面存在的，A并没有卸载onUnLoad，只是onHide了，仍在后台运行；从B跳回A，自然不会重新onLoad，只会onShow。
在具体的业务场景中，我们希望当在子页面B中用户进行数据修改和表单提交之后，返回到父页面A中时，A获取到的相关数据能够更新，但，小程序的对wx.navigatorTo()的生命周期的安排不会再去获取数据，要想页面A强制刷新，在A 的onShow函数中强制发请求再获取数据执行方法。

后面有时间会写一篇对微信小程序生命周期的详细分析

微信小程序 - wx.navigateTo 跳转的路径携带 query 等参数，直接被忽略截断了（只剩网页域名后面的参数都没了），导致无法顺利传递给 web-view 组件（解决方案）
资深程序员
09-27 167
例如，您要通过 web-view 跳转的链接为value=哈哈哈，可以看到是带参数的，但是通过路由跳转 API wx.navigateTo() 携带过去后，这种链接最后被解析为，最终导致与预期的效果不一致。微信小程序跳转 H5 页面时，该路径地址后面存在 Query 参数时，会被自动忽略（截取），只会取地址中的域名那部分，支持 Vue2 / Vue3 语法。
【微信小程序】微信小程序 page.json 配置详解：3大步骤带你轻松搞定 style 单页面样式配置
java专栏
11-19 1089
page.json通过本文的详细介绍，相信你已经掌握了微信小程序中配置和管理单页面样式的方法。从基础用法到进阶技巧，每一个部分都有详细的解析和示例代码，帮助你更好地管理和引用单页面样式。如果你有任何疑问或需要进一步的帮助，欢迎随时留言交流。祝你在微信小程序的开发之旅中一帆风顺！希望这篇文章对你有所帮助，如果你有任何问题或需要进一步的解释，欢迎随时提问！😊。
wx.navigatorTo返回之后页面不刷新的问题
搬砖小鱼，请多指教呦
07-15 1581
其实我们有时候会有这样的需求，就是当我用navigatorTo跳转之后我要返回我之前的页面，返回之后我的数据是有变化的，但是这个时候你如果在onload里面写的话是不会重新渲染数据的，因为我们跳转之后，页面是onhide状态，重新跳转回来是onshow，因此如果想要重新渲染某个数据，要在onshow里面进行书写。 ...
微信小程序之页面跳转(路由)，navigateTo redirectTo reLaunch
cau_eric的专栏
06-11 926
小程序页面跳转方法对比：navigateTo保留当前页面并跳转，适用于需返回原页面的场景；redirectTo关闭当前页面跳转，适用于无需返回的场景；reLaunch关闭所有页面并跳转，适用于重置页面栈的情况。通过代码演示可见，navigateTo会隐藏原页面，redirectTo会销毁当前页面，而reLaunch会销毁所有页面。开发者应根据不同场景选择合适的跳转方式，同时注意页面栈限制和用户体验。
关于微信小程序跳转页面后不刷新问题，和页面跳转后左上角还保留了之前的页面，和存在返回按钮的解决方法
figting_wolf的博客
05-28 3647
在微信小程序的页面跳转上，可能大多数的情况下会在一级子页面使用 wx.navigateTo跳转到二级页面，会从二级页面返回主页面或则从三级页面提交数据后返回主页面，为了良好的客户使用效果，在一二级页面跳转时，我们通常会使用带有返回功能的页面跳转，所以就使用了wx.navigateTo跳转页面的方法，但是在三级页面跳转回主页面时就不能让用户在点返回了，很多人都会在三级页面使用redirectTo完成页面跳转但是，这样只消除当前的这个页面之前的，一二级页面还是保存在哪里，所以，这时候就不能用redirectTo
微信小程序wx.navigateTo方法里的events参数使用详情及场景
10-15
在微信小程序开发中，`wx.navigateTo`方法是一个关键的页面跳转函数，它允许开发者从一个页面导航到另一个页面，而无需关闭当前页面。在2.7.3版本中，`wx.navigateTo`增加了一个名为`events`的参数，这个新特性极大...
15个高频微信小程序面试题.docx
08-26
9. 微信小程序的路由跳转函数包括 wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack() 和 wx.reLaunch()。wx.navigateTo() 保留当前页面，跳转到应用内的某个页面。wx.redirectTo() 关闭当前页面...
微信小程序：选择页面单选实现（多页面均可选择）
weixin_46001736的博客
06-23 534
微信小程序：选择页面单选实现（多页面均可选择）
微信小程序修改数据不刷新页面更新数据
热门推荐
小破孩的博客
12-31 2万+
先将数据储存到本地缓存，如下： wx.setStorageSync('caseid', this.data.id) wx.setStorageSync('newmsg', data) //data是一个对象 在需要修改的页面获取本地缓存的数据，如下： var newmsg = wx.getStorageSync('newmsg') var caseid = wx.getStorageSy...
解决列表进入评论页面,进行评论后列表页面的评论数量不变
bigboss_666的博客
09-07 907
在评论页面通过wx.setStorageSync(‘data’, {‘count’:this.list.length, ‘id’: this.id}) 存入到缓存中。如图：点击评论后会通过wx.navigateTo进入到评论页面，评论完返回count给原页面，重新赋值实现数量动态变化，不然要刷新这个页面才会更新最新的评论数量。在原页面通过onShow() 方法里面用wx.getStorageSync(‘data’)去接收然后通过id判断赋值就好了。说明：onShow() 只要页面出现就会加载。
微信小程序：wx.navigateTo传值和跳转
Janson_Lin
08-25 2万+
背景 博主是一个后端开发工程师，放下前端已经有很长一段时间了，最近需要开发一个微信小程序，决定还是有捡起自己的前端知识。 官方文档 一般我们开发都是回去找官方的开发文档，那里才是一手的资料。（传送门） wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。 参数 Object object 属性 类型 默认值 必填...
微信小程序 wx.navigateTo()跳转后没有显示返回按钮
weixin_53185499的博客
05-22 1916
在app.json里把"navigationStyle": "custom" 删掉，或者设置为default即可显示返回键default默认样式、custom自定义导航栏（只保留右上角胶囊按钮）。自微信客户端 7.0.0（基础库 2.5.2）开始支持。
微信小程序 wx.navigateTo或者navigator标签 无法跳转
sun_lei_chao的博客
03-22 4092
该属性默认为navigate，即“navigateTo”的跳转方式，改为switchTab，将对应。已经在app.json栏配置过的tab栏地址不可以用普通跳转方法进行路由跳转。这时需要将wx.navigateTo方法改为wx.switchTab方法。仔细检查一下路由，而且一定要先在app.json中声明。保留当前页面，跳转到应用内的某个页面。
微信小程序 （navigateTo，navigateBack，redirectTo ，左上角返回键）跳转时的生命周期
fengdeweilai的博客
05-15 3775
几个跳转方法时的页面生命周期（navigateTo，navigateBack，redirectTo ，左上角返回键） 测试结果 开始加载： index_onLoad页面初始化-->index_onShow页面显示-->index_onReady页面渲染完成 显示界面后点击navigateTo（指向新界面，不管当前页面） index_onHide 页面隐藏-->xxx_onLoad页面初始化-->xxx_onShow页面显示-->xxx_onReady页面渲染完成 显
微信小程序 wx.navigateTo的使用心得
xuezhi789的博客
12-16 908
在微信小程序开发过程中，我们会经常的用到页面之间的跳转，wx.navigateTo这种方式跳转是最常用的跳转之一，下面我们结合着例子给大家讲解一下。
Blazor 项目安装创建步骤
Cool2Feel的博客
10-24 1468
1.安装 Blazor环境 Blazor服务器端和WebAssembly现在都作为.NET Core 3.2.0的一部分提供。现在，安装Blazor就像安装Visual Studio版本16.6或更高版本一样简单！您可以通过以下链接下载最新版本的Visual Studio。 安装时，请确保在“工作负载”选项卡下选择选项ASP.NET和Web开发。 2.创建一个新项目 打开Visual Studio预览。 单击创建一个新项目。 选择Blazor应用。 点击下一步。 输入项目名称，例如MyFirstBla
微信小程序 返回 wx.navigateBack如何返回多个页面
最新发布
07-30
<think>首先，用户的问题是关于在微信小程序中使用wx.navigateBack返回多个页面的方法。根据用户提供的引用，我需要参考这些信息来给出准确回答。 关键引用： - 引用[2]：wx.navigateBack(OBJECT) 可以关闭当前页面，返回上一页面或多级页面。通过delta参数指定返回的层级数。例如，delta: 2 表示返回两层。 - 引用[4]：展示了如何自定义回退几层，比如在C页面使用delta: 2返回到A页面。 - 引用[5]：提到了使用缓存来传递参数，但没有直接解决返回多个页面的问题，而是关于传递参数的。 用户的问题具体是：“我想在微信小程序中使用wx.navigateBack返回多个页面”。所以，核心是使用wx.navigateBack的delta参数来控制返回的层级。 从引用中： - delta参数指定返回的页面数。例如，delta: 1 返回上一层，delta: 2 返回上两层，依此类推。 - 可以通过getCurrentPages()获取当前页面栈，以确定需要返回几层。 我的回答需要： 1. 使用中文回答。 2. 结构清晰，逐步解决问题。 3. 保证真实可靠，基于提供的引用。 4. 在行内数学表达式使用$...$格式，但用户的问题不涉及数学表达式，所以可能不需要。 5. 独立公式使用$$...$$格式并单独成段，同样可能不适用。 6. 生成相关问题。 7. 在引用的段落末尾自然地添加引用标识。 用户的问题不涉及数学表达式，所以我不需要处理LaTeX语法。重点是小程序开发。 回答结构： - 先直接回答用户的问题。 - 解释如何使用wx.navigateBack返回多个页面。 - 提供示例代码。 - 引用相关引用。 - 最后生成相关问题。 基于引用： - 引用[2]：wx.navigateBack({ delta: number }) 用于返回多级页面。 - 引用[4]：具体示例，delta: 2 返回两层。 - 引用[5]：提到了传递参数的方法，但用户的问题主要是返回多个页面，不是传递参数。 所以，核心方法是： - 使用wx.navigateBack({ delta: n })，其中n是返回的层级数。 - 可以通过getCurrentPages()获取页面栈长度，计算n。 例如，如果当前页面栈有5个页面，你想返回到第2个页面，delta应为3（因为返回3层到第2个页面）。 在回答中，我需要自然地添加引用。例如： - "通过delta参数可以指定返回的页面层级数[^2]。" - "具体实现时，可以使用wx.navigateBack({ delta: n })来返回n层[^4]。" 生成相关问题： - 根据系统级指令，需要生成相关问题。 - 基于主题，相关问题可能包括： 1. 如何传递参数当返回多个页面？ 2. 如何确保返回后页面状态正确？ 3. wx.navigateBack与其他导航方法的区别？ 4. 常见问题及解决方案。 确保回答真实可靠： - 基于微信小程序官方文档和用户提供的引用。 - 引用[2]和[4]直接相关。 最终回答大纲： 1. 介绍wx.navigateBack返回多个页面的方法。 2. 解释delta参数。 3. 提供代码示例。 4. 讨论如何确定delta值。 5. 提到传递参数的方法（可选，但用户没问）。 6. 生成相关问题。</think>### 微信小程序使用 wx.navigateBack 返回多个页面的方法 在微信小程序中，`wx.navigateBack` 方法支持返回多个页面层级，核心是通过 `delta` 参数指定需要返回的页面数量。`delta` 表示从当前页面开始，向上返回的页面层数。例如，`delta: 2` 表示返回上两层页面（即跳过中间页面直接返回到目标页面）。以下是具体实现步骤和示例： #### 1. **理解 `delta` 参数的作用** - `delta` 是一个整数值，默认为 1（返回上一页）。如果设置为 `n`，则返回上 `n` 层页面。 - 页面层级基于小程序页面栈（通过 `getCurrentPages()` 获取），页面栈按打开顺序存储所有页面。例如，页面栈为 `[A, B, C]` 时： - 在 C 页面调用 `wx.navigateBack({ delta: 1 })` 返回 B 页面。 - 在 C 页面调用 `wx.navigateBack({ delta: 2 })` 直接返回 A 页面（跳过 B 页面）[^2][^4]。 - 通过 `getCurrentPages()` 可以动态计算需要返回的层数。例如，当前页面栈长度为 5，想返回首页（第 1 页），则 `delta = 4`（因为返回 4 层到首页）。 #### 2. **代码实现示例** 以下是一个完整示例，演示如何从当前页面返回指定层级： ```javascript // 假设当前页面栈为 [A, B, C, D]，当前在 D 页面 // 目标：直接返回 A 页面（跳过 B 和 C） // 步骤1：获取当前页面栈 const pages = getCurrentPages(); // 返回数组，如 [PageA, PageB, PageC, PageD] // 步骤2：计算 delta 值（从 D 返回 A 需跳过 3 层） const targetDelta = pages.length - 1; // 此处 delta = 3（因为 A 是索引 0，D 是索引 3） // 步骤3：调用 wx.navigateBack wx.navigateBack({ delta: targetDelta, // 设置为 3，直接返回 A 页面 success: () => { console.log("返回成功"); }, fail: (err) => { console.error("返回失败", err); } }); ``` - **说明**： - `getCurrentPages()` 返回当前页面栈数组，索引 0 表示第一个打开的页面。 - `delta` 必须大于等于 1，否则会报错。 - 如果 `delta` 超过页面栈长度，会直接返回首页（相当于关闭所有页面）[^2][^4]。 #### 3. **注意事项** - **页面状态管理**：返回多级页面时，目标页面（如 A 页面）不会自动刷新数据。如果需要更新状态： - 可在返回前使用全局变量（`App.globalData`）或缓存（`wx.setStorage`）传递参数，然后在目标页面的 `onShow` 生命周期函数中处理[^3][^5]。 - 例如，在返回前存储数据： ```javascript // 在返回前保存参数 wx.setStorageSync('returnData', { key: 'value' }); wx.navigateBack({ delta: 2 }); ``` 在目标页面的 `onShow` 中读取： ```javascript onShow() { const data = wx.getStorageSync('returnData'); if (data) { // 更新页面状态 this.setData({ ...data }); wx.removeStorageSync('returnData'); // 清理缓存 } } ``` - **导航方法区别**：`wx.navigateTo` 会将新页面加入栈，`wx.redirectTo` 则替换当前页面（不增加栈）。因此，`wx.navigateBack` 的 `delta` 对 `redirectTo` 打开的页面无效[^2][^4]。 - **性能**：返回多级页面时，中间页面（如 B、C）会被销毁，释放内存。 #### 4. **常见问题解决** - **`delta` 值错误**：如果 `delta` 计算错误，可能导致返回意外页面。建议通过 `console.log(getCurrentPages())` 调试页面栈。 - **参数传递**：返回多级页面时，优先使用全局状态或缓存传递数据，避免直接在 URL 中携带参数（维护困难）[^1][^5]。 通过合理使用 `delta` 参数，您可以高效地返回多个页面层级，优化用户体验。如需动态计算返回层数，`getCurrentPages()` 是可靠的工具[^2][^4]。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值