微信小程序-返回并更新上一页面的数据

摘要:
在小程序开发过程中经常会满足这一要求。当前页面数据需要传输到上一页,但wx NavigateBack()无法传递数据。一般方法是将当前页面数据放入本地缓存,然后从缓存中取出前一页。此外,还有另一种方法可以熟练地使用页面堆栈。getCurrentPages()函数用于获取当前页面堆栈的实例,该实例以数组形式按堆栈顺序给出。第一个元素是第一页,最后一个元素是当前页。重点在这里。获取当前页面上上一页的实例对象,然后调用此对象的方法来完成数据传输。微信小程序视频教程

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是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实例。

微信小程序视频教程

免责声明:文章转载自《微信小程序-返回并更新上一页面的数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MFC 三种消息经典算法_数组下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序wx.request请求服务器json数据并渲染到页面

【原文出自】: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可。现在给大家讲一下,微信小程序的wx.request...

微信小程序post请求和get请求

wx.request({ url: 'https://URL', //这里''里面填写你的服务器API接口的路径 data: {}, //这里是可以填写服务器需要的参数 method: 'GET', // 声明GET请求 // header: {}, // 设置请求的 header,GET请求可以不填...

[小程序]微信小程序登陆并获取用户信息

1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid,这个id是用户唯一的id并且不会改变,可以把这个id返回给小程序端小程序端本地保存openid 3.获取用户信息很简单,并且不需要自己的服务器处理,只需要小...

微信小程序实现node的自动打包上传代码

在平时的小程序开发过程中,可能会遇到下面这些小问题,虽然不影响开发过程,但是开发体验确会差一点,具体如下: 每次在编辑器中运行构建命令,第一次还需要手动打开微信开发者工具,打开指定项目 每次准备发布体验版时,需要先在本地打包,等待打包完成,在开发者工具中点击上传代码 那么怎么避免重复的操作,特别是比较频繁的发布场景,可能每天需要多次的等待及上传操作...

微信小程序基础学习笔记2:数据绑定相关

VUE语法 所有前端wxml中绑定的数据变量,都要定义在data中。 绑定事件,bindTap res ,取数据 currentTarget->dataset 这里的data-id中的data必须写,后面的id、title等可以任意自定义,H5的新属性,后面的id全部要用小写 myTap:function(res){ console.write }...

微信小程序上传图片 并和文字一起提交 (有接口)

实现功能如图 html代码 <viewclass="main"> <viewclass="card"> <viewclass="card-up"> <view>身份证</view> <view>上传身份证</view> </view> <image...