ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

HarmonyOS应用实战-启示散页-71-切后台回来别显示旧题库:用 onPageShow 触发服务层刷新

HarmonyOS应用实战-启示散页-71-切后台回来别显示旧题库:用 onPageShow 触发服务层刷新 HarmonyOS 应用实战 71切后台回来别显示旧题库用 onPageShow 触发服务层刷新用户从后台回到应用时如果只依赖页面首次出现选择器可能仍停留在旧牌组名上。这一篇不从界面现象兜圈子先盯住currentDeckId、lastForegroundAt和libraryHSP/src/main/ets/components/DeckPicker.ets之间的交接只要这条线说不清回到前台刷新后面一定会变成临时补丁。下面直接以The_Book_of_Answers工程里的libraryHSP/src/main/ets/components/DeckPicker.ets为锚点把回到前台刷新拆成可以落地的工程方案。当前代码锚点回到前台刷新 先看 libraryHSP/src/main/ets/components/DeckPicker.ets先看工程里和回到前台刷新最贴近的实现。锚点是async aboutToAppear它能说明当前功能已经由哪个文件承接也能提醒我们别把新规则塞到错误层级。0026StorageLink(lastDeckUpdateAt)Watch(onUpdate)lastDeckUpdateAt:number0;0027Statesummaries:DeckSummary[][];0028/** 显式 State 驱动 SelectArkUI Select 不会响应方法返回值的后续变化 */0029StateprivateselectedIndex:number0;0030StateprivatedisplayName:string默认题库;0031Stateprivateoptions:SelectOption[][];00320033asyncaboutToAppear():Promisevoid{0034awaitthis.refresh();0035}00360037/** lastDeckUpdateAt 变化增/删/改重拉列表 重算选中 */0038onUpdate():void{0039this.refresh().catch((e:Error){0040hilog.warn(DOMAIN,TAG,refresh failed: %{public}s,e.message);这段代码里的关键事实是当前选择器已经用 currentDeckId 和 lastDeckUpdateAt 两个 StorageLink 接收牌组变更。 继续重构时要尊重这个事实否则就会把已经清晰的边界重新搅乱。问题链路回到前台刷新 为什么会出错用户从后台回到应用时如果只依赖页面首次出现选择器可能仍停留在旧牌组名上。真正的风险点在这里刷新信号需要由 Ability 生命周期明确触发组件只订阅状态不直接感知窗口生命周期。 如果只在页面里补一个临时变量下一次遇到后台恢复、导入、删除、重命名或升级迁移时问题还会换一种方式出现。责任边界回到前台刷新 不能越过哪条线EntryAbility 负责前后台事件DeckPicker 负责选项和选中项重算DeckService 负责持久化牌组。层级应该负责不应该负责entry启动、前后台、路由入口直接拼业务数据libraryHAR模型、仓储、偏好 key页面交互和弹窗libraryHSP服务编排、页面展示、组件状态越过服务直接改底层 key状态模型ForegroundDeckRefreshState这个模型是建议新增或补强的设计不是把页面里的局部状态简单换个名字。它的作用是让回到前台刷新有明确输入、输出和验证点。interfaceForegroundDeckRefreshState{currentDeckId:string;// 当前牌组 id只表达选择结果lastDeckUpdateAt:number;// 牌组列表发生变化的时间戳lastForegroundAt:number;// 应用回到前台时写入的刷新信号}functioncreateForegroundDeckRefreshState(input:PartialForegroundDeckRefreshState):ForegroundDeckRefreshState{return{currentDeckId:input.currentDeckId||,lastDeckUpdateAt:typeofinput.lastDeckUpdateAtnumber?input.lastDeckUpdateAt:0,lastForegroundAt:typeofinput.lastForegroundAtnumber?input.lastForegroundAt:0,};}字段不要只追求多而要能解释失败。比如currentDeckId是主判断依据lastForegroundAt则用于收口边界或刷新时机。服务落点回到前台刷新 的规则放回 owner前台事件只写 AppStorage 时间戳不直接调用组件方法。 这类规则放在服务层页面才不会因为不同入口而出现两套行为。classForegroundDeckRefreshService{asyncbuildTopic71():PromiseForegroundDeckRefreshState{conststatecreateForegroundDeckRefreshState({currentDeckId:});awaitthis.verifyBoundary(state);returnstate;}privateasyncverifyBoundary(state:ForegroundDeckRefreshState):Promisevoid{// 前台事件只写 AppStorage 时间戳不直接调用组件方法。if(!state){thrownewError(回到前台刷新 state is empty);}}}这里的重点不是类名本身而是ForegroundDeckRefreshState的调用方向页面拿状态服务管回到前台刷新的规则仓储只处理读写。方向一旦倒过来后续排查就会在 UI、服务和 key 之间反复横跳。页面接入回到前台刷新 页面只表达用户动作DeckPicker 继续在 watch 回调里 refresh避免页面持有服务细节。 页面应该给用户一个明确反馈但不要把数据 owner 搬到 UI 里。BuilderfunctionForegroundDeckRefreshStatePanel(state:ForegroundDeckRefreshState){Column(){Text(回到前台刷新).fontSize(18).fontWeight(FontWeight.Medium)Text(DeckPicker 继续在 watch 回调里 refresh避免页面持有服务细节。).fontSize(13).fontColor(#725D4C)}.padding(16)}如果页面需要显示中间态就显示回到前台刷新的处理中、失败原因和下一步动作不要让页面直接决定底层数据如何恢复。验证样本回到前台刷新 先跑边界序号验证点1后台编辑牌组后返回首页选择器文字应该随 lastDeckUpdateAt 更新。2仅前后台切换、不改牌组时列表刷新不应该改变 currentDeckId。3删除当前牌组后返回首页选择器应该落到默认牌组。4模拟 Preferences 为空时currentDeckId 仍有 DEFAULT_DECK_ID 兜底。Write-Host定位本文涉及的源码rg-nasync\ aboutToAppear|ForegroundDeckRefreshState|回到前台刷新D:\ProgramData\huawei\lesson\The_Book_of_Answers\libraryHSP\src\main\ets\components\DeckPicker.etsWrite-Host查看 回到前台刷新 相关的状态字段和刷新信号rg-ncurrentDeckId|lastDeckUpdateAt|lastForegroundAt|AppStorageKey|AppPrefKey|StorageLinkD:\ProgramData\huawei\lesson\The_Book_of_Answers这些命令只能确认回到前台刷新的源码落点、状态字段和刷新信号有没有写散不能替代 DevEco 或真机交互。涉及前后台切换、页面返回、剪贴板、备份或发布构建的场景还要继续走设备侧验证。排查表回到前台刷新 出问题先看哪里现象常见原因优先检查返回首页仍显示旧名字Ability 没有写前台刷新信号查看 EntryAbility.onForeground 是否更新 lastForegroundAt下拉项为空刷新早于 PreferencesStore.init确认 init 在 loadContent 前完成选择后又跳回旧值setCurrent 写入失败后触发回滚看 DeckService.setCurrent 是否抛出牌组不存在排查回到前台刷新时先看 owner再看信号最后才看样式。比如返回首页仍显示旧名字通常不是单纯的布局问题而是Ability 没有写前台刷新信号这类链路断点。落地顺序回到前台刷新 从最小闭环开始先在模型或服务层补ForegroundDeckRefreshState不要先改 UI。再把现有libraryHSP/src/main/ets/components/DeckPicker.ets的调用点接到新状态。最后补页面反馈和异常分支避免用户看到无响应。// 回到前台刷新 的最小回归清单constchecklist:string[][后台编辑牌组后返回首页选择器文字应该随 lastDeckUpdateAt 更新。,仅前后台切换、不改牌组时列表刷新不应该改变 currentDeckId。,删除当前牌组后返回首页选择器应该落到默认牌组。,模拟 Preferences 为空时currentDeckId 仍有 DEFAULT_DECK_ID 兜底。];收口回到前台刷新 的交付边界这篇的结论可以压成一句话EntryAbility 负责前后台事件DeckPicker 负责选项和选中项重算DeckService 负责持久化牌组。 只要这个边界不变后续加设置项、恢复入口、批量操作或发布校验都能沿着同一条链路扩展。如果要把ForegroundDeckRefreshState真正落到工程里优先改服务和模型再接页面。这样回到前台刷新的多个入口能复用同一套规则文章里的验证点也能直接转成开发时的回归清单。ervice 负责持久化牌组。 只要这个边界不变后续加设置项、恢复入口、批量操作或发布校验都能沿着同一条链路扩展。如果要把ForegroundDeckRefreshState真正落到工程里优先改服务和模型再接页面。这样回到前台刷新的多个入口能复用同一套规则文章里的验证点也能直接转成开发时的回归清单。
返回列表