小程序页面栈的使用

开发小程序时,我们通常会遇到这样几种情况:

  • 当前页面返回上一个页面,执行上一个页面的指定方法
  • 当期页面执行某些操作(如删除),返回上一个页面且执行指定方法

仅使用生命周期已经不能满足要求,需要通过使用页面栈来实现以上两种场景的功能,核心代码如下:

//当前页面执行上一个页面固定方法代码
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];  //上一个页面
prevPage.setData({
  back:"0"
});
wx.navigateBack({
  delta:1
})
//第一种场景,将以上代码添加在onUnload生命周期函数中
//第二种场景,将以上代码添加在操作函数完成的回调函数中

//上一个页面指定方法代码
Page({

  /**
   * 页面的初始数据
   */
    back:'',
  },
  onShow: function() {
    if(this.data.back=='0'){
        //执行指定方法
    }
  }
}
### 微信小程序页面管理方法和API使用 #### 获取当前页面 在微信小程序中,`getCurrentPages()` API 可用于获取当前的页面。此函数返回一个数组,其中每个元素代表页面中的一页,最顶部的是当前显示的页面。 ```javascript const pages = getCurrentPages(); console.log(pages); // 输出当前页面的信息 ``` 这允许开发者访问并操作页面内的各个页面实例[^5]。 #### 页面跳转方式及其影响 不同的页面跳转方式会对页面造成不同影响: - **`wx.navigateTo`**: 跳转至应用内某个页面,保留当前页面。新页面被压入顶,原页面保持不变。 ```javascript wx.navigateTo({ url: 'newPage' }); ``` - **`wx.redirectTo`**: 关闭当前页面,跳转到应用内的某个页面。旧页面会被移除出,新的页面成为底唯一存在的页面。 ```javascript wx.redirectTo({ url: 'anotherPage' }); ``` - **`wx.switchTab`**: 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。仅适用于带有 tab 配置的应用场景。 ```javascript wx.switchTab({ url: '/pages/index/index' // 假设这是tabBar配置里的路径之一 }); ``` - **`wx.reLaunch`**: 关闭所有页面,打开到应用内的某个页面。清空整个页面后再加载指定的新页面作为唯一的页面存在。 ```javascript wx.reLaunch({ url: 'homePage' }); ``` 这些API调用会直接影响页面的状态变化,因此合理选择适合业务逻辑需求的方法非常重要[^4]。 #### 修改前一页面数据 利用 `getCurrentPages()` 返回的结果可以直接修改之前页面的数据并通过 `setData` 更新视图层的内容。例如,在A页导航到B页之后,可以在B页执行某些动作后更新A页的数据再退回到A页查看最新的状态。 ```javascript // B Page Code Example let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; // 上一个页面实例 prevPage.setData({ key: value }); // 更改上一个页面的数据属性 wx.navigateBack(); // 返回至上一页 ``` 这种方法使得跨页面间传递参数变得更加便捷高效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值