HarmonyOS应用《玄象》开发实战：列表项点击 router.pushUrl 传参：params 序列化方案

阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 4 篇 · 二十八星宿模块对应源码entry/src/main/ets/pages/mansion/MansionListPage.ets、MansionDetailPage.ets前言列表项点击跳转详情页是移动端最经典的交互模式。玄象项目星宿列表页点击星宿行后通过router.pushUrl携带mansionName参数跳转到详情页详情页通过router.getParams接收参数并加载对应星宿数据。本篇将深入剖析玄象项目列表项点击传参的实现从router.pushUrl的params参数序列化、router.getParams参数反序列化、类型安全断言到参数验证与默认值处理。掌握这套传参方案您就能为任何 HarmonyOS 应用实现可靠的页面间数据传输。提示router.getParams返回Object类型玄象项目通过as Recordstring, string类型断言实现类型安全。一、列表页发送参数1.1 列表项点击事件ListItem(){Row(){Text(mansion.name)// ...}.onClick((){router.pushUrl({url:pages/mansion/MansionDetailPage,params:{mansionName:mansion.name}});})}二、详情页接收参数2.1 参数接收aboutToAppear():void{constparamsrouter.getParams()asRecordstring,string;constnameparams[mansionName]||角宿;this.mansionMansionData.getMansionByName(name);}三、参数验证3.1 常见验证aboutToAppear():void{constparamsrouter.getParams()asRecordstring,string;if(!params||!params[mansionName]){this.mansionMansionData.getMansionByName(角宿);return;}constnameparams[mansionName];this.mansionMansionData.getMansionByName(name);if(!this.mansion){this.mansionMansionData.getMansionByName(角宿);}}四、参数序列化方案4.1 基本类型params支持基本类型params:{mansionName:角宿,// stringmansionIndex:0,// numberisFavorite:true// boolean}4.2 复杂对象params:{mansion:JSON.stringify({name:角宿,wuXing:木,animal:蛟})}// 接收constmansionDataJSON.parse(params[mansion]);五、传参方案总结5.1 参数传递链路MansionListPage ↓ onClick router.pushUrl({ url: ..., params: { mansionName: 角宿 } }) ↓ MansionDetailPage.aboutToAppear ↓ router.getParams() as Recordstring, string ↓ MansionData.getMansionByName(角宿) ↓ State mansion 数据就绪六、参数传递的最佳实践6.1 参数验证与容错aboutToAppear():void{try{constparamsrouter.getParams()asRecordstring,string;if(!params||!params[mansionName]){// 兜底无参数时默认第一个this.mansionMansionData.getMansionByName(角宿);return;}constnameparams[mansionName];this.mansionMansionData.getMansionByName(name);if(!this.mansion){// 兜底未找到星宿时默认第一个this.mansionMansionData.getMansionByName(角宿);}}catch(err){hilog.error(0x0000,DetailPage,Params error: %{public}s,err.message);this.mansionMansionData.getMansionByName(角宿);}}6.2 参数传递的常见问题问题原因解决方案参数为 undefined跳转时未传 params使用默认值兜底类型不匹配跳转方传了错误类型使用类型断言 验证参数丢失页面被系统回收重建使用 AppStorage 持久化特殊字符参数包含特殊字符使用 encodeURIComponent 编码6.3 复杂数据的传递方案对于复杂对象如命盘数据建议使用JSON.stringify序列化// 跳转方router.pushUrl({url:pages/mingli/MingliAnalysisPage,params:{baziData:JSON.stringify({year:1990,month:5,day:15,hour:10,minute:30,gender:男})}});// 接收方constparamsrouter.getParams()asRecordstring,string;constbaziDataJSON.parse(params[baziData]);七、列表页到详情页的完整数据流7.1 数据流链路MansionListPage ↓ 用户点击星宿行 handleMansionClick(mansion.name) ↓ router.pushUrl({ url: pages/mansion/MansionDetailPage, params: { mansionName: 角宿 } }) ↓ MansionDetailPage.aboutToAppear() ↓ router.getParams() → { mansionName: 角宿 } ↓ MansionData.getMansionByName(角宿) ↓ State mansion MansionInfo 对象 ↓ build() 渲染星宿详情7.2 数据流的设计原则最小化传输只传递必要参数如 ID非完整数据对象容错处理始终为参数提供默认值类型安全使用as Recordstring, string类型断言日志记录关键参数传递时输出日志便于排查总结本篇以玄象项目星宿列表→详情页传参为蓝本深入剖析了router.pushUrl参数传递从params序列化、router.getParams反序列化、类型断言到参数验证与默认值处理。掌握这套传参方案您就能为任何 HarmonyOS 应用实现可靠的页面间数据传输。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档router API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net