【UniApp】UniApp页面间的三种传参方式
CrazyPanda发表于:2024-03-29 15:51:16浏览:305次
一、 在跳转页面时使用URL编程式传参
单向传递:只能上级页面传递到下级页面
注意:这种方法不适用传递大量的数据,传递的数据只能是string类型,如果想要传递对象或数组则需要使用JSON.stringify进行转换。 不适合用在uni.navigateBack(不携带跳转路由) 上级页面(通过URL传递数据)注意:后面拼接参数中不能存在空格,否则无法传递的参数为字符串属性
preserveRevise(){ uni.navigateTo({ url:'/pages/addressMange/addressMange?id=1' }) }
下级页面(通过onLoad接收数据)
onLoad(e){ console.log(e.id); }
双向传递:上级页面可以传递给下级页面,下级页面也可以传递给上级页面上级页面(使用events,利用下级页面向上级页面传递数据的变量名获取传递的参数)
preserveRevise(){ uni.navigateTo({ url:'/pages/addressMange/addressMange?id=1', events:{ //获取下级页面传递回来的参数 sonPageData:data=>{ console.log(data); } } }) }
下级页面(利用this.getOpenerEventChannel().emit向上级页面传递参数的变量名和变量值)
onLoad(e){ console.log(e.id); this.getOpenerEventChannel().emit('sonPageData',"我是第二个页面传递回来的数据") }
二、 利用uni.setStorageSync和uni.getStorageSync进行数据的缓存和取出以及最后对缓存数据的销毁
上级页面(对需要传递的数据进行数据缓存)
注意:缓存的数据必须为字符串形式,对象或数组需要先进行转换
let item = JSON.stringify(this.userInfo[e]) uni.setStorageSync('userInfo',item)
下级页面(对缓存的数据进行取出并且进行销毁)
onLoad() { console.log("进入了编辑地址页面"); var data = uni.getStorageSync('userInfo')//取出缓存数据 var res = JSON.parse(data) this.userInfo = res uni.removeStorageSync('userInfo') var data = uni.getStorageSync('userInfo')//销毁缓存数据 console.log(data); }
三、 利用uni.$emit 和 uni.$on进行跨页面传值
传递值页面(使用uni.$emit传递值的变量名和变量值)
uni.$on('addUserInfo',res=>{ console.log(res); })
注意:uni.$emit 和 uni.$on属于全局跨页面传参,在接收值页面要在onUnload周期添加移除监听时间。
onUnload() { uni.$off('addUserInfo') }
猜你喜欢
- 【UniApp】uniapp实现如何使用JSBridge实现与原生交互
- uniapp实现如何使用JSBridge实现与原生交互,需要具体代码示例一、背景介绍在移动应用开发中,有时需要与原生环境进行交互,比如调用原生的一些功能或获取原生的一些数据。uniapp作为一种跨平台的移动应用开发框架,提供了一种方便的方式来实现与原生交互,即使用JSBridge进行通信。JSBridge是一种前端与移动原生端进行交互的技术方案,通过在前端和原生端分别实现一个桥梁,使得前端可以调用原生的方法和获取原生的数据,同时原生也可以通过桥梁向前端发送消息。二、JSBridge的实
- 【UniApp】uniapp引入iconfont图标及使用方式
- 🧊 前言本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。位置一:App下原生导航栏的按钮使用字体图标。位置二:页面中的任意位置使用iconfont图标。🌺 正文第一步:打开iconfont官网新建项目并添加自己所需要的图标这里是iconfont的网址链接: iconfon官网 新建项目 不要勾选彩色,会导致在项目中无法修改字体颜色及样式,本人亲测,找了半天解决办
- 【UniApp】Flutter与uniapp的异同:从框架架构到开发语言的对比
- 在移动应用开发领域,Flutter和uniapp都是备受关注的跨平台框架,它们在很多方面都具有相似之处,但也存在着一些个别的差异。本文将从框架架构、开发语言以及跨平台能力等方面对比Flutter和uniapp,以帮助开发者更好地选择适合自己项目的开发工具。一、框架架构Flutter是由Google开发的开源框架,其核心特点是使用Dart语言进行开发。Flutter的框架架构是基于自绘引擎的方式,通过渲染引擎直接绘制UI界面,不依赖于平台的原生控件。这种方式使得Flutter具有较高的灵活性和自定
- 【UniApp】利用uniapp实现拖拽排序功能
- 利用uniapp实现拖拽排序功能,需要具体代码示例随着移动端应用的普及和需求的增长,拖拽排序功能变得越来越重要。无论是在社交媒体应用中的朋友圈排序,还是在任务列表中的任务排序,都需要拖拽排序功能来提供用户更好的交互体验。利用uniapp框架,我们可以很方便地实现拖拽排序功能。首先,我们需要创建一个uniapp项目,并创建一个列表页面。在页面中,我们可以展示一个列表,每个列表项都可以通过拖拽来改变自己的顺序。下面是一个简单的代码示例:
- 【UniApp】uniapp跳转新页面返回白屏怎么解决
- 在使用uniapp进行开发的过程中,我们经常会遇到许多技术问题。其中,一个比较常见的问题就是跳转新页面返回白屏。在本文中,我们将会探讨这个问题,并提供解决方案。一、问题表现在使用uniapp进行开发的过程中,当我们在一个页面中跳转到另一个页面时,如果返回原页面后,发现页面已经变成了一片空白,没有显示任何内容,这就是跳转新页面返回白屏的问题。二、问题原因通常情况下,跳转新页面返回白屏的原因可能会有以下几种:1.路由配置问题路由控制是uniapp开发中的一个非常重要的环节,如果我们在进行路
- 【UniApp】uniapp路由跳转传递与接收参数
- Uniapp 是一个基于 Vue.js 的跨平台开发框架,它允许开发者使用一套代码来同时构建 iOS、Android、H5 等多个平台的应用。在 Uniapp 中,路由传参是非常常见的需求,它可以让页面之间进行数据的传递和交互。下面是对 Uniapp 路由传参的详细解析一、传递参数在 Uniapp 中,可以通过两种方式来传递参数:1.通过 URL 参数传递通过在 URL 中添加参数的方式传递数据,可以在目标页面中通过 $route.query 获取传递过来的参数。例如,在 A 页面中跳转到 B
- 【UniApp】uniapp 定义动画的几种方式
- 本章的前提就是大家都知道动画的基本属性,例如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction 属性。了解更多 animation 相关的内容。现在制作一个左右抖动的动画效果,效果如下:在 uniapp 中,可以通过如下两种方式来完成。1. 直接使用 CSS 动画1.1 定义动画@keyframes&nb
- 【UniApp】Flutter和uniapp的区别:适用场景、生态系统和社区支持
- 随着移动应用开发领域的迅速发展,各种跨平台开发框架也应运而生。在这些框架中,Flutter和uniapp无疑是两个备受关注的热门选择。它们都具有跨平台开发的能力,但在适用场景、生态系统和社区支持等方面存在一些区别。首先,适用场景是选择开发框架的重要考虑因素之一。Flutter是Google推出的UI框架,使用Dart语言进行跨平台开发。它主要适用于开发高性能的移动应用程序,特别是那些对视觉效果和动画效果要求较高的应用。Flutter具有热重载功能,在开发过程中能够实时预览修改后的效果,提高开发效
栏目分类全部>
推荐文章
- 【PHP】如何使用PHP8中的Constructor Property Promotion来优化数据库查询操作
- 【PHP】详解PHP的Sodium加密扩展函数
- 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)
- 【PHP】PHP 5 与 PHP 7 的区别
- 【Go】Go语言执行linux命令行
- 【Vue】vue中sync作用
- 【网络】开源协议有哪些,都有什么差异
- 【C#】C# Winform 配置文件App.config
- 【PHP】php中标识符允许出现的符号有哪些
- 【PHP】php7.4安装zipArchive,使用ZipArchive类的问题及解决方法