《移动应用开发技术与实战（ArkTS）》课件 项目12-考研通App开发

研项目1212.1项目介绍12.2项目准备12.3项目实现12.1项目介绍考研通App功能定位约3分钟考研通是什么？•基于HarmonyOSNEXT开发的考研资讯类应用。•面向考研学生，提供备考资讯和经验分享。•项目重点不是数据规模，而是通过完整App案例串联前面所学知识。核心能力：资讯推送+经验分享通过真实页面开发，理解“项目从搭建到功能落地”的全过程。03研项目1212.1项目介绍12.2项目准备12.3项目实现12.2项目准备创建项目与目录规划约5分钟操作要点•在DevEcoStudio中创建kaoyan_success项目。•新建components、constants、utils、models、views、testdata六个目录。•目录规划的目的，是让页面、组件、数据模型和测试数据各自归类，便于后续维护。04研项目1212.1项目介绍12.2项目准备12.3项目实现12.2项目准备资源配置：颜色、图片与测试数据color.json管理颜色，media管理图片，testdata用于模拟后端数据。05研项目1212.1项目介绍12.2项目准备12.3项目实现12.2项目准备修改应用图标和应用名称module.json5设置桌面图标，string.json设置应用名称，AppScope设置应用与元服务的图标和名称。06研项目1212.1项目介绍12.2项目准备12.3项目实现12.3.1登录页面页面结构与视觉效果约5分钟登录页包含三类元素•应用信息：图标、名称、宣传语。•表单区域：用户名输入框、密码输入框。•操作按钮：立即登录，并绑定登录函数。Column垂直布局TextInput双向绑定Button触发登录讲解建议：先展示页面效果，再说明它由“应用信息区”和“登录表单区”组成。07研项目1212.1项目介绍12.2项目准备12.3.2应用Tabs底部导航结构约5分钟Tabs解决什么问题？•实现底部导航栏页面切换。•三个页签：首页、研经、我的。•当前页签通过activeIndex状态记录。•图标和文字根据选中状态动态变化。TabsTabContentBuilder封装TabBar1012.3项目实现12.3项目实现研项目1212.1项目介绍12.2项目准备12.3项目实现12.3.3我的页面用户中心页面结构约5分钟“我的”页面包含•顶部用户信息：头像、昵称、编辑信息。•导航项：历史记录、我的收藏等。•工具项：常用单词、意见反馈等。•退出登录：清空用户状态并返回登录页。@StorageProp读取用户GridRow导航Builder复用13研项目1212.1项目介绍12.2项目准备12.3项目实现12.3.4首页页面搜索栏、轮播图与新闻列表约5分钟“首页”页面由三部分组成•顶部搜索栏：扫描图标和搜索框。•中间轮播图：Swiper自动播放三张图片。•底部新闻列表：使用List+NewsItemComp动态渲染。Row搜索栏Swiper轮播图List新闻列表16研项目1212.1项目介绍12.2项目准备12.3项目实现12.3.5研经页面页面结构与功能定位“研经”页面包含三部分•头部区域：考研通标识和搜索框。•高校展示区：横向展示高校图标和热门指