小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据。

一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出。

除此之外还有一种办法,巧妙利用页面栈。

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

重点就在这里,在当前页面拿到上一个页面的实例对象,然后调用该对象的方法完成数据传递。

页面A

Page({
data: {
name: ''
},
...
,
//更新name
changeData: function(name){
this.setData({
name: name
})
}
})

页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name

Page({
//此方法用于文本框输入回调
inputTyping: function (e) {
//获取页面栈
var pages = getCurrentPages();
if(pages.length > 1){
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//关键在这里
prePage.changeData(e.detail.value)
}
}
})

这样就可以实现数据传递给上一个页面,要注意页面A必须使用wx.navigateTo跳转到页面B,不能使用wx.redirectTo,这样会关闭上一个页面,导致页面B无法获取上一页Page实例。

微信小程序视频教程

微信小程序-返回并更新上一页面的数据的更多相关文章

  1. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  2. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  3. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  4. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  5. 【微信小程序】scroll-view 的上拉加载和下拉刷新

    1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...

  6. 微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离

    15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件 ...

  7. 微信小程序 下拉刷新 上拉加载

    1.下拉刷新  小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新. ...

  8. 直击根源:微信小程序中web-view再次刷新后页面需要退两次

    背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...

  9. 前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

随机推荐

  1. 一键部署open***服务

    一键部署超级简单易用的openvpn服务器,支持多证书+多账号[密码]认证 一. 服务器端部署 项目地址:https://github.com/guoew/openvpn-install 1.1. 下 ...

  2. [PHP学习教程 - 类库]002.FTP操作(FTP)

    引言:FTP是大家上传至站点服务器必须要使用的协议.现在常用的FTP客户端工具也很多,如:8uftp,FlashFXP,....但是使用客户端工具就无法真正与自动化联系起来.所以今天,我们为大家讲一下 ...

  3. [PHP插件教程]003.PhpRedis

    PhpRedis 介绍 Mac安装步骤 安装Redis 安装PhpRedis 示例代码 介绍 Redis是一个高性能的key-value数据库. Redis提供了Java,C/C++,C#,PHP,J ...

  4. docker出现相同的image条目的删除办法

    一.问题:在测试docker安装的prometheus系统时,由于异常操作,使用docker image ls出现了两条一模一样的条目,如下: [root@ELK prometheus]# docke ...

  5. Java实现 蓝桥杯VIP 算法训练 步与血(递推 || DFS)

    试题 算法训练 步与血 问题描述 有n*n的方格,其中有m个障碍,第i个障碍会消耗你p[i]点血.初始你有C点血,你需要从(1,1)到(n,n),并保证血量大于0,求最小步数. 输入格式 第一行3个整 ...

  6. Java实现蓝桥杯VIP算法训练 相邻字母

    试题 算法训练 相邻字母 资源限制 时间限制:1.0s 内存限制:256.0MB [问题描述] 从键盘输入一个英文字母,要求按字母的顺序打印出3个相邻的字母,指定的字母在中间.若指定的字母为Z,则打印 ...

  7. Linux 最大有效权限与删除ACL

    最大有效权限mask mask是用来指定最大有效权限的.如果给用户赋予了acl权限,则需要与mask权限”相与“才能得到用户的真正权限 setfacl -m m:rx 文件名,指定最大有效权限.例如: ...

  8. tensorflow2.0学习笔记第一章第四节

    1.4神经网络实现鸢尾花分类 import tensorflow as tf from sklearn import datasets import pandas as pd import numpy ...

  9. Cypress系列(17)- 查找页面元素的辅助方法

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 单一的基础定位元素方法并不一定能满 ...

  10. ubuntu12.04 empathy添加qq登陆

    1,