微信小程序页面返回

摘要:
如果你想实现A-˃B-˃C,当C点击返回时,你可以实现直接的C-˃A效果。你只能A-˃B跳wx。navigationTo B-˃C通过wx.redirectTo跳转。触发跳转后,页面B将被销毁。当C页返回wx时。导航返回,它将直接转到A。
 

一、回退上一级页面 beforePage

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

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

二、回退 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'
  })
}

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

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

  • 页面需要带参进来的情况
onShow() {
  this.onLoad({
    uid: this.$parent.globalData.enterid
  })
}
  • 页面不需要带参的情况
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 () {
  let pages = getCurrentPages();
  let currPage = pages[pages.length - 1];
  // 将携带的参数赋值
  this.setData({
    params: currPage.data.params,
  });
}

经过测试发现只在 data 里定义参数,不写 onShow() 方法,也可以获取到上个页面传过来的值

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

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

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

this.$parent.globalData.e.name = a.name;
this.$parent.globalData.e.age = a.age;
wx.navigateTo({
  url: 'B'
})

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

this.$parent.globalData.e.name = c.pname;
this.$parent.globalData.e.age = c.page;
wx.navigateTo({
  url: 'B'
})

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

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

免责声明:文章转载自《微信小程序页面返回》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android 监听键盘弹出和收起.python3学习笔记11(函数)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序 生命周期函数详解

微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data 数据中声明一个变量 isClose 默认为 true 用于判断 是否为从入口打开,当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数在此函数中将...

微信小程序-返回并更新上一页面的数据

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据。 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出。 除此之外还有一种办法,巧妙利用页面栈。 getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前...

WordPress版微信小程序2.2.8版发布

距离上次更新已经一个月了,这期间对WordPress版微信小程序做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏。同时,优化了文章页面的功能布局,在评论区把常用的功能:转发,复制,点赞,赞赏,都集中在一个操作面板,同时为了不占用文章页面的空间,做了隐藏。 WordPress版微信小程序开放源码地址:https://github...

屏蔽微信内置底部前进后退按钮(很迫切的需求)

在使用window.location.href进行页面跳转或者react内部项目使用 this.props.history.push进行页面跳转时,做好的h5页面放在微信里,底部会出选前进后退的按钮,如下图: 废话不多说,解决问题: 第一种情况:如果只是页面之间跳转,使用window.location.replace 代替window.location.h...

微信小程序之条件判断

前文: 今天踩了一下午的坑,但是确实很简单的问题。 我说一下需求:扫描商品的二维码,从而判断,同一个二维码不可多次扫描; 点击扫一扫 会在灰色区域展示 扫描的商品信息,比如商品名称,商品码等,但是我们的需求是一物一码,即使是同一个商品也是不同的商品码。 错误示例: 最开始我的想法是做判断,因为我会在相对应的js文件中定义一个 productList:[...

微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行

相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全,后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中,最简单的就是在启动页添加跳转成功的方法 wx.switchTab({ url: '/pages/index/index', succe...