zoukankan      html  css  js  c++  java
  • 微信小程序-返回并更新上一页面的数据

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


    微信小程序视频教程

  • 相关阅读:
    【Express系列】第3篇——接入mysql
    【Express系列】第2篇——主程序的改造
    【Express系列】第1篇——项目创建
    AngularJS内置指令
    node服务端搭建学习笔记
    生成ssh key
    webstorm的常用操作
    VSCode 常用插件
    php集成包
    composer安装特别慢的解决方案
  • 原文地址:https://www.cnblogs.com/coder306/p/13087658.html
Copyright © 2011-2022 走看看