HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结

发布时间：2026/10/12 6:26:39

HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
25. 我的页面、Web 嵌入与项目总结本章导读「我的」页面是应用的个人中心入口承载用户信息、积分管理、系统设置等功能。本章将详解 MineView 的登录状态管理、WebPage 的网页嵌入、SettingPage 与 AboutPage 的设置体系并对整个项目的架构设计与最佳实践进行全面总结。25.1 MineView 个人中心用户信息展示MineView 展示头像、昵称和登录状态未登录时点击头像触发登录// MineView.etsComponentexportstruct MineView{StateisLoggedIn:booleanfalse;StateuserInfo:string未登录;StateuserNickname:string柚兔;Stateavatar:Resource|string$r(app.media.ic_avatar);aboutToAppear():void{this.updateLoginState()}build(){Column(){Row({space:10}){Image(this.avatar).width(48).clip(true).borderRadius(30).onClick((){if(!this.isLoggedIn){this.login()}})Column({space:8}){Text(this.userInfo).fontSize(16).fontWeight(FontWeight.Bold)Text(书山有路勤为径).fontColor($r(app.color.color_sub_text)).fontSize(12)}.layoutWeight(1).alignItems(HorizontalAlign.Start)Image($r(app.media.ic_setting)).width(32).onClick((){this.pageContext.openPage({routerName:SettingPage,onReturn:async(data){this.updateLoginState()}},true);})}.backgroundColor($r(app.color.color_card)).borderRadius(5).padding(12)}}}登录流程登录通过 BackupManager 华为账号服务实现login(){constbackupManagerBackupManager.getInstance();if(!BackupManagerService.getInstance().isBackupManagerInitialized()){promptAction.showToast({message:等待初始化完成});return;}this.isLoggedInUserInfoManager.isLoggedIn();if(this.isLoggedIn)return;try{backupManager.login();setTimeout((){this.updateLoginState();},1000);}catch(error){console.error(登录失败:,error);}}登录状态更新privateupdateLoginState(){this.isLoggedInUserInfoManager.isLoggedIn();if(this.isLoggedIn){constuserInfoDataUserInfoManager.getUserInfo();this.userInfo${userInfoData?.nickName||未登录};this.avataruserInfoData?.avatarUri||$r(app.media.ic_avatar)}else{this.userInfo未登录;this.avatar$r(app.media.ic_avatar)}}UserInfoManager封装了华为账号的用户信息读取isLoggedIn()判断登录状态getUserInfo()获取昵称和头像 URI。CardItem 列表导航MineView 使用通用CardItem组件构建功能列表Column({space:12}){CardItem({name:我的积分}).onClick((){this.pageContext.openPage({routerName:ScorePage},true);})CardItem({name:反馈建议}).onClick((){this.pageContext.openPage({param:{title:反馈建议,url:https://ncn1rpfvd5vb.feishu.cn/share/base/form/shrcnwljf1ptBZVyKfmWH3eS6Ih,}asResultParams,routerName:WebPage,},true);})}通过ResultParams传递标题和 URL 给 WebPage实现从原生到 Web 的无缝跳转。25.2 WebPage 网页嵌入核心实现WebPage 使用 ArkUI 的 Web 组件嵌入网页配合webview.WebviewController控制页面行为// WebPage.etsimport{webview}fromkit.ArkWeb;Componentstruct WebPage{controller:webview.WebviewControllernewwebview.WebviewController();Stateurl:stringStatetitle:stringStateisLoading:booleantruebuild(){NavDestination(){Column(){TopBar({title:this.title,onBack:(){this.pageContext.popPage(true)}})Stack(){Web({src:this.url,controller:this.controller}).layoutWeight(1).onPageEnd((){this.isLoadingfalse})LoadingProgress().width(40).height(40).visibility(this.isLoading?Visibility.Visible:Visibility.None)}.layoutWeight(1)}}.onReady((ctx:NavDestinationContext){constparamsctx.pathInfo.paramasResultParams;this.urlparams.urlasstringthis.titleparams.titleasstring})}}ResultParams 接口exportinterfaceResultParams{score?:numberfirstScore?:numbersecondScore?:numberthirdScore?:numberforthScore?:numberoddScore?:numberevenScore?:numbertype?:numbertitle?:stringurl?:string}该接口同时服务多个页面积分详情、Web 页面等通过title和url字段驱动 WebPage 的标题栏和网页地址。加载状态处理onPageEnd回调在网页加载完成时触发关闭 LoadingProgress 指示器.onPageEnd((){this.isLoadingfalse})isLoading默认为 true页面初始即显示加载动画加载完成后切换为 Web 内容。25.3 SettingPage 设置页SettingPage 提供隐私政策入口与退出登录功能// SettingPage.etsComponentstruct SettingPage{build(){NavDestination(){Column(){TopBar({title:设置,onBack:(){this.pageContext.popPage(true)}})Column({space:12}){CardItem({name:儿童隐私政策}).onClick((){this.pageContext.openPage({param:{title:儿童隐私政策,url:http://www.ai-youtoo.cn/partner_children_privacy.html,}asResultParams,routerName:WebPage,},true);})CardItem({name:关于我们}).onClick((){this.pageContext.openPage({routerName:AboutPage},true);})}.backgroundColor($r(app.color.color_card)).borderRadius(12).padding(12)Blank().layoutWeight(1)Button(退出登录,{type:ButtonType.Normal}).backgroundColor($r(app.color.app_alert)).onClick(async(){UserInfoManager.clearUserInfo()this.pageContext.popPage(true,newObject({index:0}))});}}}}退出登录时调用UserInfoManager.clearUserInfo()清除本地用户数据然后返回上一页。MineView 通过onReturn回调自动刷新登录状态。25.4 AboutPage 关于页AboutPage 展示应用品牌信息// AboutPage.etsComponentstruct AboutPage{build(){NavDestination(){Column({space:10}){TopBar({title:关于我们,onBack:(){this.pageContext.popPage(true)}})Column({space:10}){Image($r(app.media.startIcon)).width(60).height(60).margin({top:20})Text(柚兔学伴).fontSize(18).margin({top:10,bottom:40})Blank().layoutWeight(1)Text(柚兔(山东)网络科技有限责任公司).fontSize(12).fontColor($r(app.color.color_text)).margin({top:30})Text(鲁ICP备2024092126号-4A).fontSize(12).fontColor($r(app.color.color_text))}}}}}布局采用Blank().layoutWeight(1)将公司信息推至底部营造居中对称的视觉感。25.5 项目架构总览九模块架构StudyPartner/ ├── entry/ # 主入口模块EntryAbility、HomePage ├── common/ # 公共模块工具类、管理器、通用组件 ├── feature/ │ ├── todo/ # 待办与诗词模块 │ ├── stroke/ # 笔画查询模块 │ └── my/ # 个人中心模块 ├── backup_air/ # 云备份与登录模块 ├── network/ # 网络请求模块 └── smartxplayer/ # 音频播放模块模块化优势功能边界清晰团队可并行开发模块可独立编译测试提升构建效率公共能力统一收敛到 common避免代码重复MVVM 模式View (Component) ←→ ViewModel (Model类) ←→ Model (Database/Preferences)以 StrokeView 为例ViewStrokeView 组件负责 UI 渲染与用户交互ViewModelStrokeModel 单例管理笔画数据与 AI 对话状态ModelCharacterService 云端 API提供汉字数据25.6 最佳实践总结通用组件抽取项目抽取了高频使用的通用组件组件用途使用位置TopBar顶部导航栏所有二级页面CardItem列表行项MineView、SettingPageIconText图标文字功能入口TodoViewLoadingView全局加载态TodoViewCustomImageToggle自定义开关TodoView 任务完成抽取原则同一 UI 模式出现 3 次以上即抽取为通用组件。数据库封装模式所有 RDB 数据库遵循统一封装范式classXxxDatabase{privatestore:relationalStore.RdbStore|nullnull;asyncinitialize(){/* getRdbStore executeSql */}asyncaddXxx(){/* insert */}asyncgetXxxById(){/* query equalTo */}asyncgetAllXxx(){/* query orderByDesc */}asyncupdateXxx(){/* update equalTo */}asyncdeleteXxx(){/* delete equalTo */}asyncclose(){/* store.close */}privateresultSetToXxx(){/* ResultSet → 接口对象 */}}TodoDatabase、GiftExchangeDatabase 均遵循此模式新增数据实体只需替换表名和字段。单例模式需要全局共享状态的管理器使用单例BackupManager.getInstance()UserInfoManager(静态方法)RecordUtils.getInstance()BreakpointSystem HttpManager控制器模式组件间通信采用控制器解耦TimerComponentController外部控制倒计时启动/暂停/重置LottieController控制 Lottie 动画播放/暂停/停止webview.WebviewController控制 Web 页面前进/后退/刷新全局状态管理// 写入AppStorage.setOrCreate(GlobalInfoModel,model)// 只读绑定StorageProp(GlobalInfoModel)globalInfoModel:GlobalInfoModelAppStorage.get(GlobalInfoModel)!StorageProp单向绑定UI 只读不写StorageLink双向绑定UI 可修改。25.7 性能优化要点LazyForEach 懒加载长列表使用LazyForEach替代ForEach按需加载列表项List(){LazyForEach(this.dataSource,(item){ListItem(){/* ... */}})}ForEach一次性创建所有节点LazyForEach仅渲染可视区域大幅减少内存占用。图片缓存与资源管理图片资源使用$r()引用系统自动管理缓存Lottie 动画在aboutToDisappear中清理控制器Canvas 上下文在页面销毁时置空定时器清理所有setInterval必须在aboutToDisappear中清除aboutToDisappear():void{if(this.internalId){clearInterval(this.internalId)}if(this.strokeManager!null){this.strokeManager.stopAnimation();this.strokeManager.resetAnimation()}if(this.context){this.context.clearRect(0,0,100,100);this.contextnull}}25.8 发布准备签名配置Release 版本需要配置正式签名// build-profile.json5 { signingConfigs: [{ name: release, type: HarmonyOS, material: { certpath: certs/release.cer, storePassword: ..., keyAlias: release, keyPassword: ..., profile: certs/release.p7b, signAlg: SHA256withECDSA, storeFile: certs/release.p12 } }] }版本管理versionCode递增整数每次发布 1versionName语义化版本号如 1.0.0严格模式合规ArkTS 严格模式下需注意禁止使用any类型禁止运行时类型变更必须显式初始化类属性空安全可选属性需用?.或非空断言!!全系列总结至此「柚兔学伴」HarmonyOS 项目教程全 25 讲完结。我们从项目创建与基础导航开始逐步覆盖了基础架构多模块工程、Navigation 导航、TabBar 布局数据持久化Preferences 轻量存储、RDB 关系数据库核心功能待办管理、诗词朗读、笔画查询、字帖生成、PDF 导出进阶能力AI 智能体对话、Lottie 动画、Canvas 绘制、语音交互生态集成华为账号登录、云存储、Web 嵌入、系统文件选择器工程实践组件抽取、单例模式、控制器解耦、性能优化、发布流程HarmonyOS 的 ArkUI 声明式开发范式为儿童教育应用提供了丰富而高效的能力支撑。希望本系列能帮助开发者在鸿蒙生态中快速构建高质量应用。

相关新闻

企业级AI智能体架构设计与核心挑战解析

企业级AI智能体架构设计与核心挑战解析

1. 企业级AI智能体的核心挑战与设计目标在构建企业级AI智能体时，我们首先需要理解其与传统AI应用的显著差异。企业级场景对系统的稳定性、可扩展性和安全性有着严苛要求，这直接决定了整个系统架构的设计方向。1.1 企业级场景的特殊性企业环境中的AI智能体…

2026/10/4 12:21:00 阅读更多 →
Sites框架：AI智能体的网页自动化操作系统设计与实战

Sites框架：AI智能体的网页自动化操作系统设计与实战

如果你最近在关注 AI 智能体（Agent）领域，可能已经注意到一个现象：很多团队都在尝试构建能够自主完成复杂任务的 AI 系统，但真正能稳定运行、处理多步骤流程的却不多。其中一个关键瓶颈在于，如何让 AI 智能体…

2026/10/7 5:27:05 阅读更多 →
天津宝妈学烘焙选什么课程好

天津宝妈学烘焙选什么课程好

天津不少宝妈在空闲时间希望学习烘焙，要么是给家人制作健康放心的点心，要么是打算掌握技能后开启小成本创业，结合不同需求选择合适的课程，能提升学习效率，适配自己的时间安排。明确学习核心目标选择课程方向 对于只是想…

2026/9/28 10:06:52 阅读更多 →

最新新闻

短线交易生存指南：模式内交易、仓位管理与止损铁律

短线交易生存指南：模式内交易、仓位管理与止损铁律

我不确定各位做短线交易多久了，但如果你在交易社区里泡过一阵，应该会发现一个特别直观的现象：晒收益截图的人换了一茬又一茬，今天还在涨停板上来回横跳的那位，第二年基本就没了声音。短线交易之所以是淘汰率最高的领域…

2026/10/12 6:25:44 阅读更多 →
Mongoose入门教程：用TaoToken统一Key打通Node.js与MongoDB开发链路

Mongoose入门教程：用TaoToken统一Key打通Node.js与MongoDB开发链路

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

2026/10/12 6:25:44 阅读更多 →
傅里叶算子结合SVM的手势识别源码详解与调参实战

傅里叶算子结合SVM的手势识别源码详解与调参实战

简介：面向手势识别与计算机视觉学习场景，这份完整源代码基于Python实现，并附带已构建好的样本库，适合机器学习初学者、课程设计或毕业设计者借鉴。代码运行于Win10 Python3.7环境，完整覆盖图像平滑、OTSU阈值肤色分割…

2026/10/12 6:25:44 阅读更多 →
CAMStoWRF完全指南：从CAMS数据下载到WRF-Chem初边界场配置

CAMStoWRF完全指南：从CAMS数据下载到WRF-Chem初边界场配置

做空气质量模拟的人应该都干过这件事：把全球化学模式的输出结果塞进WRF-Chem里当初始场和边界场。早些年大家满世界找MOZART的nc文件，后来慢慢有人开始用CAMS（哥白尼大气监测服务）的再分析数据。CAMS数据覆盖面广、化学物种相对齐…

2026/10/12 6:25:44 阅读更多 →
多角色管理与押金自动退：一站式租赁商城小程序源码系统解析

多角色管理与押金自动退：一站式租赁商城小程序源码系统解析

做租赁类小程序这几年，我见过太多项目死在同一个坑里：商品、支付都接好了，结果押金体系没设计好，客人退押金要催、商家扣款要吵、平台两边受气。今天聊的这套“多角色管理、押金自动退的一站式线上租赁商城小程序源码系统”&#…

2026/10/12 6:25:44 阅读更多 →
开源+私有化：打造能主动干活的企业AI工作伙伴

开源+私有化：打造能主动干活的企业AI工作伙伴

1. 从"只会聊天"到"能干活"：企业AI落地的真实断层在哪过去两年，我参与过好几个企业内部的AI助手项目，几乎每一个都经历过同样的尴尬：上线第一周大家图新鲜，问天气、写周报、翻译邮件，用…

2026/10/12 6:24:44 阅读更多 →

日新闻

复古胶片颗粒感噪点合成器：Canvas ImageData 像素高斯杂色注入算法

复古胶片颗粒感噪点合成器：Canvas ImageData 像素高斯杂色注入算法

在数码相机、高清显示屏与现代矢量图形技术高度发达的今天，画面可以做到绝对的锐利、平滑与无瑕。然而，当一张秋日手账插画或拍立得照片过于“平整无瑕”时，往往会散发出一种冰冷生硬的“数码塑料感（Digital Plasticity&#xff0…

2026/10/12 0:00:59 阅读更多 →
活字印刷古籍线装排版：Canvas 竖排文字与栏线自适应算法

活字印刷古籍线装排版：Canvas 竖排文字与栏线自适应算法

在现代网页与移动端设计中，横排（Horizontal Layout）早已经成为了绝对的主流。然而，当我们翻开泛黄的线装古籍、宋版木刻诗集，或是欣赏一张茶道雅集的手写便签时，那种**自上而下纵向书写、自右向左逐列铺展&…

2026/10/12 0:00:59 阅读更多 →
周日晚间的“精神松绑减震器”：无压力情绪倾倒箱与温和轻声陪伴

周日晚间的“精神松绑减震器”：无压力情绪倾倒箱与温和轻声陪伴

每到周日的晚上八点到十点，很多人心里都会悄悄亮起一盏警示灯。 在心理学上，这种现象有一个专门的称谓——“周日夜晚焦虑症（Sunday Scaries）”。明天又是周一，闹钟又要重新在七点响彻卧房；脑海里仿佛有一个…

2026/10/12 0:00:59 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/12 0:16:30 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/12 0:16:43 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

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

2026/10/11 10:45:37 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

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

2026/10/11 14:36:53 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

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

2026/10/11 14:36:54 阅读更多 →