当前位置：首页 > news >正文

open harmony 项目实战：用 AppStorage 实现轻量级页面路由和状态管理

news 2026/7/1 1:26:37

open harmony 项目实战：用 AppStorage 实现轻量级页面路由和状态管理

在 OpenHarmony 项目里，如果应用规模不是特别大，不一定一开始就要引入复杂路由方案。我的“语文视界”项目采用了一个更轻量的做法：用AppStorage记录当前页面、上一个页面和详情页参数，再由主入口Index.ets控制页面展示。✨

这篇文章就来拆解这种做法。

一、为什么要自己做轻量路由

语文学习 App 的页面层级大致是这样：

首页、诗词、阅读、字典、学习、我的：一级页面。
诗词详情、诗人详情、阅读详情：二级页面。
收藏、反馈、推荐、诗词配对、默写、朝代排序：功能页。

如果每个页面都独立管理跳转，代码会比较散。我的做法是把跳转统一收敛到Index.ets，让它成为页面调度中心。

二、核心状态设计

Index.ets中最重要的是两个状态：

@StatecurrentTabIndex: number =0;@StatecurrentView: string ='home';

currentTabIndex负责底部导航选中状态，currentView负责真正展示哪个页面。

进入页面时，还会从全局存储中恢复页面状态：

privatecheckSubPageNav():void{constview = AppStorage.get<string>('current_view');if(view) {this.currentView = view; } }

这样即使页面状态被其他模块写入，主容器也能同步更新。

三、页面跳转怎么写

以进入诗词详情为例：

privatenavToPoetryDetail(poetryId:number): void {AppStorage.setOrCreate('prev_view',this.currentView);AppStorage.setOrCreate('nav_poetry_id',poetryId);AppStorage.setOrCreate('current_view', 'poetry_detail'); this.currentView = 'poetry_detail'; }

这段代码做了三件事：

保存上一页，用于返回。
保存诗词 id，用于详情页加载数据。
切换当前页面为poetry_detail。

阅读详情也是类似：

privatenavToReadingDetail(id:number): void {AppStorage.setOrCreate('prev_view',this.currentView);AppStorage.setOrCreate('nav_reading_id',id);AppStorage.setOrCreate('current_view', 'reading_detail'); this.currentView = 'reading_detail'; }

四、详情页如何接收参数

诗词详情页通过AppStorage获取nav_poetry_id：

aboutToAppear(): void {constpoetryId = AppStorage.get<number>('nav_poetry_id');if(poetryId !== undefined && poetryId >0) {this.poetryId = poetryId;this.loadPoetryDetail(); } }

阅读详情页也是同样思路：

constraw = AppStorage.get<number>('nav_reading_id');if(raw && raw >0) {this.readingId = raw;this.item = getReadingItemById(raw); }

这很像一个极简参数传递机制，适合本项目这种页面关系清晰的应用。

五、返回逻辑

返回时只需要读取prev_view：

privategoBack():void{constprevView = AppStorage.get<string>('prev_view') ||'home';this.currentView = prevView; AppStorage.setOrCreate('current_view', prevView); }

这个实现很简洁。不过也有一个注意点：如果未来页面层级更深，只存一个prev_view可能不够，需要升级成页面栈。

六、页面渲染逻辑

Index.ets里根据currentView决定展示哪个页面：

if(this.currentView ==='poetry_detail') { PoetryDetail({ onBack: () =>this.goBack() }); }elseif(this.currentView ==='reading_detail') { ReadingDetail({ onBack: () =>this.goBack() }); }elseif(this.currentView ==='poetry_list') { PoetryList({ onPoetryClick: (id: number) =>this.navToPoetryDetail(id) }); }

这种写法的优点是页面关系很直观。打开文件就能看到整个应用的页面流转关系。

七、Tab 切换时的动画

切换底部 Tab 时，项目还加入了淡出和滑动动画：

animateTo({ duration: ANIM_DURATION.FAST, curve: ANIM_CURVES.STANDARD, onFinish: () => {this.currentTabIndex = index;this.currentView = viewMap[index] ||'home'; } }, () => {this.tabContentOpacity =0;this.tabContentTranslateY = -5; });

页面状态切换不只是“换内容”，还带有轻微过渡，体验会顺滑很多。😊