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

2023-05-22 08:29:31 浏览数 (1)

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

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

方式一

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

代码语言:javascript复制
// 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:

代码语言:javascript复制
<!--index.wxml-->
<text>首页</text>
<text>{{message}}</text>
<button bindtap="toLog">跳转到日志页面</button>

方式二

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

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

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

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

日志页面的 js 文件内容:

代码语言:javascript复制
// 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"});
  }
})

0 人点赞