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

发布时间：2026/7/24 5:07:40

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/7/24 5:07:40 阅读更多 →
Sites框架：AI智能体的网页自动化操作系统设计与实战

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

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

2026/7/24 5:07:40 阅读更多 →
天津宝妈学烘焙选什么课程好

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

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

2026/7/24 5:06:40 阅读更多 →

最新新闻

Linux C++事件驱动编程：从回调机制到Reactor模式实现

Linux C++事件驱动编程：从回调机制到Reactor模式实现

1. 项目概述：为什么要在Linux下用C搞事件驱动？如果你在Linux上写过C的网络服务或者GUI程序，大概率会碰到一个经典难题：如何高效地处理来自多个来源的输入？比如，一个服务器要同时监听成百上千个客户端的连接…

2026/7/24 5:14:42 阅读更多 →
C++ STL deque内存管理：从分块原理到实战优化

C++ STL deque内存管理：从分块原理到实战优化

1. 项目概述：为什么需要深挖deque的内存管理？在C的标准模板库（STL）里，deque（双端队列）是个既熟悉又陌生的容器。很多开发者知道它支持头尾高效插入删除，也知道它不像vector那样在尾部…

2026/7/24 5:14:42 阅读更多 →
面向杭州商会的技术选型实践：私域管理系统的架构验证与能力压测路径

面向杭州商会的技术选型实践：私域管理系统的架构验证与能力压测路径

针对杭州地区商会组织的数字化升级需求，技术团队需跳出营销话术，聚焦可编码验证的能力边界。核心验证目标包括：多层级组织建模支持度、非雇员角色权限控制粒度、非结构化内容存储与检索能力、标准化数据出口完备性。建议采用分阶段技术验证流…

2026/7/24 5:14:42 阅读更多 →
上虞想要咖啡、甜点、中餐一站实现？这5家融合店不妨了解下

上虞想要咖啡、甜点、中餐一站实现？这5家融合店不妨了解下

在忙碌的生活中，我们常常渴望能有一个地方，既能品尝到香浓的咖啡，又能享用到精致的甜点，还能有美味的中餐可供选择，实现一站式的美食体验。而在上虞，就有这样几家宝藏融合店，今天就来给大家推荐…

2026/7/24 5:14:42 阅读更多 →
任务失败推送到飞书

任务失败推送到飞书

import oracledb import requests import json# 配置区 请自行修改 db_host "192.168.1.100" db_port 1521 db_service "" db_user "" db_pwd ""#飞书机器人Webhook 地址 FEISHU_WEBHOOK "https://" # # 扩展后的SQ…

2026/7/24 5:14:42 阅读更多 →
GitLab 19.2 发布：AI 助力自动修复依赖项，多功能突破代码审查与安全瓶颈

GitLab 19.2 发布：AI 助力自动修复依赖项，多功能突破代码审查与安全瓶颈

GitLab 19.2：多维度升级的 DevSecOps 平台GitLab 宣布发布 DevSecOps 平台的更新版本 GitLab 19.2，带来了一系列令人瞩目的新功能。其中，依赖扫描自动修复目前处于公开测试阶段，它借助 AI 修复导致构建失败的更改，持续…

2026/7/24 5:13:42 阅读更多 →

日新闻

用Highcharts 创建可拖拽三维散点立方体3D图表

用Highcharts 创建可拖拽三维散点立方体3D图表

该案例基于Highcharts scatter3d 三维散点图实现空间立方体散点可视化，核心特色：三维 X/Y/Z 三轴空间，所有散点分布在 0~10 立方体空间内；散点使用径向渐变实现立体 3D 圆球质感；支持鼠标 / 触屏拖拽画布，…

2026/7/24 0:00:29 阅读更多 →
AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口 AppCertDlls 位于 HKLM\System\CurrentControlSet\Control\Session Manager\AppCertDlls。本文的程序功能是只读列出这个键在 64 位和 32 位注册表视图中的全部值，并显示每条值的来源、名称、类型和可安全显示的数…

2026/7/24 0:00:29 阅读更多 →
我的编程之路：第一篇博客

我的编程之路：第一篇博客

大家好，我是一名编程初学者，同时这也是我编程学习之路上的第一篇博客。在这里，我想要向大家介绍我的一些想法和规划。a.自我介绍我是一个刚刚接触编程的新手，目前在学习c语言，我对编程世界充满了强烈的好奇。当然&…

2026/7/24 0:00:29 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/24 3:59:20 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/24 1:23:39 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/23 17:49:47 阅读更多 →

月新闻