微信小程序-页面跳转数据传递

程序员NEO

发布于 2023-05-22 00:29:31

38600

代码可运行

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

运行总次数：0

代码可运行

在之前的文章当中我们都实现了一个功能就是可以从上一个页面传递数据给下一个页面，那么我们能不能从下一个页面传递数据给上一个页面呢，答案是可以的。

所以说本文这次主要介绍的内容就是返回上一个页面时传递参数给上一个页面的两种方式。

方式一

本质是拿到上一个页面对象，直接修改了上一个页面对象 data 中数据, 更改日志页面的逻辑文件然后，获取到所有的页面从中获取到需要返回的页面，得到对象实例之后通过实例对象更改数据：

// logs.js
Page({
  onLoad(options) {
    console.log(options);
    console.log(options.name);
    console.log(options.age);
  },
  myNavigatorBack() {
    wx.navigateBack({})

    let pages = getCurrentPages();
    let backPage = pages[pages.length -2];
    backPage.setData({message: "我是BNTang"});
  }
})

首页的 WXML：

<!--index.wxml-->
<text>首页</text>
<text>{{message}}</text>
<button bindtap="toLog">跳转到日志页面</button>

方式二

?> 本质就是触发自定义事件，通过事件参数传递数据

跳转到下一个页面的时候，传递一个自定义事件给下一个页面：

// index.js
Page({
  data: {
    message: "BNTang"
  },
  toLog() {
    wx.navigateTo({
      url: '/pages/logs/logs?name=BNTang&age=18',

      events: {
        abc(data) {
          console.log("自定义事件中：" + data);
        }
      }
    })
  }
})

日志页面的 js 文件内容：

// logs.js
Page({
  onLoad(options) {
    console.log(options);
    console.log(options.name);
    console.log(options.age);
  },
  myNavigatorBack() {
    wx.navigateBack({})
      
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("abc", {msg: "我是BNTang"});
  }
})