【微信小程序】微信小程序返回上一个页面的同时刷新数据，专业术语：小程序跨页面通信

最新推荐文章于 2025-07-05 02:00:23 发布
最新推荐文章于 2025-07-05 02:00:23 发布
阅读量2.5k 收藏 10
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序 微信小程序刷新页面数据 微信小程序刷新上一个页面的数据 在当前页面修改上一个页面的数据 微信小程序无感刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37949737/article/details/103185577
本文介绍了在微信小程序中实现跨页面通信，特别是在B页面设置数据后返回A页面并刷新A页面数据的方法。推荐使用onfire.js库，提供绑定事件、触发事件等功能，实现简单无感刷新。另外还提到了通过页面栈调用上一个页面onload()的方案作为备选。

完美效果GIF图紧张制作中...

第一种方案  (推荐力度：100) 亲测有效

1.场景介绍

在小程序开发过程中，难免会遇到一种情况，当A页面需要用户设置数据 点击进入B页面，在B页面设置成功后返回并将设置的值传递给A页面。但是wx.navigateBack()并不支持返回传参。这种情况下就可以使用onfire.js，onfire.js 是一个很简单的事件分发的 Javascript 库（仅仅 0.9kb），简洁实用。

2.下载地址

onfire.js下载地址

  1. https://www.bootcdn.cn/onfire.js/
  2. https://gitee.com/mirrors/onfire-js

3.如何使用

将onfire.js下载下来并放置在开发项目某个目录下，例如根目录lib文件夹内。
在使用页面对应的js文件中引入该文件。
代码如下：

sendQapage.wxml

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小程序设计中的3D效果：Three.js集成方案
小程序开发
06-07 1260
随着用户对交互体验要求的提升，3D效果在电商商品展示（如360°查看运动鞋）、教育课件（如3D分子结构）、游戏化营销（如AR红包）等场景中越来越常见。但小程序由于其“双线程架构”限制，传统H5的3D开发方案无法直接复用。本文将聚焦微信小程序（主流市场占有率超80%），详细讲解Three.js的集成方案，覆盖从基础概念到项目实战的全流程。
探秘小程序领域：框架与云服务的结合
小程序开发
05-06 352
随着移动互联网的快速发展，小程序以其便捷、轻量级的特点受到了广泛关注。小程序开发需要高效的工具和服务支持，而框架与云服务的结合为小程序开发带来了新的机遇。本文的目的在于深入探讨小程序领域中框架与云服务结合的原理、方法和应用，涵盖从基础概念到实际项目开发的各个方面，帮助开发者了解如何利用这种结合提高小程序的开发效率和性能。本文首先介绍小程序领域的背景知识，包括核心概念和相关术语。然后详细阐述小程序框架与云服务结合的原理和架构，通过流程图和代码示例进行说明。
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
11-20
本文实例讲述了微信小程序返回上一级页面并刷新操作。分享给大家供大家参考，具体如下： 在很多业务场景之下，需要返回上一级页面，并进行刷新，在微信小程序中的wx.navigateBack 方法中，返回上一页是不会刷新的。如果上一页的页面加载是在onLoad方法中触发的话，那么可以修改为在onShow方法中触发。 onLoad(Object query)：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 onShow：页面显示/切入前台时触发。 值得注意的是：如果上一级的页面是从上上级页面跳过来的话，之前在onLoad方法中，使用的options获
微信小程序 跳转页面刷新页面的数据
aspire_cj的博客
05-26 3905
wx.navigateTo({ url: '/pages/attention/index', success: function (res) { var page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); console.log
微信小程序提交数据后返回上一页并且刷新数据实现
coderMrcc的博客
07-25 3714
微信小程序提交数据后返回上一页并且刷新数据
uniapp、微信小程序返回上页面刷新数据
精通前端技术，了解后端接口
11-21 1934
返回上页面刷新数据这个功能主要用于在当前页面点击跳转到另一个页面之后，在另一个页面对数据进行了操作，比如：阅读量，然后返回上页面，让阅读量随之改变。
微信小程序之实现页面自动刷新（B页面向云数据库添加完数据后自动返回A页面并且刷新显示刚添加的数据、wx.reLaunch()）
狸匪的博客
04-05 7160
❤ B页面向云数据库添加完数据后自动返回A页面并且刷新显示刚添加的数据 ❤ 今天忙了一天总算是没有白忙活，所做的一个微信小程序是交易平台，在发布完产品后想要跳转到商品首页，但是由于首页是一个tabBar，所以wx.navigateTo()API并不可行 ❤ 要想实现自动刷新，不如先实现手动下拉刷新，很简单 ❤ A页面操作 ①先开启手动下拉刷新功能，在json文件中添加声明： ②然后在js文件...
uniapp开发微信小程序，session是什么
最新发布
08-26
这个问题其实挺专业的，涉及到微信小程序的底层机制。 用户可能是个中级开发者，正在处理微信小程序的用户登录功能。从ta特意提到“session”这个术语来看，ta应该已经看过一些文档或者教程，但对这个抽象概念的...
小程序开发框架的未来走向，影响小程序领域
小程序开发
07-05 442
小程序自2017年微信首次推出以来，已成为移动互联网的“基础设施”——从电商购物到政务服务，从教育工具到本地生活，小程序覆盖了90%以上的高频场景。但随着用户对体验要求的提升（如3D交互、实时协作）、企业对开发效率的渴求（如多端同步上线），以及跨平台生态的竞争（微信、支付宝、抖音、百度等多平台并存），开发框架的升级已成为小程序行业向前的关键引擎。本文将聚焦“开发框架”这一技术核心，预测其未来5年的演进方向，并分析这些变化对开发者、企业与用户的影响。先用“早餐店老板的开发烦恼”引出核心问题；
微信小程序-修改页面数据并同步刷新上一个页面的数据
weixin_43843679的博客
08-21 4233
例：在A页面上数据操作完成后并使B页面上的数据同步刷新 方法一： 在A下面展示一些页面上的代码如下： var pages = getCurrentPages();//获取页面栈 if (pages.length > 1) { //上一个页面实例对象 var prePage = pages[pages.le...
JS 刷新当前页面 返回上一页并刷新的方法
03-14 1万+
reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet])                                                                                                                           参数： bForceGet， 可选
微信小程序从子页面退回父页面时的数据传递
weixin_34306676的博客
12-23 780
我们知道，在微信小程序中，从一个页面转到另一个页面，一般情况下可以通过navigate或redirect时候的url来携带参数，然后在目标页面的onLoad函数参数中获取这些url参数。例如： // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a...
微信小程序如何返回到上一个页面，并刷新页面呢？
热门推荐
m0_46130191的博客
06-25 1万+
微信小程序如何返回到上一个页面，并刷新页面
微信小程序 - 返回前一个页面时，执行前一个页面的函数方（wx.navigateBack 返回后，执行上一页的某个函数方法刷新数据）回前一个页面时，执行前一个页面的函数方法。支持改变 data 数据。
🏆 前端领域优质创作者
08-05 1万+
微信小程序返回上一页后，怎么执行上一页的函数方法，返回上一页后，怎么更新data数据，刷新或当前页刷新，微信小程序返回上一页的各种方法实例，微信小程序中带参数返回上一页，微信小程序-返回上一页并刷新页面(重新执行onLoad内函数，微信小程序返回后，执行上一页函数，微信小程序返回上一个页面并调用函数，如何在返回前一个页面时，执行前一个页面的函数方法，重新执行onLoad内函数达到刷新数据或改变data上的数据，微信小程序-返回前一个页面时，执行前一个页面的函数方（wx.navigateB
微信小程序开发中的数据同步与实时更新
2401_85258012的博客
06-10 881
微信小程序开发中的数据同步与实时更新是非常重要的功能，它可以使小程序在多个用户间实现数据的同步和实时更新。在本文中，我们将详细讲解如何实现数据同步与实时更新的功能，并提供相关代码案例。数据同步是指多个用户间的数据保持同步，即当一个用户修改了数据后，其他用户能够及时看到这些修改。首先，我们需要在云开发中创建一个数据集合，用于存储聊天消息。具体步骤与之前的创建数据集合相同。现在，我们将数据同步和实时更新结合起来，实现一个小程序中的实时聊天功能。接下来，我们需要在云开发中创建一个数据集合，用于存储我们的数据。
微信小程序跳转页面刷新内容
weixin_47116364的博客
03-02 1459
@微信小程序 微信小程序的跳转tabar刷新页面 新手到来 还请多多指教 url: '../find/find', //跳转页面tabar以及跳转页面的刷新 success() { var page = getCurrentPages().pop(); if (page == undefined || page == null) return;
小程序如何刷新当前页面
qingdouxiaohua的博客
06-08 6308
总结：小程序刷新当前页面的方法有多种，你可以根据具体的需求和场景选择合适的方法。在选择方法时，请考虑性能、数据一致性、用户体验和代码可读性等因素。
微信小程序--操作微信自带的返回按钮使上个页面刷新列表或刷新数据
passWordEnterX的博客
09-24 3560
首先要了解什么是页面栈框架以栈的形式维护了当前的所有页面。开发者可以使用函数获取当前页面栈，得到的是一个数组对象数组中第一个元素为首页，最后一个元素为当前页面。
微信小程序 返回上一页面时实现上一页面数据刷新（页面栈）
前端很杂，故名前端杂货铺 —— coderkey
12-08 2088
问题： 从A页面跳转到b页面后，再从b页面返回到a页面，同时刷新a页面的数据 解决方案： 页面B： var pages = getCurrentPages(); //当前页面栈 if (pages.length > 1) { var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象（a页面） var currPage = pages[pages.length - 1]; // 当前页面，若不对当前页面进行操作，可省去（b页面） befo
刷新页面小程序
03-19
<think>好的，用户想了解如何在小程序中实现页面刷新功能。我需要结合之前提供的引用内容来回答这个问题。首先，引用[1]提到uni-app小程序不支持Web那样的刷新方式，因为平台机制不同。引用[2]和[3]讨论了微信小程序的刷新方法，比如利用onShow生命周期或下拉刷新。 我应该分情况讨论，可能用户用的是uni-app还是原生微信小程序？不过用户的问题没有明确说明，所以可能需要覆盖两种情况。或者可能用户更关心微信小程序，但uni-app的解决方案也相关。 根据引用[2]，微信小程序可以通过在onShow里调用数据获取方法实现返回时的刷新。或者调用上一页的更新函数。另外，引用[3]提到下拉刷新的配置方法，全局或单个页面开启。 uni-app的情况，可能需要使用onShow或者特定的API，比如uni.startPullDownRefresh，但需要检查是否支持跨平台。 用户的问题是小程序实现页面刷新，可能需要分点回答：下拉刷新、生命周期函数触发、强制重新加载页面。同时注意不同平台的处理，比如uni-app需要兼容多个平台。 需要确保回答结构清晰，步骤正确，引用对应的引用标记。例如，下拉刷新的配置参考引用[3]，onShow方法参考引用[2]，uni-app的情况参考引用[1]。 可能还要提到uni-app中使用onLoad或者在onShow中重新加载数据，或者使用页面栈的方法调用上一页的函数。需要确保LaTeX格式正确，但这个问题可能不需要数学公式，所以主要注意代码块和引用标记。 最后，生成相关问题，比如下拉刷新如何实现，不同平台的区别，或者如何局部刷新。确保问题与主题相关，帮助用户深入理解。</think>在小程序中实现页面刷新的功能需要根据具体框架和平台特性选择合适的方法，以下是主要实现方式及原理说明： --- ### 一、通过生命周期函数实现局部刷新 1. **在`onShow`中重新加载数据** 微信小程序页面的`onShow`生命周期函数会在页面显示时触发，适合在此处执行数据更新： ```javascript onShow() { this.fetchData(); // 调用数据请求方法实现局部刷新[^2] } ``` 2. **强制调用`onLoad`方法** 通过重新执行`onLoad`可模拟页面初始化效果（需谨慎使用，可能影响性能）： ```javascript onShow() { this.onLoad(this.options); // 传递页面参数实现强制刷新[^2] } ``` --- ### 二、跨页面更新（组件间通信） 若需要**修改上一个页面的数据**，可通过页面栈获取前一页实例并调用其方法： ```javascript // 当前页面操作 const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; // 获取上一页实例 prevPage.updateData(); // 调用上一页的更新方法[^2] ``` --- ### 三、启用下拉刷新功能 1. **全局配置** 在`app.json`中开启下拉刷新： ```json { "window": { "enablePullDownRefresh": true } } ``` 2. **单页面配置** 在页面对应的`.json`文件中单独启用： ```json { "enablePullDownRefresh": true } ``` 3. **监听下拉事件** 在页面逻辑中处理刷新行为： ```javascript onPullDownRefresh() { this.fetchData(() => { wx.stopPullDownRefresh(); // 停止刷新动画[^3] }); } ``` --- ### 四、uni-app多平台适配 uni-app需通过**条件编译**处理平台差异，例如： ```javascript // #ifdef MP-WEIXIN wx.startPullDownRefresh(); // 微信小程序专用API // #endif // #ifdef H5 location.reload(); // Web端直接重载 // #endif ``` --- ### 总结对比 | 方法 | 适用场景 | 优点 | 缺点 | |-------------------|---------------------------|--------------------------|--------------------------| | `onShow`生命周期 | 返回页面时更新 | 无感知刷新，用户体验流畅 | 无法完全重置页面状态 | | 下拉刷新 | 用户主动触发的数据更新 | 符合用户习惯，交互明确 | 依赖手势操作，全局性刷新 | | 跨页面更新 | 多页面数据联动 | 精准控制数据流向 | 代码耦合度较高 | | uni-app条件编译 | 跨平台兼容 | 一次开发多端适配 | 需维护多平台代码逻辑 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上帝把我扔在人间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值