【UniApp】UniApp页面间的三种传参方式
CrazyPanda发表于:2024-03-29 15:51:16浏览:316次
一、 在跳转页面时使用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兼容微信小程序和支付宝小程序遇到的坑
- 1、支付宝不支持v-show改为v-if。2、v-htmlApp端和H5端支持 v-html ,微信小程序会被转为 rich-text,其他端不支持 v-html。解决方法:去插件市场找一个支持跨端的富文本组件。3、导航栏处有背景色延伸至导航栏外兼容微信小程序和支付宝小程序 pages.json:给支付宝的导航栏设置透明{ "path": "pages/agent/agent", "style": {
- 【UniApp】如何在uniapp中实现倒计时和闹钟功能
- 如何在uniapp中实现倒计时和闹钟功能一、倒计时功能的实现:倒计时功能在实际开发中非常常见,可以用于实现各种倒计时功能,如验证码倒计时、秒杀倒计时等。下面通过uniapp框架来介绍如何实现倒计时功能。在uniapp项目中创建一个倒计时组件,可以命名为Countdown.vue。在Countdown.vue中,我们可以定义一个倒计时的变量和一个计时器的标志位,如下所示:<template> <div>{{&nbs
- 【UniApp】uniapp运行比较慢是什么原因
- 随着移动互联网用户的不断增长,移动应用市场呈现出爆发式的增长态势。为了迎合这个趋势,许多开发者选择了跨平台开发技术,在多个平台发布应用,以便在更广泛的受众中推广自己的应用。UniApp就是其中的一种跨平台开发技术,它可以同时在iOS和Android平台上运行。然而,在使用UniApp开发应用的过程中,很多开发者都发现应用的运行速度太慢了。这是一个非常严重的问题,因为速度慢不仅会给用户带来不好的用户体验,而且也会影响应用的市场竞争力。所以,如何提高UniApp的运行速度成为了开发者们十分
- 【UniApp】uniapp 微信分享
- 前言 微信分享是uniapp开发中常见的需求,大部分的app或者小程序都会具备微信分享的功能,但微信分享效果并不难实现,因为uniapp本身自带了一个微信分享的api,我们只需要调用微信分享的api即可实现前置条件 要完成微信分享首先得打开微信分享的功能,打开manifest.json文件,点击app模块配置,找到微信分享并选中即可 注意
- 【UniApp】UniApp原生讯飞语音插件-YL-SpeechRecognition
- 由于插件文档图片部分可能无法显示,可以移步到CSDN博客,查看完整文档:https://blog.csdn.net/baiyuliang2013/article/details/130925332插件说明:支持安卓IOS双端!新版本已由必须联系本人打离线包,升级为线上购买后自主导入sdk打包,更方便快捷!当然,您在使用时遇到问题依然可以联系本人QQ:453503875,微信:同qq。若您只需要安卓端,可使用:Uts版插件:https://ext.dcloud.net.cn/plugin?id=1
- 【UniApp】使用uniapp实现懒加载图片效果
- 使用uniapp实现懒加载图片效果随着移动互联网的发展,图片在移动应用中扮演着重要的角色。然而,过多的图片加载可能会导致页面加载速度缓慢,影响用户体验。为了解决这个问题,我们可以使用uniapp框架提供的懒加载图片效果,使图片在需要时才加载,节省了页面加载时间,提高了用户体验。首先,我们需要确保已经安装好uniapp开发环境,并创建好一个uniapp项目。接下来,我们将开始编写代码。创建一个Vue组件在uniapp项目中,我们可以创建一个独立的Vue组件来实现懒加载图片效果。打开uni
- 【UniApp】使用uniapp实现图片裁剪功能
- 使用UniApp实现图片裁剪功能UniApp是基于Vue.js开发的一个跨平台开发框架,可用于快速构建小程序、H5、App等多平台应用。在UniApp中实现图片裁剪功能,需要借助第三方插件uni-image-cropper,并结合HTML5的canvas元素来完成。安装插件在UniApp项目根目录执行以下命令,安装uni-image-cropper插件:npm install uni-image-cropper安装完成后,在项目的main.js文件中引入插件:im
- 【UniApp】uniapp 定义动画的几种方式
- 本章的前提就是大家都知道动画的基本属性,例如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction 属性。了解更多 animation 相关的内容。现在制作一个左右抖动的动画效果,效果如下:在 uniapp 中,可以通过如下两种方式来完成。1. 直接使用 CSS 动画1.1 定义动画@keyframes&nb
栏目分类全部>