微信小程序页面传值详解

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数。例如:

  1. // 源页面A相关代码

  2.  

    wx.navigateTo({

  3.  

    url: "/pages/mypage/mypage?a=1&b=2"

  4.  

    })

  5.  

  6.  

    // 目标页面B相关代码

  7.  

    Page({

  8.  

    onLoad: function (options) {

  9.  

    var a = options.a; // 值:1

  10.  

    var b = options.b; // 值:2

  11.  

    }

  12.  

    })

  13.  

但是,这种方式只有在目标页面还没有创建的时候,才有效。因为一个页面的onLoad方法在页面的生命周期中,只执行一次。

方法1:使用全局数据存储
  • 将要传递的数据,存储在App对象上(比如globalData属性)。
  • 将要传递的数据,存储在小程序的本地数据缓存(Storage)中。

例如,我们在将要退出页面B的时候,作如下调用:

  1. //=== 1. 存储到app对象上的方式 ========

  2.  

    var app = getApp()

  3.  

    app.globalData.mydata = {a:1, b:2}; //存储数据到app对象上

  4.  

    wx.navigateBack(); //返回上一个页面

  5.  

  6.  

    //=== 2.存储到数据缓存的方式 =========

  7.  

    wx.setStorage({

  8.  

    key: "mydata",

  9.  

    data: {a:1, b:2},

  10.  

    success: function () {

  11.  

    wx.navigateBack(); //返回上一个页面

  12.  

    }

  13.  

    })

这样一来,当返回到上一个页面的时候,可以通过读取这些全局存储区域,来获取到我们需要的数据。

不过,这种方式也是有很明显的缺点的。由于是全局数据存储,所以当你存入了那些数据后,必须谨慎的去管理这些全局数据(何时被销毁),否则一不小心,就会产生副作用。

方法2:从页面路由栈中直接获取和操作目标Page对象

这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。

如下所示:

  1. var pages = getCurrentPages();

  2.  

    var currPage = pages[pages.length - 1]; //当前页面

  3.  

    var prevPage = pages[pages.length - 2]; //上一个页面

  4.  

  5.  

    //直接调用上一个页面的setData()方法,把数据存到上一个页面中去

  6.  

    prevPage.setData({

  7.  

    mydata: {a:1, b:2}

  8.  

    })

比起全局数据存储的方式,这种方式在逻辑上要清晰得多,也不存在对数据的销毁有额外的管理工作。

原文地址:https://www.cnblogs.com/hss-blog/p/9284913.html

时间: 2024-10-09 21:43:44

微信小程序页面传值详解的相关文章

微信小程序的配置详解

1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成.每一项代表对应页面的[路径+文件名]信息,数组的第一项代表小程序的初始页面.小程序中新增/减少页面,都需要对 pages 数组进行修改. 文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合. 2>window 用于设置小程序的

微信小程序 授权登录详解(附完整源码)

一.前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否

微信小程序要调数据 微信小程序 for 循环详解

现在要完成这样的效果: 我的代码是: <view class="l-setlist clr" > <template name="listab"> <image src="{{pic}}" class="fl setpic"></image> <view class="fr"> <view class="listbox"&

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面

[转]微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json 微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app.json错误 要在app.json(公共文件中)建立页面跳转page.如下图 不管是跳转到哪个页面,必须在json里的pages数组里面填写路径,不然跳转失败 跳

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

微信支付之扫码、APP、小程序支付接入详解

做电商平台的小伙伴都知道,支付服务是必不可少的一部分,今天我们开始就说说支付服务的接入及实现.目前在国内,几乎90%中小公司的支付系统都离不开微信支付和支付宝支付.那么大家要思考了,为什么微信支付和支付宝支付能作为大多数公司接入的首选呢?其实这个问题大多小伙伴应该是很清楚的,说白了就是人家有庞大的用户流量,目前微信在国内的用户已突破10亿,支付宝也接近8亿左右,如此庞大的用户群体,你还会选择其他的第三方支付(微博钱包.财付通.快钱等)吗,作为普通客户,大家都希望能方便快捷,谁会为了在一个平台买点

微信小程序页面跳转、逻辑层模块化

一.页面的跳转 微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式. 函数跳转: 1.wx.navigateTo(OBJECT): wx.navigateTo({ url: 'test?id=1' })//保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. //问号后面的参数为传递至指定页面onload方法内的参数.id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的. 2.wx.redirectTo(OBJECT): wx

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况