微信小程序页面传值详解
我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数。例如:
- // 源页面A相关代码
- wx.navigateTo({
- url: "/pages/mypage/mypage?a=1&b=2"
- })
- // 目标页面B相关代码
- Page({
- onLoad: function (options) {
- var a = options.a; // 值:1
- var b = options.b; // 值:2
- }
- })
但是,这种方式只有在目标页面还没有创建的时候,才有效。因为一个页面的onLoad方法在页面的生命周期中,只执行一次。
方法1:使用全局数据存储
- 将要传递的数据,存储在App对象上(比如globalData属性)。
- 将要传递的数据,存储在小程序的本地数据缓存(Storage)中。
例如,我们在将要退出页面B的时候,作如下调用:
- //=== 1. 存储到app对象上的方式 ========
- var app = getApp()
- app.globalData.mydata = {a:1, b:2}; //存储数据到app对象上
- wx.navigateBack(); //返回上一个页面
- //=== 2.存储到数据缓存的方式 =========
- wx.setStorage({
- key: "mydata",
- data: {a:1, b:2},
- success: function () {
- wx.navigateBack(); //返回上一个页面
- }
- })
这样一来,当返回到上一个页面的时候,可以通过读取这些全局存储区域,来获取到我们需要的数据。
不过,这种方式也是有很明显的缺点的。由于是全局数据存储,所以当你存入了那些数据后,必须谨慎的去管理这些全局数据(何时被销毁),否则一不小心,就会产生副作用。
方法2:从页面路由栈中直接获取和操作目标Page对象
这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。
如下所示:
- var pages = getCurrentPages();
- var currPage = pages[pages.length - 1]; //当前页面
- var prevPage = pages[pages.length - 2]; //上一个页面
- //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
- prevPage.setData({
- mydata: {a:1, b:2}
- })
比起全局数据存储的方式,这种方式在逻辑上要清晰得多,也不存在对数据的销毁有额外的管理工作。
微信小程序页面传值详解的更多相关文章
- 微信小程序开发之详解生命周期方法
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
- 微信小程序的配置详解
1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 微信小程序开发者工具详解
一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序 Mustache语法详解
最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究 ...
- 微信小程序的登陆流程详解
由于小程序的登陆和登陆状态维护流程比较复杂,需要客户端和服务器的数次交互以及服务器端的相应处理,很多同学都觉得比较麻烦,所以特别写下这篇博客为大家梳理一下微信的登陆流程,同时加深对微信小程序与登陆状态 ...
- 微信小程序生命周期详解
文章出处:https://blog.csdn.net/qq_29712995/article/details/79784222 在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于 ...
- 微信小程序模板消息详解
先放代码 wxml: <form name='pushMsgFm' report-submit bindsubmit='orderSign'> <view> 单号: 0< ...
随机推荐
- GPS北斗NTP校时服务器原理及功能介绍
在科技的发展下GPS北斗NTP校时服务器也得到了广泛应用,比如工业.科研.航空航天.公共场所等领域都用到了GPS北斗NTP校时服务器,该时间服务器以卫星时间为基准授时准确,替代了传统钟表授时的单一和时 ...
- python3:input() 函数
一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:& ...
- YAML中多行字符串的配置方法
有时候我们会在配置文件中配置一段文字说明,这种时候通常会出现两种需求: 文字中可能出现段落,希望在配置中按段落方式编写,显示打印的时候也能出现段落换行. 文字很长,为方便编辑,可能在配置文件中分段写, ...
- 分布式——吞吐量巨强、Hbase的承载者 LSMT
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式系统的第九篇文章. 今天给大家分享的内容是LSM树,它的英文是Log-structed Merge-tree.看着有些发怵,但其 ...
- EPX Studio产品功能介绍
EPX主要面向谁解决什么问题 EPX是什么? EPX基于计算机语言 EPX是利用基于Pascal的FastScript语言作为基础语言,在其中增加了许多函数与特性的一个扩展,将EPX组件本身融入到 ...
- Python 之解释器
Python 是一种解释型语言.所谓解释型语言是相对于编译型语言的. 解释型语言运行代码时会使用解释器从代码顶部一行一行解释并运行代码,直到结束. 而编译型语言是将所有代码编译成计算机可以直接识别的机 ...
- 【开源】使用Angular9和TypeScript开发RPG游戏
RPG系统构造 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. 项目地址 人物 和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性 ...
- 分享CCNTFS小工具,在 macOS 中完全读写、修改、访问Windows NTFS硬盘的文件,无须额外的驱动(原生驱动)更稳定,简单设置即可高速传输外接NTFS硬盘文件
CCNTFS [ 下载 ] 在 macOS 中完全读写.修改.访问Windows NTFS硬盘的文件,无须额外的驱动(原生驱动)更稳定,安装后进行简单设置即可高速传输外接NTFS硬盘文件,可全程离线使 ...
- Postman-OAuth 2.0授权
一.Postman提供的授权类型有10种.授权过程将验证是否有权从服务器访问所需的数据.发送请求时,通常必须包含参数以确保请求有权访问并返回所需的数据. 二.使用第7种OAuth 2.0授权:OAut ...
- 如何获取主键返回值(MySQL、Oracle)
添加用户.返回主键 --场景:在执行新增用户sql后,service层返回新增用户的主键值(与mybatis一起使用) insert into user(username, sex, birthday ...