【鸿蒙心迹】HarmonyOS笔记22：页面参数与详情展示-云帆数科

个人主页杨利杰YJlio❄️个人专栏《Windows 疑难杂症与工单复盘案例库》《Sysinternals实战教程》《WINDOWS教程》《Windows PowerShell 实战》《IOS插件分析测试》《超简单用Python让Excel飞起来》让复杂的事情更简单让重复的工作自动化文章目录一、先约定一个参数ticketId二、目标路径与业务参数分别填写三、在详情页读取传入参数四、类型声明与运行时检查都要看五、显示校验后的 ID先核对传递关系六、缺参和空值都给出明确反馈七、ID 传递与详情加载是两个步骤八、把正常与异常输入分别记录写在最后参考资料大家好我是杨利杰 YJlio。上一节已经整理了 Index 到 Detail 的跳转关系。这一节继续使用这两个页面只增加一个 ticketId 参数观察“传什么、收到什么、显示什么”是否一致。本篇编号 022计划日期为 2026 年 10 月 12 日。原稿已保留。T-001 是补充学习示例中的虚构 ID不是真实工单代码尚未在本机编译或设备运行。配图均为概念示意。一、先约定一个参数ticketId本例只传一个 string 类型的 ticketId示例值为 T-001。字段名、类型与用途先约定清楚避免发送方写 id接收方却读取 ticketId。这里传的是标识不是完整工单对象。这样可以先核对路由参数关系再考虑按 ID 查询详情的业务过程。二、目标路径与业务参数分别填写url 决定跳转到哪个页面params 描述带给目标页的参数。两者不能混为一条路径。本例仍使用 pages/DetailIndex.ets 和 Detail.ets 仍需按上一节在页面配置中注册。以下为首页 Index.ets 的学习示例import{BusinessError}fromkit.BasicServicesKit;EntryComponentstruct Index{Statemessage:string;privateopenDetail():void{this.message;this.getUIContext().getRouter().pushUrl({url:pages/Detail,params:{ticketId:T-001}},(err:BusinessError){if(err){this.message跳转失败;console.error(pushUrl failed:${err.code},${err.message});}});}build(){Column({space:12}){Text(首页)Text(this.message)Button(查看详情).onClick((){this.openDetail()})}.width(100%).padding(16)}}这里不把 ticketId 拼进 URL也不预设网络接口。若目标页面没有正确注册参数填写正确也不能代替页面配置。三、在详情页读取传入参数官方 Router 接口提供 getParams 获取当前页的路由参数。本例在 Detail 的 aboutToAppear 中读取再写入用于显示的状态字段。Detail.ets 中的完整学习示例如下interfaceTicketRouteParams{ticketId?:string;}EntryComponentstruct Detail{StateticketId:string;StateerrorMessage:string;aboutToAppear():void{this.ticketId;this.errorMessage;constparamsthis.getUIContext().getRouter().getParams()asTicketRouteParams|undefined;if(paramstypeofparams.ticketIdstringparams.ticketId.trim().length0){this.ticketIdparams.ticketId.trim();}else{this.errorMessage缺少有效工单ID;}}build(){Column({space:12}){Text(详情页)if(this.errorMessage.length0){Text(this.errorMessage)}else{Text(工单ID${this.ticketId})}Button(返回).onClick((){this.getUIContext().getRouter().back()})}.width(100%).padding(16)}}首页和详情页代码分别放在自己的页面文件中。这里使用 V1 状态管理及对应 Router 接口实际工程需核对 SDK 与模板不能把系列名称当作版本实测证据。四、类型声明与运行时检查都要看TicketRouteParams 的字段定义方便说明参数约定但 as 类型断言不会自动验证传入内容。本例依次检查参数是否存在、ticketId 是否为 string以及去掉首尾空格后是否非空。只有通过这些条件才把规范化后的值写入 ticketId。类型断言帮助表达预期类型不能代替实际参数校验。这组检查只证明字符串具备本例要求的基本形式并不证明该工单存在也不证明它属于当前用户。真实业务还需由详情查询和对应业务规则确认。五、显示校验后的 ID先核对传递关系按示例逻辑传入 T-001 后应显示“工单IDT-001”。正文与配图中的 ID、字段名和文案均使用同一组值。这个页面还没有工单标题、状态或处理记录。因此“显示详情”在本节具体指参数 ID 的展示不能称为已加载完整业务详情。如果显示为空或不一致我会先核对发送对象、读取字段和状态赋值再检查页面显示绑定点。六、缺参和空值都给出明确反馈如果没有传入 ticketId或者它不是有效的非空字符串本例显示“缺少有效工单ID”。这与首页跳转失败的提示不同一个是进入详情后的参数问题一个是路由调用失败。本例不会悄悄补一个默认 T-001让缺参页面看起来像正常详情。否则排查时很容易把默认值误当作实际收到的 ID。缺少有效参数时应显示明确反馈不能用默认业务 ID 掩盖问题。返回按钮仍然保留实际返回目标要结合页面栈核对。直接打开详情页与从首页进入是两种需要分别观察的入口。七、ID 传递与详情加载是两个步骤本例只完成参数读取与展示的学习代码没有网络请求、数据库查询或真实工单详情。以后接入查询时可以先确认有效 ID再按查询结果切换加载、错误、空态和内容显示。路由参数有效不代表业务数据一定存在查询返回的数据也需要与请求的 ID 对应。本文继续采用 Router 练习。官方资料推荐新项目使用 Navigation两套体系应按各自规则实现参数与导航不能直接把这段代码当作 Navigation 示例。八、把正常与异常输入分别记录检查输入按示例逻辑预期当前状态ticketId 为 T-001工单IDT-001待实际验证缺少 ticketId缺少有效工单ID待实际验证ticketId 为空字符串缺少有效工单ID待实际验证ticketId 只有空格缺少有效工单ID待实际验证T-001 前后带空格去空格后显示工单IDT-001待实际验证ticketId 类型错误缺少有效工单ID待实际验证测试不同输入时应在独立练习工程中记录实际改动不覆盖正式业务数据。环境栏补充真实 DevEco Studio、SDK/API、设备与窗口保存报错和复现步骤。预期结果指导验证传递、校验和显示都要保留真实运行记录。写在最后这节我把参数关系拆成四个位置发送方约定 ticketId路由携带参数详情页读取并校验最后显示规范化后的值。下一篇继续学习返回导航与页面状态恢复在这两个页面的基础上检查返回后哪些信息仍在、哪些需要重新读取。参考资料OpenHarmony 官方接口文档UIContext Router用于核对 pushUrl、params、getParams 和 back实际 HarmonyOS 工程以对应 SDK 文档为准。OpenHarmony 官方文档页面路由用于核对基础路由与 Navigation 推荐说明。本系列第 022 篇原稿《页面参数传递与详情展示》计划日期 2026-10-12。声明本文为个人学习笔记T-001 为虚构演示 ID代码与概念图不代表真实工单或设备实测实际行为需结合工程环境验证。返回顶部

企业数字化 ERP 产品动态

相关推荐

【零代码生信分析】RNA-seq中级分析10-差异基因集在RummaGEO/Rummagene进行【公共基因集相似性】分析

前言当我们做了RNA-seq差异基因分析以及一系列的富集分析后，希望我们得到的差异基因集富集的通路或者转录因子，可以在其他公共数据集或者文献中得到验证。或者获得更广泛的研究思路，那么就可以进行公共数据集相似性分析。这种分析策略主要服… · 2026/11/5 7:48:50

Java 泛型：类型参数、通配符与类型擦除

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 7:48:50

STM32 FOC调试记录

【后端开发】FastAPI基础

2026.6.21 一、代码 1.导包 from fastapi import FastAPI # from ... import ...手动配置的方法： 终端输入：（确保终端提示符前有 (.venv) 标记） pip install fastapi uvicorn2.创建实例 FastAPI实例app app FastAPI()3.定义接口 … · 2026/11/5 8:50:37

快速上手playwight

在自动化测试和网页爬虫的领域，Selenium 曾是无可争议的霸主。然而，随着现代 Web 应用越来越复杂（大量使用 React、Vue、单页应用等），传统的测试工具开始显得有些力不从心。今天，我们要聊的是由微软开源的现… · 2026/11/5 8:48:36

LoRA 训练数据集怎么准备才好用？Fizgig AI 标注、人脸裁剪与外观一致性过滤器 7 大技巧

【免费下载链接】Fizgig Fizgig — LoRA & Fine-tune Studio for Klein 9B, Krea 2, MiniMax H3, Qwen Image 2.1, Anima & Z-Image Turbo and Ace-Step XL: train, fine-tune, profile, repair and extract LoRAs & LoKR for Image, Video & Music Models 项目… · 2026/11/5 8:47:35

如何用一个仓库补齐你的 Android 技术栈？android-tech-frontier 译文库完全指南

如何用一个仓库补齐你的 Android 技术栈？android-tech-frontier 译文库完全指南【免费下载链接】android-tech-frontier 【停止维护】一个定期翻译国外Android优质的技术、开源库、软件架构设计、测试等文章的开源项目项目地址: https://gitcode.com/gh_mirrors… · 2026/11/5 8:46:35

【Java基础知识】方法与注释

【Java基础知识】进制转换

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

多智能体协作系统架构设计与实践优化

1. 多智能体协作系统的时代背景2017年Transformer架构的诞生彻底改变了人工智能的发展轨迹。当行业还沉浸在单一大模型带来的性能突破时，Anthropic的研究团队已经将目光投向了更前沿的领域——如何让多个智能体通过协作产生超越单体能力的系统智能。这就像交响乐团中… · 2026/11/5 0:00:39

大模型系统性入门实战指南：从原理到部署微调的全链路路线

提到大模型的系统性入门，我先说个结论：这事真不难，难的是资料太散、路线太多，今天这个框架明天那个工具，新人很容易在“收藏夹吃灰”和“教程看到一半放弃”之间反复横跳。市面上关于大模型的内容少说有几十万篇&#… · 2026/11/5 0:00:39

鸿蒙文件系统沙箱机制解析与开发实践

1. 鸿蒙文件系统沙箱机制深度解析作为一名从Android转向鸿蒙开发的工程师，我深刻体会到文件系统访问是迁移过程中最先遇到的"拦路虎"。在Android上运行良好的文件读写代码，在鸿蒙真机环境却频频出现文件写入后神秘消失或直接抛出权限拒绝错误的… · 2026/11/5 0:00:39

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

【鸿蒙心迹】HarmonyOS笔记22：页面参数与详情展示

相关推荐

了解更多？预约专属演示