• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 微信小程序中如何实现子向父传参(页面通信)

微信小程序中如何实现子向父传参(页面通信)

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了微信小程序,小程序子向父传参,小程序页面通信等相关知识,希望对您有所帮助

本篇文章带大家了解一下微信小程序中子页面如何向父页面传递参数,希望对大家有所帮助!


微信小程序中如何实现子向父传参(页面通信)


微信小程序子页面如何向父页面传递参数

有时候我们在做微信小程序项目的时候,会遇到如下的情况:有一个列表页,页面有一个筛选条件,点击之后跳转页面,进行条件的选择,选择完之后返回到列表页,根据筛选的条件进行数据的查询。一般这种情况更多的时候,我们看到的都是通过弹框形式来进行筛选条件进行处理的。那如果我们就想要跳转页面的这种交互方式,我们如何从子页面把参数传递到父页面呢?

问题

wx.navigateBack 无法携带参数,子页面无法向父页面传递参数。

子页面操作父页面数据

这个地方留意一下,我们是说的子页面操作父页面的数据。

在官方文档上有一个getCurrentPages的API(官网描述如下):

PageObject[] getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

不要尝试修改页面栈,会导致路由以及页面状态错误。

不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

通过getCurrentPages这个API,我们可以获取到页面栈的数据,所以就可以获取到指定的页面,在子页面通过修改父页面数据的方式,我们就可以实现子页面向父页面传参的功能。

const pages = getCurrentPages();const gotoPage = pages[pages.length - 1];

所以pages[pages.length - 1]就为当前页面,父页面就为pages[pages.length - 2],依次类推,我们可以获取到其他的祖先页面。

然后再使用 setData 方法 gotoPage.setData({xxx: ''})来修改设置父页面的数据,从而达到子页面向父页面传递参数的目的。之后再通过 wx.navigateBack 进行页面返回即可。

其他解决方式

组件

弹框

如我们文章开头提到,如果是需要从子页面向父页面传递参数,那我们可以通过弹框的形式显示内容,选择完相应的数据之后,隐藏当前的弹框或者组件。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 手把手教你在微信小程序中使用canvas绘制天气折线图(附代码)
  • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解
  • uniapp实现微信小程序全局分享的示例代码
  • 浅析微信小程序中自定义组件的方法
  • 微信小程序发布新版本时自动提示用户更新的方法
  • 微信小程序wx.request使用POST请求时后端无法获取数据解决办法
  • 微信小程序如何获取到openid和session_key
  • PHP微信小程序解包过程实例详解
  • 微信小程序中的button按钮宽度设置无效怎么办
  • 微信小程序反编译提取源代码方法

相关文章

  • 2022-04-29纯CSS3怎么创建瀑布流布局?columns方法浅析
  • 2022-04-29如何使用thinkphp5.1的数组查询对象
  • 2022-04-29html中circle是什么意思
  • 2022-04-29实例详解之怎样使用css实现3D穿梭效果
  • 2022-04-29Linux 定时检测 MySQL 数据库是否宕机并自动重启
  • 2022-04-29thinkphp模型定义
  • 2022-04-29你知道Golang怎么封装PHP常用函数吗!
  • 2022-04-29Photoshop制作油漆溢出特效的艺术字教程
  • 2022-04-29如何解决微信公众平台php乱码问题
  • 2022-04-29java中定义数组的格式有哪几种

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 织梦系统“模块管理”里面的“模块列表”显示
    • 什么是依赖注入?在Angular中怎么实现?
    • 4种移动端适配方法
    • 深入浅析Bootstrap中的自动定位浮标
    • 关于ThinkPHP的join关联查询不使用默认的表前缀
    • 正则表达式中两个反斜杠的匹配规则详解
    • 干货分享:CSS 9种方法实现不定宽高的垂直水平居中
    • 聊聊node中怎么使用Nest.js 实现简易版请求监控
    • Photoshop制作漂亮糖果文字效果
    • 5款优秀的在线表单设计器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有