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

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

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


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


方式一


本质是拿到上一个页面对象,直接修改了上一个页面对象 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"});
  }
})
目录
相关文章
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
38 1
|
2月前
|
小程序 JavaScript 开发工具
|
2月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
71 4
|
2月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
44 3
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
3月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
4月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
561 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
684 1