微信小程序(三):返回上一级页面并刷新(页面栈)

本文讲解了微信小程序中如何在返回上一级页面时实现页面刷新,重点介绍了从onLoad到onShow方法的调整,以及如何在onShow中通过页面栈获取参数。

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

在很多业务场景之下,需要返回上一级页面,并进行刷新,在微信小程序中的wx.navigateBack方法中,返回上一页是不会刷新的。如果上一页的页面加载是在onLoad方法中触发的话,那么可以修改为在onShow方法中触发。

onLoad(Object query):页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow:页面显示/切入前台时触发。

值得注意的是:如果上一级的页面是从上上级页面跳过来的话,之前在onLoad方法中,使用的options获取的参数方法,那么当修改为onShow加载的时候就需要,将这个方法稍微修改一下,可以选择使用页面栈的方式,获取上上级页面传来的参数:

onLoad加载:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      project_id: options.project_id
    })
  },

修改为:

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    let pages = getCurrentPages(); //页面栈
    let currPage = pages[pages.length - 1]; //当前页面
    that.setData({
      name: currPage.options.name //获取上上级页面传的参数
    })
  },

文章若有错误之处还望帮忙指正,谢谢。

### 微信小程序页面跳转改为返回一级的操作 在微信小程序开发中,`wx.navigateBack()` 是用于实现返回一级页面的 API。该方法不会像 `wx.navigateTo()` 那样新增一个页面页面中,而是减少页面的数量返回至上一页面。 以下是关于如何使用 `wx.navigateBack()` 的具体说明: #### 方法介绍 `wx.navigateBack()` 可以通过参数控制返回的层级数,默认值为 1 层次。其语法如下: ```javascript wx.navigateBack({ delta: 1 // 返回页面数,如果 delta 大于现有页面数,则返回到首页。 }) ``` 此方法适用于需要返回至前一页或者多级页面的情况[^1]。 #### 实现代码示例 假设当前场景下有一个按钮点击事件触发返回操作,可以按照以下方式编写代码: ```javascript Page({ goBack: function () { wx.navigateBack({ delta: 1 // 返回一级页面 }); } }); ``` 在此代码片段中,当用户点击绑定该函数的组件时,程序将执行返回一级页面的动作[^2]。 #### 数据刷新与跨页面通信 需要注意的是,若希望在返回一级页面的同时更新数据,可以通过全局变量、本地缓存或事件广播等方式完成跨页面的数据传递。例如利用 onfire.js 这样的简单事件分发库来处理复杂的跨页面交互逻辑[^3]。 对于更简单的场景,也可以直接借助全局对象保存临时状态供其他页面读取: ```javascript // 在 B 页面设置数据 getApp().globalData.someValue = 'new value'; // A 页面获取数据 const app = getApp(); console.log(app.globalData.someValue); ``` 以上方案能够满足大多数基础需求,但对于复杂业务推荐采用专门的状态管理工具或框架优化体验。 #### 注意事项 - 小程序页面最大容量为 10 个页面,超过则无法继续压入新的页面实例。 - 如果尝试从 TabBar 页面调用 `wx.navigateBack()`,由于 TabBar 页面本身不在常规页面内,因此可能得不到预期效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值