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


    一、回退上一级页面 beforePage

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

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

    二、回退 3 级页面 wx.navigateBack

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

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

    onUnload:function(){
      wx.navigateBack({
        delta: 3
      })
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

      正常 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
    })
    
    • 1
    • 2
    • 3
    • 4

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

    onUnload() {
      console.log('返回按钮')
      wx.reLaunch({
        url: '/pages/index/index'
      })
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

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

      页面需要带参进来的情况

    onShow() {
      this.onLoad({
        age: '18'
      })
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

      页面不需要带参的情况

    onShow() {
      this.onLoad()
    }
    
    • 1
    • 2
    • 3

    五、带参数返回上个页面

      当前页面

    var pages = getCurrentPages();   //当前页面
    var prevPage = pages[pages.length - 2];   //上个页面
    // 直接给上一个页面赋值
    prevPage.setData({
      params: this.data.params
    });
    
    wx.navigateBack({
      delta: 1
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

      要跳转的页面

    data: {
      params: null,
    },
    
    onShow: function () {
      console.log(this.data.params)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

      在 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'
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5

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

    app.globalData.e.name = c.pname;
    app.globalData.e.age = c.page;
    wx.navigateTo({
      url: 'B'
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5

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

    this.obj = app.globalData.e,
    console.log(obj.name);
    console.log(obj.age);
    
    • 1
    • 2
    • 3
  • 相关阅读:
    初识javaweb2 tomcat
    阿里云数据库RDS有哪些?细数关系型数据库大全
    GB28181设备接入端如何实现校时?
    WPF Datagrid Header数据绑定,表头复选框实现全选、全否、部分选中,根据条目动态变化
    【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口
    使用pocsuite3模块编写poc脚本
    BGP基础
    Docker集群部署DockerCompose
    PySpark 优雅的解决依赖包管理
    现代数据栈中的消费层
  • 原文地址:https://blog.csdn.net/qq_43592352/article/details/125559585