微信小程序页面返回且带回数据

Posted 2022-07-04 征途黯然.

一、回退上一级页面 beforePage

  返回页面同时需要刷新数据

var pages = getCurrentPages(); //当前页面
var beforePage = pages[pages.length - 2]; //前一页
beforePage.onLoad(); // 执行前一个页面的onLoad方法
wx.navigateBack(
  delta: 1
);

二、回退 3 级页面 wx.navigateBack

  当我们页面跳转到三级页面后，点击左上角的返回按钮，能够直接返回到首页

  wx.navigateBack 这个方法可以返回界面 在 onUnload 触发的时候可以执行。但是我发现这个方法确实可以回到首页，但是他会一个一个界面返回，不能直接返回到首页

onUnload:function()
  wx.navigateBack(
    delta: 3
  )

  正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面，如果要返回到 A 界面就会出现 C -> B -> A 的效果。
  如果想实现 A -> B -> C 当 C 点击返回时， 实现直接 C -> A 这种效果就只能 A -> B 通过

wx.navigateTo 跳转 B -> C 通过 wx.redirectTo 跳转，跳转触发后 B 页面就会被销毁，C 页面再返回 wx.navigateBack 就会直接到 A 了。
wx.redirectTo(
  url: url
)

三、回退 4 级或者更多级页面，wx.reLaunch

onUnload() 
  console.log('返回按钮')
  wx.reLaunch(
    url: '/pages/index/index'
  )

四、返回多级页面，同时刷新

  比如我们现在希望在第四级页面返回首页后刷新，我们需要在 onShow 方法中调用 onLoad() 方法

  页面需要带参进来的情况

onShow() 
  this.onLoad(
    age: '18'
  )

  页面不需要带参的情况

onShow() 
  this.onLoad()

五、带参数返回上个页面

  当前页面

var pages = getCurrentPages();   //当前页面
var prevPage = pages[pages.length - 2];   //上个页面
// 直接给上一个页面赋值
prevPage.setData(
  params: this.data.params
);

wx.navigateBack(
  delta: 1
)

  要跳转的页面

data: 
  params: null,
,

onShow: function () 
  console.log(this.data.params)

  在 data 里定义属性后，也可以获取到上个页面传过来的值

六、对于携带不同参数的情况，页面跳转最好不要采用带参跳转方式，采用全局变量方式比较好

  比如：
  从 A 页面到 B 页面带的对象 a = name: ‘小明’, age: ‘18’
  从 C 页面到 B 页面带的对象 c = pname: ‘小红’, page: ‘17’
  像这样对象内部的字段名称不一样，B页面在拿到该对象后无法解析

  在全局中定义变量 e ，在 A 页面中跳转前设置

app.globalData.e.name = a.name;
app.globalData.e.age = a.age;
wx.navigateTo(
  url: 'B'
)

  在全局中定义变量 e ,在 C 页面中跳转前设置

app.globalData.e.name = c.pname;
app.globalData.e.age = c.page;
wx.navigateTo(
  url: 'B'
)

  在 B 页面 onLoad() 方法中取值

this.obj = app.globalData.e,
console.log(obj.name);
console.log(obj.age);