微信小程序 子级页面返回父级并把子级参数带回父级实现方法

说到页面之间的跳转，跳转中顺带些参数，在程序猿的生活中是很常用的，下面就让我们来看看吧！

这里有两种方法来解决：

方法一

就是我们常用的本地储存，在当前子级页面用（ wx.setStorage || wx.setStorageSync ）储存好，跳转到父级页面的时候取出，采用（ wx.getStorage || wx.getStorageSync ），在这里，退出的时候一定要记得清除缓存哦！！！（ wx.clearStorage || wx.clearStorageSync ）

方法二

方法二就要用到我们小程序的知识了

var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 父级页面（返回上个页面）
// 以此类推 pages.length - n
prevPage.setData({
 address: 6666
})

以上是设置父级页面 data 里的 address 为6666，想带什么，setData 里放什么

最后，返回上级（父级）页面

wx.navigateBack({
 delta: 1 // 返回的页面数量
})

方法三：

这个方法就是通过全局变量来获取，在 app.js 中设置全局变量，在当前子级页面赋值，返回父级后，取值即可

globalData: {
  key: value,
}

注意：（建议）

方法一、方法二的父级在 onShow 生命周期里执行

onShow: function () {
  // 执行内容
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    微信小程序购物车、父子组件传值及calc的注意事项总结

    前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

  • 微信小程序--onShareAppMessage分享参数用处(页面分享)

    微信小程序--onShareAppMessage分享参数用处(页面分享)

    今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右上角就会出现三个小白点 title:分享的标题. desc:分享一段描述. path:这个参数有点意思.以前在微信中的分享一般都是url.这里是当前页面这里应该是pages/index?id=123这里的id目前还不知道是什么. 也就是说以后你可以在微信中像分享一个网页一样分享一个页面

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序实现带参数的分享功能(两种方法)

    微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () { return { title: '弹出分享时显示的分享标题', desc: '分享页面的内容', path: '/page/user?id=123' // 路径,传递参数到指定页面. } } 第二种 自定义按钮实现分享,在page中添加一个带有open-type='share'的button标签

  • Java中基于Shiro,JWT实现微信小程序登录完整例子及实现过程

    小程序官方流程图如下,官方地址 : https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html : 本文是对接微信小程序自定义登录的一个完整例子实现 ,技术栈为 : SpringBoot+Shiro+JWT+JPA+Redis. 如果对该例子比较感兴趣或者觉得言语表达比较啰嗦,可查看完整的项目地址 : https://github.com/EalenXie/shiro-jwt-applet

  • 微信小程序自定义组件封装及父子间组件传值的方法

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

  • 微信小程序教程系列之页面跳转和参数传递（6）

    微信小程序教程系列之页面跳转和参数传递（6）

    关于页面的跳转,微信小程序提供了3种方法: 方法一: 使用API  wx.navigateTo()函数 示例: 首先先新建一个test页面 如何新建页面? 请到先阅读下面教程 微信小程序的新建页面 -- 微信小程序教程系列(4) index.wxml: 在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数 index.js: 在index.js中的Page函数内部,添加changeToTest 函数,函数里面使用wx.navigateTo,写上需要跳转的页面,里面

  • 微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现 前言: 在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下. 在展示demo前,我们需要先简单的建好项目文件夹做好准备.如下: 标签实现 小程序里面有一个类似于a标签的navigator标签,用来做跳转处理. index页面: <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</n

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序之分享页面如何返回首页的示例

    微信小程序之分享页面如何返回首页的示例

    做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下: <!--index.wxml--> <view class="container">

  • 微信小程序简洁登录页面的实现(附源码)

    微信小程序简洁登录页面的实现(附源码)

    目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- v2父容器 子view使用绝对布局 --> <view class="v2"> <view class="dltext"

  • jsf实现微信小程序简洁登录页面（附源码）

    jsf实现微信小程序简洁登录页面（附源码）

    上图: 用户不存在:  代码: login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">    <!-- v2父容器  子view使用绝对布局 -->    <view class="v2">      <view class="dltext" style="wi

  • 微信小程序实现点击返回顶层的方法

    最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo

  • 详解微信小程序应用和页面生命周期

    详解微信小程序应用和页面生命周期

    目录 什么是生命周期 生命周期的分类 小程序的页面生命周期函数 什么是生命周期 生命周期(Life Cycle)是指一个对象从创建→>运行>销毁的整个阶段,强调的是一个时间段.如: 张三出生,表示这个人生命周期的开始 张三离世,表示这个人生命周期的结束 中间张三的一生,就是张三的生命周期 我们可以把每个小程序运行的过程,也概括为生命周期: 小程序的启动,表示生命周期的开始 小程序的关闭,表示生命周期的结束 中间小程序运行的过程,就是小程序的生命周期 生命周期的分类 在小程序中,生命周期分为两类

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • 微信小程序 设置启动页面的两种方法

    微信小程序 设置启动页面的两种方法

     微信小程序 设置启动页面 在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页面,那么我们就需要设置一下启动页面了有两种方法. 方法一 在app.json文件中,pages数组,设置在第一个的页面就是默认启动页面,所以你只需要调整你当前开发的页面顺序就好了. 方法二 在编译的地方设置,你只需要设置页面的路径,勾选上"使用以上条件编译",如果页面需要参数,那可以把参数也传上.这样启动的就是你设置的页面. 感谢阅读

  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&

  • 微信小程序之判断页面滚动方向的示例代码

    微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度 <!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}

随机推荐