uniapp页面间通信

uniapp中通过eventChannel实现页面间通信的方法,这是一种官方推荐的高效传参方式。我来解释下这种方式的完整实现和注意事项:

  1. 发送页面(父页面)‌:
    uni.navigateTo({url: '/pages/detail/detail',success: (res) => {// 通过eventChannel发送数据res.eventChannel.emit('sendData', {sTypeName: '详情页',sTypeCode: 'detail123'});}
    });
    

  2. 接收页面(子页面)‌:
    onLoad(options) {const eventChannel = this.getOpenerEventChannel();eventChannel.on('sendData', (data) => {console.log('接收到的数据:', data);uni.setNavigationBarTitle({title: data.sTypeName});this.params = {type: data.sTypeCode};});
    }
    

关键点说明‌:

  1. eventChannel是uniapp提供的页面间通信机制
  2. 数据是在页面跳转成功后通过success回调发送的
  3. 子页面通过getOpenerEventChannel()获取通信通道
  4. 这种方式适合传递复杂对象,没有URL长度限制

注意事项‌:

  1. 确保子页面已加载完成再发送数据(建议放在onLoad中接收)
  2. 数据是实时传递的,不是持久化的
  3. 如果页面是通过redirectTo跳转的,则无法使用这种方式
  4. 建议对事件名使用常量定义,避免拼写错误

在uniapp中通过URL传递参数主要有以下几种方式:

  1. 基础URL传参方式(适合简单参数):
    直接在跳转URL后拼接参数,格式为?key=value&key2=value2
    uni.navigateTo({url: '/pages/detail/detail?id=123&name=test'
    });
    

  2. 接收参数方式:
    在目标页面的onLoad生命周期函数中获取
    onLoad(options) {console.log(options.id); // 输出:123console.log(options.name); // 输出:test
    }
    
  1. 传递对象参数(需要编码):
    const params = {id: 123,user: {name: '张三', age: 20}
    };
    uni.navigateTo({url: '/pages/detail/detail?data=' + encodeURIComponent(JSON.stringify(params))
    });
    

注意事项:

  1. URL长度有限制(不同浏览器不同,一般不超过2000字符)
  2. 传递对象时需要先JSON序列化再编码
  3. 参数会显示在地址栏中,敏感数据不建议用URL传递
  4. 获取的参数都是字符串类型,需要自行转换

对于复杂数据结构,建议使用eventChannel或Vuex等其它方式传递。

传递方式: 

1. ‌全局变量(globalData)

// App.vue
App({globalData: {userInfo: null}
});// 页面A
getApp().globalData.userInfo = { name: 'John' };
uni.navigateTo({ url: '/pages/B/B' });// 页面B
onLoad() {const userInfo = getApp().globalData.userInfo;console.log(userInfo); // { name: 'John' }
}

2. ‌Vuex状态管理

Vuex是Vue.js的官方状态管理库,适合管理复杂的全局状态。通过定义statemutationsactions,可以在不同页面中共享和修改数据‌2 4。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);const store = new Vuex.Store({state: {sharedData: null},mutations: {updateSharedData(state, payload) {state.sharedData = payload;}}
});// 页面A
this.$store.commit('updateSharedData', { key: 'value' });
uni.navigateTo({ url: '/pages/B/B' });// 页面B
onLoad() {const data = this.$store.state.sharedData;console.log(data); // { key: 'value' }
}

3. ‌本地存储(Storage)

使用uni.setStorageSyncuni.getStorageSync可以将数据存储在本地,适合需要持久化的数据传递‌1 2

// 页面A
uni.setStorageSync('param1', 'value1');
uni.navigateTo({ url: '/pages/B/B' });// 页面B
onLoad() {const param1 = uni.getStorageSync('param1');console.log(param1); // 'value1'
}

还有很多自行探索...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/88159.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/88159.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android ViewModel机制与底层原理详解

Android 的 ViewModel 是 Jetpack 架构组件库的核心部分,旨在以生命周期感知的方式存储和管理与 UI 相关的数据。它的核心目标是解决两大痛点: 数据持久化: 在配置变更(如屏幕旋转、语言切换、多窗口模式切换)时保留数…

双倍硬件=双倍性能?TDengine线性扩展能力深度实测验证!

软件扩展能力是软件架构设计中的一个关键要素,具有良好扩展能力的软件能够充分利用新增的硬件资源。当软件性能与硬件增加保持同步比例增长时,我们称这种现象为软件具有线性扩展能力。要实现这种线性扩展并不简单,它要求软件架构精心设计&…

频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾

在一次面向商户的会员系统App开发中,客户要求每周至少更新一次版本,涉及功能迭代、UI微调和部分支付方案的更新。团队使用Flutter进行跨平台开发,但大部分成员日常都在Windows或Linux环境,只有一台云Mac用于打包。如何在高频率发布…

springsecurity03--异常拦截处理(认证异常、权限异常)

目录 Spingsecurity异常拦截处理 认证异常拦截 权限异常拦截 注册异常拦截器 设置跨域访问 Spingsecurity异常拦截处理 认证异常拦截 /*自定义认证异常处理器类*/ Component public class MyAuthenticationExceptionHandler implements AuthenticationEntryPoint {Overr…

企业如何制作网站?网站制作的步骤与流程?

以下是2025年网站制作的综合指南,涵盖核心概念、主流技术及实施流程: 一、定义与范畴 网站制作是通过页面结构设计、程序设计、数据库开发等技术,将视觉设计转化为可交互网页的过程,包含前端展示与后台功能实现。其核心目标是为企…

Rust+Blender:打造高性能游戏引擎

基于Rust和Blender的游戏引擎 以下是基于Rust和Blender的游戏引擎开发实例,涵盖不同应用场景和技术方向的实际案例。案例分为工具链整合、渲染技术、物理模拟等类别,每个案例附核心代码片段或实现逻辑。 工具链整合案例 案例1:Blender模型导出到Bevy引擎 使用blender-bev…

Git基本操作1

Git 是一款分布式版本控制系统,主要用于高效管理代码版本和团队协作开发。它能精确记录每次代码修改,支持版本回溯和分支管理,让开发者可以并行工作而互不干扰。通过本地提交和远程仓库同步,Git 既保障了代码安全,又实…

React Native 组件间通信方式详解

React Native 组件间通信方式详解 在 React Native 开发中,组件间通信是核心概念之一。以下是几种主要的组件通信方式及其适用场景: 简单父子通信:使用 props 和回调函数兄弟组件通信:提升状态到共同父组件跨多级组件:…

TCP的可靠传输机制

TCP通过校验和、序列号、确认应答、重发控制、连接管理以及窗口控制等机制实现可靠性的传输。 先来看第一个可靠性传输的方法。 通过序列号和可靠性提供可靠性 TCP是面向字节的。TCP把应用层交下来的报文(可能要划分为许多较短的报文段)看成一个一个字节…

没有DBA的敏捷开发管理

前言一家人除了我都去旅游了,我这项请假,请不动啊。既然在家了,闲着也是闲着,就复盘下最近的工作,今天就复盘表结构管理吧,随系统启动的,不是flyway,而是另一个liquibase&#xff0c…

go-carbon v2.6.10发布,轻量级、语义化、对开发者友好的 golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 Golang 时间处理库,提供了对时间穿越、时间差值、时间极值、时间判断、星座、星座、农历、儒略日 / 简化儒略日、波斯历 / 伊朗历的支持。 carbon 目前已捐赠给 dromara 开源组织,已被 awesome-go 收录&am…

【AI News | 20250708】每日AI进展

AI Repos 1、claude-code-templates Claude Code Templates是一款全面的命令行工具,旨在为不同编程语言和框架(如JavaScript/TypeScript、Python等,Go和Rust即将推出)提供优化的Claude Code配置。它通过交互式设置、自动化钩子&a…

Nginx源码安装+静态站点部署指南(CentOS 7)

安装包:可自行前往我的飞书下载 Docs 也可以进入 nginx 官网,下载自己所需适应版本 nginx 开始安装nginx 1. 创建准备目录 cd /opt mkdir soft module # 创建软件包和源码解压目录 2. 安装依赖环境 yum -y install make zlib zlib-devel gcc-c l…

交换机的核心原理和作用

一、交换机的核心原理交换机是一种用于连接多台设备的网络硬件,其核心原理基于二层网络(数据链路层)的 MAC 地址寻址1. MAC 地址学习与存储当交换机接收到数据帧时,会读取帧中的源 MAC 地址,并将该地址与对应的端口号记…

【工具变量】上市公司企业金融强监管数据、资管新规数据(2001-2024年)

数据简介:参考顶刊《经济研究》李青原(2022)老师的做法,Post 为时间虚拟变量,根据资管新规实施的时间,当观测期为2018 年上半年及之后时,Post 取值1,否则取值0。PreFin 为资管新规实…

CSS Grid与Flexbox布局实战对比

概述 CSS布局技术在过去几年经历了重大变革,从传统的基于浮动和定位的方法,到现在强大的Flexbox和Grid布局系统。这两种现代布局方法极大地简化了复杂界面的开发过程,但它们各自适用于不同的场景。本文将对Flexbox和Grid进行深入比较&#x…

[Pytest][Part 4]多种测试运行方式

实现需求2:有两种运行测试的方式:通过config配置文件运行,测试只需要修改config配置文件cmdline 运行这里是新建一个config类来存储所有的测试配置,以后配置有修改的话也只需要修改这个类。根据目前的测试需求,config中…

平衡二叉树的删除操作

对于平衡二叉树的操作应对与考试只需要模拟出过程即可,且他的过程和插入的平衡方法一样,不一样的只是对于平衡因子的计算上。接下来我将给出方法①删除结点(方法同“二叉排序树”) ②一路向北找到最小不平衡子树,找不到…

Spark 4.0的 VariantType 类型优点以及使用分析

背景 本文基于Spark 4.0。 总结 对于半结构化的数据来说,我们一般会有两种方式进行存储: 第一种是存储为JSON String,这种可以保证Schema free,但是在使用的时候得解析为JSON,从而进行运算操作。 第二种是存储为Struct类型,这种虽…

17-C#封装,继承,多态与重载

C#封装继承多态 1. 2. 3.多态 public abstract class animal//抽象类 {public abstract void eat();//抽象方法 } public class cat : animal//继承 {public override void eat()//重写{messagebox.show("cat eat");} } public class dog: animal//继承 {public over…