简介移动应用开发是当前软件工程领域的核心技能而期末项目往往需要综合运用组件化、状态管理和数据持久化等技术。声明式UI作为现代移动端主流的界面构建方式通过状态驱动渲染能显著提升开发效率。在HarmonyOS生态中ArkTS与ArkUI结合提供了一套完整的声明式开发方案十分适合校园服务类应用的落地。本文以校园迎新APP为例从功能设计、DevEco Studio工程搭建、核心页面实现底部导航、资讯列表、报到流程、地图标注到期末报告撰写与答辩准备系统梳理了完整链路。同时针对高频踩坑点如SDK版本匹配、数据类型约束、Preferences持久化等给出排查建议帮助读者将“能跑”的项目打磨成“能讲、能答辩、能拿高分”的期末作品。 前阵子帮一个学弟把关他的移动应用开发期末大作业正好是一道鸿蒙开发的校园迎新APP题目。他手里已经有了一套源码加一份报告模板但不知道报告怎么写才像样、源码里哪些部分能拿出来当亮点讲。我花了一晚上把他的项目从头到尾捋了一遍顺便把这类期末项目常见的坑、套路和加分项都整理了一下。这篇东西不光是给他一个人的也是给所有选鸿蒙开发方向、正在为移动应用开发期末作业发愁的同学。你可以把它当成一份“如何把校园迎新APP从能跑变成能讲、能答辩、能拿高分”的实操指南。无论你手上是别人给的源码还是自己一行行敲出来的这篇文章都能帮你搞清楚这个项目到底做了什么、每一步为什么这么设计、答辩时老师会盯着哪里问。1. 项目整体设计与思路拆解1.1 选题定位为什么是校园迎新APP先聊选题。移动应用开发的期末作业选题五花八门有做记账本的、有做健身打卡的、有做二手交易平台的为什么校园迎新APP是个“稳”的选择核心原因就一个场景足够具体功能边界清晰。迎新是每所高校每年都会发生的真实业务新生要查入学须知、看报到流程、找宿舍位置、了解社团活动学校要发通知、统计报到情况、引导新生完成各个环节。这套业务天然就是一堆移动端页面的组合非常适合在期末项目里落地。另外这个选题有很强的“汇报优势”。答辩的时候你不需要花五分钟解释你的项目解决了什么虚构的痛点直接说“这是给新生入学用的解决报到流程不清楚、信息分散的问题”老师立刻就懂。场景越真实需求分析越好写代码和报告之间的对应关系也越强。我见过不少同学期末选了个特别宏大的题目比如“基于大数据的校园社交平台”结果代码就写了三个页面报告里需求分析吹了两千字。这种项目一到答辩就被问崩了。相比之下校园迎新APP虽然功能看起来“小”但每个功能都能落地每一步都有据可查这才是期末作业该有的样子。1.2 技术路线鸿蒙开发这一版该怎么选2024年之后移动应用开发课上出现鸿蒙开发的频次越来越高不少学校的期末作业也直接允许甚至鼓励学生用鸿蒙技术栈来做。做这个题目首先要搞清楚一件事鸿蒙开发现在有两条技术路线。一条是ArkTS ArkUI 的声明式开发这是目前官方主推的方向基于TypeScript语法UI通过状态驱动的声明式写法来构建开发工具是DevEco Studio。另一条是兼容Java的传统UI开发官方已经不再主推我不建议期末项目选这条路报备起来容易出问题资料也少。这篇文章默认你用的是ArkTS ArkUI 这条线。选它的理由有三点上手成本对前端/移动方向的同学友好。ArkTS的语法脱胎于TypeScript写过JS/TS的人切过来基本没有心理障碍。UI表达能力强。ArkUI的组件体系和Flutter、SwiftUI的思路很像用状态驱动UI变化写起来比传统的XML布局更符合直觉。免去环境折腾。DevEco Studio自带模拟器和预览器如果你没有华为真机也能完成绝大部分功能调试和录屏需求。校园迎新APP这种以表单、列表、信息展示为主的应用恰好是ArkUI最擅长的场景。这个题目的代码量不会很大但对声明式开发的核心概念状态管理、组件化、路由、数据持久化都能覆盖到期末答辩时每一个概念都可以展开讲。1.3 功能清单与页面流转设计在写任何代码之前先花半小时把功能清单理清楚。我当时帮学弟梳理的是这样一套你可以直接参考首页迎新公告轮播图 快捷入口报到流程、校园地图、宿舍查询、新生指南 最新通知列表报到分步骤展示报到流程每个步骤包含说明文字、状态标识未开始/进行中/已完成、办理地点和所需材料指南常见问题列表支持关键词搜索点进去是详情页校园地图一张静态校园示意图标注图书馆、食堂、宿舍楼、报到点等主要建筑支持点击查看建筑名称和简介我的个人信息展示学号、姓名、学院、我的报到进度、意见反馈入口、关于页面页面流转大概是这样的底部Tab负责四个主页面首页、报到、指南、我的从首页的快捷入口可以跳转到二级页面比如地图页、宿舍查询页指南列表页点进去是详情页我的页面的“我的报到进度”又回到报到页。这个闭环非常关键答辩时老师一定会问“你的页面之间是怎么跳转的”你要能说清楚每一步。2. 开发环境与工程架构准备2.1 DevEco Studio 安装与工程创建工欲善其事必先利其器。做鸿蒙开发DevEco Studio是唯一的IDE选择它目前有Windows和macOS版本下载渠道是华为开发者联盟官网。安装过程没什么特别需要说的但有几个细节值得提醒。一是API版本和SDK的选择。创建工程时DevEco Studio会让你选择兼容的API版本一般选最新的稳定版就好代际差异不影响你这套代码的运行。但是要注意如果你后面要用模拟器模拟器镜像和SDK版本必须匹配否则会提示版本不一致。我们当时就在这一点上卡了半小时最后发现是SDK 12的工程用了SDK 11的模拟器镜像。二是华为账号登录。DevEco Studio的很多能力比如模拟器下载、真机调试授权都依赖华为账号建议安装完成后第一时间登录账号。如果你用的是学校机房电脑注意登录状态可能在重启后失效答辩前一定要提前检查模拟器能不能正常拉起。三是工程模板的选择。新建工程时选择“Empty Ability”模板就够了设备类型选Phone。千万不要为了省事选“Full Screen Ability”或者其他花哨模板里面自带的示例代码会干扰你对工程结构的理解。2.2 ArkTS 与声明式 UI 设计思路如果你之前只写过传统AndroidXML布局 Activity第一次打开ArkTS的页面文件可能会有点懵。它长这样Entry Component struct IndexPage { State message: string Hello HarmonyOS build() { Column() { Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) Button(点击更新) .onClick(() { this.message Welcome to HarmonyOS! }) } .width(100%) .height(100%) } }这就是ArkUI最核心的“声明式UI”写法。它和传统命令式UI最大的区别在于你不需要手动去查找某个控件、调用它的setText方法你只需要维护一个状态变量比如messageUI会自动跟着状态变。State装饰器是实现这种自动更新的关键。被State修饰的变量一旦发生变化所有依赖它的UI组件都会自动刷新。这个机制贯穿整个鸿蒙开发也是期末答辩时老师非常喜欢问的点。你要能用自己的话解释清楚为什么不需要调用类似notifyDataSetChanged()的方法UI就自己更新了。除了State还有几个常用的装饰器Prop接收父组件传值子组件内不能修改改父组件的值子组件会跟着更新。Link双向绑定子组件修改会同步回父组件。Builder自定义构建函数用来复用一段UI结构。Entry标记页面入口一个页面文件只能有一个。期末项目里State用得多Prop和Link一般会在“我的报到进度”和报到页之间的数据传递上用到你要能有意识地在代码里体现“父子组件通信”这个设计而不是把所有页面都写成一个巨大的组件。2.3 工程目录结构和资源管理鸿蒙工程创建完之后目录结构大概是这样的项目名/ ├── entry/ │ ├── src/ │ │ ├── main/ │ │ │ ├── ets/ │ │ │ │ ├── entryability/ │ │ │ │ └── pages/ │ │ │ ├── resources/ │ │ │ │ ├── base/ │ │ │ │ │ ├── element/ │ │ │ │ │ ├── media/ │ │ │ │ │ └── profile/ │ │ │ └── module.json5 │ │ └── ohosTest/ │ ├── build-profile.json5 │ └── hvigorfile.ts ├── build-profile.json5 ├── hvigorfile.ts └── oh-package.json5对期末项目来说你需要重点关注的是ets/pages目录和resources/base目录。ets/pages是放页面文件的地方。我建议一个页面一个文件文件名的首字母大写比如LoginPage.ets、ReportPage.ets、GuidePage.ets。千万别把所有页面堆在一个文件里哪怕代码能跑报告里的“系统架构图”也没法画。resources/base下面有三个常用目录element放字符串、颜色等资源media放图片资源profile放配置文件比如路由表。在代码里引用资源时用$r(app.media.logo)这种格式而不是直接写文件路径。好处是资源统一管理适配不同屏幕密度时不用改代码。3. 核心功能落地从页面到交互3.1 底部导航栏与 Tab 切换实现底部导航栏是校园迎新APP的门面也是我建议你第一个做的功能。做之前先想清楚这个项目的主页面有四个意味着底部导航栏需要有四个Tab图标加文字点击之后切换对应页面同时高亮当前选中的项。一个简洁的做法是使用Tabs组件。ArkUI的Tabs组件自带底部导航栏的能力你不需要自己用Row加Button去模拟。核心代码结构如下Entry Component struct MainPage { State currentIndex: number 0 private controller: TabsController new TabsController() build() { Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { HomePage() } .tabBar(this.tabBuilder(0, 首页, $r(app.media.ic_home))) TabContent() { ReportPage() } .tabBar(this.tabBuilder(1, 报到, $r(app.media.ic_report))) TabContent() { GuidePage() } .tabBar(this.tabBuilder(2, 指南, $r(app.media.ic_guide))) TabContent() { ProfilePage() } .tabBar(this.tabBuilder(3, 我的, $r(app.media.ic_profile))) } .onChange((index) { this.currentIndex index }) } Builder tabBuilder(index: number, title: string, icon: Resource) { Column() { Image(icon) .width(24) .height(24) Text(title) .fontSize(12) } .justifyContent(FlexAlign.Center) } }这里有几个关键点。一是tabBar传入的是一个Builder构建的自定义组件好处是你可以在Tab栏里灵活控制图标大小、文字颜色和间距。二是TabContent里的内容可以是独立的页面组件这意味着你的四个主页面各自维护自己的状态互不干扰。实操中要注意的是当你的某个Tab页面里使用了Scroll列表而TabContent外层也有滑动逻辑时可能会出现手势冲突表现为列表滑动偶尔不跟手。解决办法是把Tabs的scrollable属性设为false禁止左右滑动切换Tab只允许点击Tab栏切换。校园迎新APP完全可以接受这种交互因为四个页面之间没有左右滑动的必要。答辩时可以主动提一句“这里我通过Tabs组件实现底部导航将四个业务模块拆分成独立组件每个组件内部维护自己的业务状态降低模块间的耦合度。”这句话虽然短但是踩中了组件化和状态管理的两个考点。3.2 首页资讯流与卡片列表首页是一个App的脸面迎新APP的首页至少得把一个轮播图和一个资讯列表做出来。轮播图实现很简单ArkUI提供了Swiper组件Swiper() { ForEach(this.bannerList, (item: BannerItem) { Image(item.imageUrl) .width(100%) .height(180) .borderRadius(12) }, (item: BannerItem) item.id) } .autoPlay(true) .interval(4000) .indicator(true) .loop(true)资讯列表用List和ListItem实现。我建议你先定义好资讯的数据结构再通过ForEach渲染列表而不是每行都手写一遍。interface NewsItem { id: string title: string publishTime: string category: string } State newsList: NewsItem[] [ { id: 1, title: 2025级新生入学须知, publishTime: 2025-08-20, category: 通知 }, // 省略几条测试数据 ] build() { List({ space: 12 }) { ForEach(this.newsList, (item: NewsItem) { ListItem() { Row() { Column() { Text(item.title) .fontSize(16) .fontWeight(FontWeight.Medium) Text(item.publishTime) .fontSize(12) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Text(item.category) .fontSize(12) .fontColor(#FF7043) .backgroundColor(#FFF3E6) .borderRadius(4) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) } .padding(12) .backgroundColor(Color.White) .borderRadius(12) } }, (item: NewsItem) item.id) } .width(100%) .layoutWeight(1) }关于ForEach有一个细节需要特别注意第二个参数是item生成函数第三个参数是key生成函数。key必须稳定且唯一一般用item.id。如果不用key当列表数据发生增删时ArkUI的diff算法可能会出错表现为列表项复用错乱。这个问题期末项目里不容易触发因为你的数据大多是静态写死的但报告里写一句“通过唯一key优化列表渲染性能”显得很专业。3.3 报到流程页与表单交互报到流程页是整个项目里业务逻辑最重的一块也是最能体现“你不是在写玩具”的功能点。我的建议是把报到流程设计成五个步骤网上报到、缴纳学费、宿舍分配、领取校园卡、学院报到。每个步骤有四种状态未开始、进行中、已完成、当前步骤。用当前状态渲染不同的图标颜色和操作按钮。数据结构可以这样设计interface ReportStep { id: number title: string description: string location: string requiredMaterials: string status: pending | current | completed } State steps: ReportStep[] [ // 初始化五个步骤的数据 ] State currentStep: number 0 // 点击“下一步” nextStep() { if (this.currentStep this.steps.length - 1) { this.steps[this.currentStep].status completed this.currentStep this.steps[this.currentStep].status current } }页面展示时每个步骤用卡片呈现状态为“已完成”的是绿色打勾图标状态为“进行中”的按钮显示为可点击的“去办理”状态为“未开始”的按钮置灰。通过if/else条件渲染来切换卡片样式。这里有一个考点不可变性。ArkUI在状态管理上推荐“数据不可变”意思是你不要直接修改对象内部的某个属性比如this.steps[0].status completed而是应该整体替换这个对象或者用一个新的数组赋值给steps。原因很简单State的监听机制在检测对象深层属性变化时不可靠。正确做法是this.steps this.steps.map((step, index) { if (index this.currentStep) { return { ...step, status: completed } } return step })这种写法虽然看起来多写了几行但符合状态管理的最佳实践。报告里如果画了一个“状态更新流程示意图”把这个逻辑画清楚答辩时非常有底气。3.4 校园地图与本地数据持久化校园地图这个功能有同学会觉得很难认为要做成可缩放拖动的地图组件。期末作业完全不需要做一张静态图片加点击标注就够了。图片放在resources/base/media下然后使用Image组件加载再用Stack布局把可点击的热区叠加到图片上。比如食堂的位置大约在图片的(200, 350)处就用一个透明Button定位到那里点击后弹出一个Dialog或者bindPopup显示食堂的开放时间、窗口信息和推荐菜品。Stack() { Image($r(app.media.campus_map)) .width(100%) .height(500) Button(食堂) .position({ x: 170, y: 300 }) .width(60) .height(30) .opacity(0.8) .onClick(() { this.showBuildingInfo(食堂) }) } .alignContent(Alignment.TopStart)你可能要问位置怎么确定。最简单的方法先在模拟器里截图用预览工具打开图片鼠标找到目标建筑在图片里的像素坐标再把坐标写进position。这个方法听起来很“笨”但确实是最快、最准的。我当时让学弟在代码里写了三个标注点食堂、图书馆、体育馆每个点的位置都是这么人工标出来的。数据持久化这一块建议用ohos.data.preferences来实现。场景是用户第一次打开报到流程页时数据是模拟的但用户点击“去办理”并完成某个步骤后再次打开App之前的进度应该还在。用Preferences可以做到这一点。import { preferences } from kit.ArkData async function saveCurrentStep(step: number) { const pref await preferences.getPreferences(getContext(), myStore) await pref.put(currentStep, step) await pref.flush() }值得注意的细节是put方法之后必须调用flush数据才会真正落盘。这个属于文档里写了但新手很容易漏的坑期末报告中可以当成你的“踩坑记录”来写。4. 期末报告撰写与答辩准备4.1 报告的整体结构说句实在话期末报告的质量往往比代码本身更能决定分数。代码是给机器看的报告是给老师看的。老师没时间把你的代码从头到尾读一遍但一定会读报告。一份结构完整的报告至少需要包含这些章节封面按学校模板来摘要 关键词项目背景与需求分析系统设计架构图 功能模块图 数据库/数据持久化设计核心功能实现配上关键代码和截图系统测试测试用例表 测试结果项目总结与心得如果你用的是别人给的源码报告更要多花心思。老师也许早就看过那些网传的源码了甚至可能见过一模一样的三份报告。所以报告一定要自己写尤其是“项目总结与心得”部分写你在做这个项目的过程中最真实的困惑和收获这段是抄不了的。4.2 需求分析与系统设计部分的写法需求分析这块不建议写空洞的“随着移动互联网的发展”式的废话。直接进入主题这个App是给谁用的解决什么问题核心用户有哪些核心诉求。你可以用表格列出用户需求与对应功能比如用户需求对应功能优先级新生想快速了解入学流程报到流程步骤化展示高新生需要知道食堂、宿舍位置校园地图标注关键建筑高新生对校园生活有疑问常见问题指南及搜索中学校需要推送通知首页公告轮播与通知列表中新生个人报到进度需要保存本地持久化存储进度低系统设计部分一定要画至少一张架构图。不用画得多专业但层次要清楚。分三层展示层页面组件、逻辑层状态管理、路由、数据层本地数据、Preferences。这里不建议用Mermaid直接用PPT画或者手画截图都行。4.3 测试用例、截图与教程视频素材测试部分如果写得专业很容易让老师产生“这个学生态度很认真”的好感。不需要真正使用自动化测试框架手工测试用例就够用了。关键是格式要标准。每一条测试用例包含用例编号、测试模块、测试步骤、预期结果、实际结果、是否通过。比如TC-001 首页轮播图播放打开App进入首页观察轮播图。预期结果轮播图每4秒自动切换一张底部有指示器。实际结果与预期一致。通过。测试用例至少写8到10条覆盖所有主页面和核心交互。另外建议录制一个两分钟的演示视频从App启动开始依次展示首页、报到流程、指南搜索、地图标注、我的页面最后重启App展示报到进度被持久化保存。这个视频在答辩时直接放比现场演示稳定得多——现场演示可能因为网络、模拟器、电脑不配合而出各种幺蛾子。截图不要截得太随意。每张截图最好配一行说明“图4-1 首页轮播图效果”。在DevEco Studio里可以用模拟器的截图按钮也可以在预览器里截图。如果图片上有个人信息或者学院信息记得打码。5. 高频踩坑与调试排查记录5.1 模拟器和预览器的常见问题期末做鸿蒙项目大部分同学都会用到Previewer预览器而不是模拟器。预览器启动快适合单页面的UI调试但它有几个缺点有些系统能力不支持、路由跳转有时不生效、部分组件的动画效果显示不正确。我的建议是UI样式调整用预览器功能联调用模拟器。如果你发现某个页面在预览器里显示正常但模拟器里布局乱了先别急着改代码检查一下两边的屏幕尺寸设置是否一致。默认的Pixel设备分辨率比较低如果你按一个中尺寸手机去写布局在模拟器上确实可能出现遮挡。还有一个高频问题模拟器启动后一直卡在“Loading”界面。多半是SDK版本不匹配或者本地虚拟化没开。DevEco Studio的模拟器需要电脑开启虚拟化技术如果是Windows系统要在BIOS里打开Intel VT-x或者AMD-V。很多机房电脑是默认关闭的。去控制面板里“启用或关闭Windows功能”里确认“Windows Hypervisor Platform”这一项是勾选的如果没勾勾选后重启电脑。5.2 ArkTS语法细节与JSON数据解析ArkTS和TypeScript整体相似但有些限制需要特别注意这些限制期末前踩一次能记一辈子。首先是any类型是被禁止的。ArkTS在编译阶段不允许显式使用any和unknown所有变量必须有明确的类型。你写代码时如果从某个JSON接口动态拿到数据不要写let data: any ...要定义一个接口类型然后做类型断言。其次是对象字面量必须符合类的结构。ArkTS不允许你随意let obj {name: 张三, age: 18}然后到处传递推荐的做法是定义一个class或者interface来约束对象的结构。以迎新资讯为例interface NewsItem { id: string title: string publishTime: string category: string } let item: NewsItem { id: 1, title: 新生入学须知, publishTime: 2025-08-20, category: 通知 }另外如果你打算从网上下载JSON数据并解析不能直接用JSON.parse然后拿返回结果当对象用。需要先定义好类型再把parse返回的结果通过as做类型断言。这是期末项目里很常见的一个报错点提前知道能省下不少时间。5.3 真机同步与项目答辩前的检查清单如果你有华为手机可以试试真机调测体验会比模拟器好很多。步骤不复杂手机打开开发者模式连接电脑后在DevEco Studio里选择真机运行。需要注意鸿蒙手机上需要开启USB调试同时对“允许模拟位置”等权限进行授权。但期末答辩现场不建议依赖真机主要原因是你不知道现场会是什么系统、什么接口万一手机连不上就非常被动。演示视频 模拟器双保险是最稳的。答辩前一天的检查清单分享给你每一条都是过来人的教训项目能不能在DevEco Studio里直接打开并编译通过把工程从压缩包解压出来放到一个没有中文路径的目录下再测一次。模拟器能不能正常启动启动后App能不能正常安装运行如果模拟器有问题是不是已经录好了完整的演示视频视频里是否覆盖了所有核心功能报告中引用的代码和实际代码是否一致老师可能会对着一份代码提问如果报告里写的是A方案代码里却是B方案会很尴尬。关键术语是否理解比如State的作用、ForEach的key机制、Preferences的flush方法这些你在报告里写了就一定要能口头解释。6. 三个能帮你拿高分的加分项如果你时间还有富余在完成基本功能后可以从下面三个方向里挑一个做深一点效果比堆一堆花哨页面好得多。第一个是搜索功能的本地实现。指南页目前大部分实现都是静态列表如果加一个搜索框对列表数据进行实时过滤展示匹配的条目整个项目的交互感会明显提升。用ArkTS写起来也就二三十行核心是State里维护一个keyword变量然后通过filter生成新的展示列表再交给ForEach渲染。第二个是深色模式适配。鸿蒙应用在系统切换深色模式时未做适配套路的应用会直接变黑底白字丑得很难看。如果你在resources目录下创建dark子目录放一套适配深色背景的颜色资源然后在项目里通过$r加载颜色值就能自动适配。这个细节老师一眼就能注意到因为大多数同学的App是一副“深色模式全瞎”的状态。第三个是一句话总结。做项目总结时不要只写“通过这次开发我掌握了鸿蒙开发技术。”至少加一句有信息量的话比如“我在开发过程中遇到的最大挑战是状态管理中的数据不可变更新通过查阅官方文档我理解了State的监听机制学会使用不可变数据更新方式这个经验对我后续迭代这个项目非常有帮助。”这就是“有反思的实践”比夸自己学了多少技术更打动人。我个人做完这些项目后的体会是期末作业的核心不是把功能堆得多满而是能不能把你学过的东西真正串起来。校园迎新APP这个题目最好的地方在于它让你把组件化、状态管理、路由跳转、数据持久化、声明式UI这些分散的知识点在一个具体业务场景里全部用了一遍。就算代码不是你一个人从零写的只要你能把这些代码读懂、讲透、再写出自己的报告它就已经是你的东西了。本文还有配套的精品资源点击获取 鸿蒙校园迎新APP开发实战：从代码到答辩的完整指南
简介移动应用开发是当前软件工程领域的核心技能而期末项目往往需要综合运用组件化、状态管理和数据持久化等技术。声明式UI作为现代移动端主流的界面构建方式通过状态驱动渲染能显著提升开发效率。在HarmonyOS生态中ArkTS与ArkUI结合提供了一套完整的声明式开发方案十分适合校园服务类应用的落地。本文以校园迎新APP为例从功能设计、DevEco Studio工程搭建、核心页面实现底部导航、资讯列表、报到流程、地图标注到期末报告撰写与答辩准备系统梳理了完整链路。同时针对高频踩坑点如SDK版本匹配、数据类型约束、Preferences持久化等给出排查建议帮助读者将“能跑”的项目打磨成“能讲、能答辩、能拿高分”的期末作品。 前阵子帮一个学弟把关他的移动应用开发期末大作业正好是一道鸿蒙开发的校园迎新APP题目。他手里已经有了一套源码加一份报告模板但不知道报告怎么写才像样、源码里哪些部分能拿出来当亮点讲。我花了一晚上把他的项目从头到尾捋了一遍顺便把这类期末项目常见的坑、套路和加分项都整理了一下。这篇东西不光是给他一个人的也是给所有选鸿蒙开发方向、正在为移动应用开发期末作业发愁的同学。你可以把它当成一份“如何把校园迎新APP从能跑变成能讲、能答辩、能拿高分”的实操指南。无论你手上是别人给的源码还是自己一行行敲出来的这篇文章都能帮你搞清楚这个项目到底做了什么、每一步为什么这么设计、答辩时老师会盯着哪里问。1. 项目整体设计与思路拆解1.1 选题定位为什么是校园迎新APP先聊选题。移动应用开发的期末作业选题五花八门有做记账本的、有做健身打卡的、有做二手交易平台的为什么校园迎新APP是个“稳”的选择核心原因就一个场景足够具体功能边界清晰。迎新是每所高校每年都会发生的真实业务新生要查入学须知、看报到流程、找宿舍位置、了解社团活动学校要发通知、统计报到情况、引导新生完成各个环节。这套业务天然就是一堆移动端页面的组合非常适合在期末项目里落地。另外这个选题有很强的“汇报优势”。答辩的时候你不需要花五分钟解释你的项目解决了什么虚构的痛点直接说“这是给新生入学用的解决报到流程不清楚、信息分散的问题”老师立刻就懂。场景越真实需求分析越好写代码和报告之间的对应关系也越强。我见过不少同学期末选了个特别宏大的题目比如“基于大数据的校园社交平台”结果代码就写了三个页面报告里需求分析吹了两千字。这种项目一到答辩就被问崩了。相比之下校园迎新APP虽然功能看起来“小”但每个功能都能落地每一步都有据可查这才是期末作业该有的样子。1.2 技术路线鸿蒙开发这一版该怎么选2024年之后移动应用开发课上出现鸿蒙开发的频次越来越高不少学校的期末作业也直接允许甚至鼓励学生用鸿蒙技术栈来做。做这个题目首先要搞清楚一件事鸿蒙开发现在有两条技术路线。一条是ArkTS ArkUI 的声明式开发这是目前官方主推的方向基于TypeScript语法UI通过状态驱动的声明式写法来构建开发工具是DevEco Studio。另一条是兼容Java的传统UI开发官方已经不再主推我不建议期末项目选这条路报备起来容易出问题资料也少。这篇文章默认你用的是ArkTS ArkUI 这条线。选它的理由有三点上手成本对前端/移动方向的同学友好。ArkTS的语法脱胎于TypeScript写过JS/TS的人切过来基本没有心理障碍。UI表达能力强。ArkUI的组件体系和Flutter、SwiftUI的思路很像用状态驱动UI变化写起来比传统的XML布局更符合直觉。免去环境折腾。DevEco Studio自带模拟器和预览器如果你没有华为真机也能完成绝大部分功能调试和录屏需求。校园迎新APP这种以表单、列表、信息展示为主的应用恰好是ArkUI最擅长的场景。这个题目的代码量不会很大但对声明式开发的核心概念状态管理、组件化、路由、数据持久化都能覆盖到期末答辩时每一个概念都可以展开讲。1.3 功能清单与页面流转设计在写任何代码之前先花半小时把功能清单理清楚。我当时帮学弟梳理的是这样一套你可以直接参考首页迎新公告轮播图 快捷入口报到流程、校园地图、宿舍查询、新生指南 最新通知列表报到分步骤展示报到流程每个步骤包含说明文字、状态标识未开始/进行中/已完成、办理地点和所需材料指南常见问题列表支持关键词搜索点进去是详情页校园地图一张静态校园示意图标注图书馆、食堂、宿舍楼、报到点等主要建筑支持点击查看建筑名称和简介我的个人信息展示学号、姓名、学院、我的报到进度、意见反馈入口、关于页面页面流转大概是这样的底部Tab负责四个主页面首页、报到、指南、我的从首页的快捷入口可以跳转到二级页面比如地图页、宿舍查询页指南列表页点进去是详情页我的页面的“我的报到进度”又回到报到页。这个闭环非常关键答辩时老师一定会问“你的页面之间是怎么跳转的”你要能说清楚每一步。2. 开发环境与工程架构准备2.1 DevEco Studio 安装与工程创建工欲善其事必先利其器。做鸿蒙开发DevEco Studio是唯一的IDE选择它目前有Windows和macOS版本下载渠道是华为开发者联盟官网。安装过程没什么特别需要说的但有几个细节值得提醒。一是API版本和SDK的选择。创建工程时DevEco Studio会让你选择兼容的API版本一般选最新的稳定版就好代际差异不影响你这套代码的运行。但是要注意如果你后面要用模拟器模拟器镜像和SDK版本必须匹配否则会提示版本不一致。我们当时就在这一点上卡了半小时最后发现是SDK 12的工程用了SDK 11的模拟器镜像。二是华为账号登录。DevEco Studio的很多能力比如模拟器下载、真机调试授权都依赖华为账号建议安装完成后第一时间登录账号。如果你用的是学校机房电脑注意登录状态可能在重启后失效答辩前一定要提前检查模拟器能不能正常拉起。三是工程模板的选择。新建工程时选择“Empty Ability”模板就够了设备类型选Phone。千万不要为了省事选“Full Screen Ability”或者其他花哨模板里面自带的示例代码会干扰你对工程结构的理解。2.2 ArkTS 与声明式 UI 设计思路如果你之前只写过传统AndroidXML布局 Activity第一次打开ArkTS的页面文件可能会有点懵。它长这样Entry Component struct IndexPage { State message: string Hello HarmonyOS build() { Column() { Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) Button(点击更新) .onClick(() { this.message Welcome to HarmonyOS! }) } .width(100%) .height(100%) } }这就是ArkUI最核心的“声明式UI”写法。它和传统命令式UI最大的区别在于你不需要手动去查找某个控件、调用它的setText方法你只需要维护一个状态变量比如messageUI会自动跟着状态变。State装饰器是实现这种自动更新的关键。被State修饰的变量一旦发生变化所有依赖它的UI组件都会自动刷新。这个机制贯穿整个鸿蒙开发也是期末答辩时老师非常喜欢问的点。你要能用自己的话解释清楚为什么不需要调用类似notifyDataSetChanged()的方法UI就自己更新了。除了State还有几个常用的装饰器Prop接收父组件传值子组件内不能修改改父组件的值子组件会跟着更新。Link双向绑定子组件修改会同步回父组件。Builder自定义构建函数用来复用一段UI结构。Entry标记页面入口一个页面文件只能有一个。期末项目里State用得多Prop和Link一般会在“我的报到进度”和报到页之间的数据传递上用到你要能有意识地在代码里体现“父子组件通信”这个设计而不是把所有页面都写成一个巨大的组件。2.3 工程目录结构和资源管理鸿蒙工程创建完之后目录结构大概是这样的项目名/ ├── entry/ │ ├── src/ │ │ ├── main/ │ │ │ ├── ets/ │ │ │ │ ├── entryability/ │ │ │ │ └── pages/ │ │ │ ├── resources/ │ │ │ │ ├── base/ │ │ │ │ │ ├── element/ │ │ │ │ │ ├── media/ │ │ │ │ │ └── profile/ │ │ │ └── module.json5 │ │ └── ohosTest/ │ ├── build-profile.json5 │ └── hvigorfile.ts ├── build-profile.json5 ├── hvigorfile.ts └── oh-package.json5对期末项目来说你需要重点关注的是ets/pages目录和resources/base目录。ets/pages是放页面文件的地方。我建议一个页面一个文件文件名的首字母大写比如LoginPage.ets、ReportPage.ets、GuidePage.ets。千万别把所有页面堆在一个文件里哪怕代码能跑报告里的“系统架构图”也没法画。resources/base下面有三个常用目录element放字符串、颜色等资源media放图片资源profile放配置文件比如路由表。在代码里引用资源时用$r(app.media.logo)这种格式而不是直接写文件路径。好处是资源统一管理适配不同屏幕密度时不用改代码。3. 核心功能落地从页面到交互3.1 底部导航栏与 Tab 切换实现底部导航栏是校园迎新APP的门面也是我建议你第一个做的功能。做之前先想清楚这个项目的主页面有四个意味着底部导航栏需要有四个Tab图标加文字点击之后切换对应页面同时高亮当前选中的项。一个简洁的做法是使用Tabs组件。ArkUI的Tabs组件自带底部导航栏的能力你不需要自己用Row加Button去模拟。核心代码结构如下Entry Component struct MainPage { State currentIndex: number 0 private controller: TabsController new TabsController() build() { Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { HomePage() } .tabBar(this.tabBuilder(0, 首页, $r(app.media.ic_home))) TabContent() { ReportPage() } .tabBar(this.tabBuilder(1, 报到, $r(app.media.ic_report))) TabContent() { GuidePage() } .tabBar(this.tabBuilder(2, 指南, $r(app.media.ic_guide))) TabContent() { ProfilePage() } .tabBar(this.tabBuilder(3, 我的, $r(app.media.ic_profile))) } .onChange((index) { this.currentIndex index }) } Builder tabBuilder(index: number, title: string, icon: Resource) { Column() { Image(icon) .width(24) .height(24) Text(title) .fontSize(12) } .justifyContent(FlexAlign.Center) } }这里有几个关键点。一是tabBar传入的是一个Builder构建的自定义组件好处是你可以在Tab栏里灵活控制图标大小、文字颜色和间距。二是TabContent里的内容可以是独立的页面组件这意味着你的四个主页面各自维护自己的状态互不干扰。实操中要注意的是当你的某个Tab页面里使用了Scroll列表而TabContent外层也有滑动逻辑时可能会出现手势冲突表现为列表滑动偶尔不跟手。解决办法是把Tabs的scrollable属性设为false禁止左右滑动切换Tab只允许点击Tab栏切换。校园迎新APP完全可以接受这种交互因为四个页面之间没有左右滑动的必要。答辩时可以主动提一句“这里我通过Tabs组件实现底部导航将四个业务模块拆分成独立组件每个组件内部维护自己的业务状态降低模块间的耦合度。”这句话虽然短但是踩中了组件化和状态管理的两个考点。3.2 首页资讯流与卡片列表首页是一个App的脸面迎新APP的首页至少得把一个轮播图和一个资讯列表做出来。轮播图实现很简单ArkUI提供了Swiper组件Swiper() { ForEach(this.bannerList, (item: BannerItem) { Image(item.imageUrl) .width(100%) .height(180) .borderRadius(12) }, (item: BannerItem) item.id) } .autoPlay(true) .interval(4000) .indicator(true) .loop(true)资讯列表用List和ListItem实现。我建议你先定义好资讯的数据结构再通过ForEach渲染列表而不是每行都手写一遍。interface NewsItem { id: string title: string publishTime: string category: string } State newsList: NewsItem[] [ { id: 1, title: 2025级新生入学须知, publishTime: 2025-08-20, category: 通知 }, // 省略几条测试数据 ] build() { List({ space: 12 }) { ForEach(this.newsList, (item: NewsItem) { ListItem() { Row() { Column() { Text(item.title) .fontSize(16) .fontWeight(FontWeight.Medium) Text(item.publishTime) .fontSize(12) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Text(item.category) .fontSize(12) .fontColor(#FF7043) .backgroundColor(#FFF3E6) .borderRadius(4) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) } .padding(12) .backgroundColor(Color.White) .borderRadius(12) } }, (item: NewsItem) item.id) } .width(100%) .layoutWeight(1) }关于ForEach有一个细节需要特别注意第二个参数是item生成函数第三个参数是key生成函数。key必须稳定且唯一一般用item.id。如果不用key当列表数据发生增删时ArkUI的diff算法可能会出错表现为列表项复用错乱。这个问题期末项目里不容易触发因为你的数据大多是静态写死的但报告里写一句“通过唯一key优化列表渲染性能”显得很专业。3.3 报到流程页与表单交互报到流程页是整个项目里业务逻辑最重的一块也是最能体现“你不是在写玩具”的功能点。我的建议是把报到流程设计成五个步骤网上报到、缴纳学费、宿舍分配、领取校园卡、学院报到。每个步骤有四种状态未开始、进行中、已完成、当前步骤。用当前状态渲染不同的图标颜色和操作按钮。数据结构可以这样设计interface ReportStep { id: number title: string description: string location: string requiredMaterials: string status: pending | current | completed } State steps: ReportStep[] [ // 初始化五个步骤的数据 ] State currentStep: number 0 // 点击“下一步” nextStep() { if (this.currentStep this.steps.length - 1) { this.steps[this.currentStep].status completed this.currentStep this.steps[this.currentStep].status current } }页面展示时每个步骤用卡片呈现状态为“已完成”的是绿色打勾图标状态为“进行中”的按钮显示为可点击的“去办理”状态为“未开始”的按钮置灰。通过if/else条件渲染来切换卡片样式。这里有一个考点不可变性。ArkUI在状态管理上推荐“数据不可变”意思是你不要直接修改对象内部的某个属性比如this.steps[0].status completed而是应该整体替换这个对象或者用一个新的数组赋值给steps。原因很简单State的监听机制在检测对象深层属性变化时不可靠。正确做法是this.steps this.steps.map((step, index) { if (index this.currentStep) { return { ...step, status: completed } } return step })这种写法虽然看起来多写了几行但符合状态管理的最佳实践。报告里如果画了一个“状态更新流程示意图”把这个逻辑画清楚答辩时非常有底气。3.4 校园地图与本地数据持久化校园地图这个功能有同学会觉得很难认为要做成可缩放拖动的地图组件。期末作业完全不需要做一张静态图片加点击标注就够了。图片放在resources/base/media下然后使用Image组件加载再用Stack布局把可点击的热区叠加到图片上。比如食堂的位置大约在图片的(200, 350)处就用一个透明Button定位到那里点击后弹出一个Dialog或者bindPopup显示食堂的开放时间、窗口信息和推荐菜品。Stack() { Image($r(app.media.campus_map)) .width(100%) .height(500) Button(食堂) .position({ x: 170, y: 300 }) .width(60) .height(30) .opacity(0.8) .onClick(() { this.showBuildingInfo(食堂) }) } .alignContent(Alignment.TopStart)你可能要问位置怎么确定。最简单的方法先在模拟器里截图用预览工具打开图片鼠标找到目标建筑在图片里的像素坐标再把坐标写进position。这个方法听起来很“笨”但确实是最快、最准的。我当时让学弟在代码里写了三个标注点食堂、图书馆、体育馆每个点的位置都是这么人工标出来的。数据持久化这一块建议用ohos.data.preferences来实现。场景是用户第一次打开报到流程页时数据是模拟的但用户点击“去办理”并完成某个步骤后再次打开App之前的进度应该还在。用Preferences可以做到这一点。import { preferences } from kit.ArkData async function saveCurrentStep(step: number) { const pref await preferences.getPreferences(getContext(), myStore) await pref.put(currentStep, step) await pref.flush() }值得注意的细节是put方法之后必须调用flush数据才会真正落盘。这个属于文档里写了但新手很容易漏的坑期末报告中可以当成你的“踩坑记录”来写。4. 期末报告撰写与答辩准备4.1 报告的整体结构说句实在话期末报告的质量往往比代码本身更能决定分数。代码是给机器看的报告是给老师看的。老师没时间把你的代码从头到尾读一遍但一定会读报告。一份结构完整的报告至少需要包含这些章节封面按学校模板来摘要 关键词项目背景与需求分析系统设计架构图 功能模块图 数据库/数据持久化设计核心功能实现配上关键代码和截图系统测试测试用例表 测试结果项目总结与心得如果你用的是别人给的源码报告更要多花心思。老师也许早就看过那些网传的源码了甚至可能见过一模一样的三份报告。所以报告一定要自己写尤其是“项目总结与心得”部分写你在做这个项目的过程中最真实的困惑和收获这段是抄不了的。4.2 需求分析与系统设计部分的写法需求分析这块不建议写空洞的“随着移动互联网的发展”式的废话。直接进入主题这个App是给谁用的解决什么问题核心用户有哪些核心诉求。你可以用表格列出用户需求与对应功能比如用户需求对应功能优先级新生想快速了解入学流程报到流程步骤化展示高新生需要知道食堂、宿舍位置校园地图标注关键建筑高新生对校园生活有疑问常见问题指南及搜索中学校需要推送通知首页公告轮播与通知列表中新生个人报到进度需要保存本地持久化存储进度低系统设计部分一定要画至少一张架构图。不用画得多专业但层次要清楚。分三层展示层页面组件、逻辑层状态管理、路由、数据层本地数据、Preferences。这里不建议用Mermaid直接用PPT画或者手画截图都行。4.3 测试用例、截图与教程视频素材测试部分如果写得专业很容易让老师产生“这个学生态度很认真”的好感。不需要真正使用自动化测试框架手工测试用例就够用了。关键是格式要标准。每一条测试用例包含用例编号、测试模块、测试步骤、预期结果、实际结果、是否通过。比如TC-001 首页轮播图播放打开App进入首页观察轮播图。预期结果轮播图每4秒自动切换一张底部有指示器。实际结果与预期一致。通过。测试用例至少写8到10条覆盖所有主页面和核心交互。另外建议录制一个两分钟的演示视频从App启动开始依次展示首页、报到流程、指南搜索、地图标注、我的页面最后重启App展示报到进度被持久化保存。这个视频在答辩时直接放比现场演示稳定得多——现场演示可能因为网络、模拟器、电脑不配合而出各种幺蛾子。截图不要截得太随意。每张截图最好配一行说明“图4-1 首页轮播图效果”。在DevEco Studio里可以用模拟器的截图按钮也可以在预览器里截图。如果图片上有个人信息或者学院信息记得打码。5. 高频踩坑与调试排查记录5.1 模拟器和预览器的常见问题期末做鸿蒙项目大部分同学都会用到Previewer预览器而不是模拟器。预览器启动快适合单页面的UI调试但它有几个缺点有些系统能力不支持、路由跳转有时不生效、部分组件的动画效果显示不正确。我的建议是UI样式调整用预览器功能联调用模拟器。如果你发现某个页面在预览器里显示正常但模拟器里布局乱了先别急着改代码检查一下两边的屏幕尺寸设置是否一致。默认的Pixel设备分辨率比较低如果你按一个中尺寸手机去写布局在模拟器上确实可能出现遮挡。还有一个高频问题模拟器启动后一直卡在“Loading”界面。多半是SDK版本不匹配或者本地虚拟化没开。DevEco Studio的模拟器需要电脑开启虚拟化技术如果是Windows系统要在BIOS里打开Intel VT-x或者AMD-V。很多机房电脑是默认关闭的。去控制面板里“启用或关闭Windows功能”里确认“Windows Hypervisor Platform”这一项是勾选的如果没勾勾选后重启电脑。5.2 ArkTS语法细节与JSON数据解析ArkTS和TypeScript整体相似但有些限制需要特别注意这些限制期末前踩一次能记一辈子。首先是any类型是被禁止的。ArkTS在编译阶段不允许显式使用any和unknown所有变量必须有明确的类型。你写代码时如果从某个JSON接口动态拿到数据不要写let data: any ...要定义一个接口类型然后做类型断言。其次是对象字面量必须符合类的结构。ArkTS不允许你随意let obj {name: 张三, age: 18}然后到处传递推荐的做法是定义一个class或者interface来约束对象的结构。以迎新资讯为例interface NewsItem { id: string title: string publishTime: string category: string } let item: NewsItem { id: 1, title: 新生入学须知, publishTime: 2025-08-20, category: 通知 }另外如果你打算从网上下载JSON数据并解析不能直接用JSON.parse然后拿返回结果当对象用。需要先定义好类型再把parse返回的结果通过as做类型断言。这是期末项目里很常见的一个报错点提前知道能省下不少时间。5.3 真机同步与项目答辩前的检查清单如果你有华为手机可以试试真机调测体验会比模拟器好很多。步骤不复杂手机打开开发者模式连接电脑后在DevEco Studio里选择真机运行。需要注意鸿蒙手机上需要开启USB调试同时对“允许模拟位置”等权限进行授权。但期末答辩现场不建议依赖真机主要原因是你不知道现场会是什么系统、什么接口万一手机连不上就非常被动。演示视频 模拟器双保险是最稳的。答辩前一天的检查清单分享给你每一条都是过来人的教训项目能不能在DevEco Studio里直接打开并编译通过把工程从压缩包解压出来放到一个没有中文路径的目录下再测一次。模拟器能不能正常启动启动后App能不能正常安装运行如果模拟器有问题是不是已经录好了完整的演示视频视频里是否覆盖了所有核心功能报告中引用的代码和实际代码是否一致老师可能会对着一份代码提问如果报告里写的是A方案代码里却是B方案会很尴尬。关键术语是否理解比如State的作用、ForEach的key机制、Preferences的flush方法这些你在报告里写了就一定要能口头解释。6. 三个能帮你拿高分的加分项如果你时间还有富余在完成基本功能后可以从下面三个方向里挑一个做深一点效果比堆一堆花哨页面好得多。第一个是搜索功能的本地实现。指南页目前大部分实现都是静态列表如果加一个搜索框对列表数据进行实时过滤展示匹配的条目整个项目的交互感会明显提升。用ArkTS写起来也就二三十行核心是State里维护一个keyword变量然后通过filter生成新的展示列表再交给ForEach渲染。第二个是深色模式适配。鸿蒙应用在系统切换深色模式时未做适配套路的应用会直接变黑底白字丑得很难看。如果你在resources目录下创建dark子目录放一套适配深色背景的颜色资源然后在项目里通过$r加载颜色值就能自动适配。这个细节老师一眼就能注意到因为大多数同学的App是一副“深色模式全瞎”的状态。第三个是一句话总结。做项目总结时不要只写“通过这次开发我掌握了鸿蒙开发技术。”至少加一句有信息量的话比如“我在开发过程中遇到的最大挑战是状态管理中的数据不可变更新通过查阅官方文档我理解了State的监听机制学会使用不可变数据更新方式这个经验对我后续迭代这个项目非常有帮助。”这就是“有反思的实践”比夸自己学了多少技术更打动人。我个人做完这些项目后的体会是期末作业的核心不是把功能堆得多满而是能不能把你学过的东西真正串起来。校园迎新APP这个题目最好的地方在于它让你把组件化、状态管理、路由跳转、数据持久化、声明式UI这些分散的知识点在一个具体业务场景里全部用了一遍。就算代码不是你一个人从零写的只要你能把这些代码读懂、讲透、再写出自己的报告它就已经是你的东西了。本文还有配套的精品资源点击获取