又到了一年一度的毕业设计选题季打开选题表格一看满屏都是“图书管理系统”“网上商城”“学生选课系统”这些老面孔。好不容易看到一个稍微有点意思的方向结果隔壁室友提交了相同的选题导师那边直接打回重改。如果你也正在经历选题撞车的尴尬不妨把目光转向一个兼具热点和落地空间的组合方案基于鸿蒙系统的小红书风格 APP。这个项目并不只是换了个 UI 皮而是完整覆盖了“鸿蒙原生应用开发 ArkTS 语言实战 社交笔记内容流 电商购物闭环 Web 管理后台 前后端接口联调”这几大模块。无论你是计算机专业的本科毕设还是想积累一份能写进简历的鸿蒙应用项目经历这套方案的可操作性和完成度都比较高。接下来我会从环境搭建、页面实现、权限申请、网络请求、后台接口设计一直讲到联调排错带你把整个项目串起来。1. 项目定位为什么“鸿蒙 小红书”值得做1.1 鸿蒙原生开发正处于红利期过去几年移动端毕设的主角基本被 Android 和微信小程序承包。但从技术热度和就业市场的关注度来看鸿蒙原生开发已经成为不可忽视的增量方向。越来越多的应用开始针对鸿蒙系统做原生适配企业招聘中“鸿蒙开发工程师”的岗位也明显增多。对于在校学生来说选择一个处于上升期的技术方向作为毕设主题答辩时的说服力和后续求职的延展性都会更强。这里说的“鸿蒙系统”通常指 HarmonyOS。开发时使用 ArkTS 语言和 ArkUI 声明式框架通过 DevEco Studio 完成工程的创建、编译、调试和打包。和传统的 Android 开发相比ArkTS 的语法更接近 TypeScript前端同学上手快ArkUI 的声明式 UI 写法和 SwiftUI、Flutter 也比较相似学习路径并不陡峭。1.2 社交笔记 电商商城一个项目覆盖两种核心场景“小红书风格”的本质是一个内容社区用户浏览笔记、发布笔记、点赞收藏、关注作者。这套逻辑本身就是一个典型的移动端应用场景涉及列表渲染、图片加载、页面路由、状态管理、本地缓存几乎把 App 开发的高频知识点全部覆盖了。在这个基础上再叠加电商模块就能把业务闭环补完整笔记种草、商品推荐、加入购物车、提交订单、后台管理商品和订单。从毕设评分角度来看这种“内容 交易”的组合比单纯做一个商城或者单纯做一个笔记应用功能密度高出一个档次。答辩时老师问到“你的项目解决了什么问题”你可以从内容分发和商业转化两个维度展开思路非常清晰。1.3 ArkTS 原生开发与跨端方案的差别有些同学会想既然已经有 Flutter、uni-app 这类跨端框架为什么还要用 ArkTS 写原生原因是鸿蒙生态正在快速完善系统级 API 和硬件能力的调用原生方案始终是最直接的。比如申请相机权限、读写本地文件、使用系统分享面板、调用扫码能力跨端框架往往需要依赖插件桥接而 ArkTS 原生开发可以直接调用系统权限管理模块。对于毕设项目你不一定要把“原生”作为宣传噱头但用原生方式写一遍确实能帮你理解移动端开发的底层机制面试被问到项目细节时也能讲得更扎实。2. 项目整体架构与功能模块拆分在动手写代码之前先把整个系统的架构想清楚。这里我把它拆成三个端鸿蒙 App 端、Web 后台管理端、后端服务端。2.1 功能模块总览从用户视角出发可以把鸿蒙 App 端的功能划分为以下几个模块模块子功能关键技术点用户模块登录、注册、个人信息、关注列表Token 鉴权、本地持久化笔记模块笔记瀑布流、笔记详情、发布笔记、点赞收藏、评论列表懒加载、图片加载、富文本展示商城模块商品列表、商品详情、购物车、订单确认、支付模拟数据绑定、订单状态流转搜索模块笔记搜索、商品搜索、历史记录关键字匹配、本地存储消息模块点赞通知、评论通知、系统通知消息列表、未读计数Web 后台管理端则面向运营人员功能包括用户管理查看用户列表、禁用账号、重置密码。笔记管理审核笔记内容、下架违规笔记。商品管理新增商品、编辑商品、上架/下架、设置库存。订单管理查看订单列表、发货、退款处理。数据统计笔记发布量、订单成交量、用户增长趋势。后端服务端负责提供接口最常见的方案是 Java Spring Boot 或者 Node.js我推荐用 Spring Boot原因很简单资料多、生态成熟、MySQL MyBatis 的组合大家都熟悉答辩时讲数据表设计也方便。2.2 技术栈选型这里给出一个相对稳妥的选型组合具体版本以你本机环境为准端技术说明移动端HarmonyOS ArkTS ArkUI使用 DevEco Studio 开发后端Java Spring Boot提供 RESTful 接口数据库MySQL存储用户、笔记、商品、订单数据ORMMyBatis-Plus简化单表 CRUD管理后台Vue 3 Element Plus可选也可以直接用简单页面接口调试Apifox / Postman联调阶段使用如果你对 Vue 不熟Web 后台也可以用原生 HTML JavaScript 来实现虽然界面不那么精致但足以完成管理功能。核心精力还是放在鸿蒙 App 端。2.3 鸿蒙 App 端页面结构在 DevEco Studio 中一个鸿蒙应用工程通常包含多个 module主模块是entry。页面可以按下面这种方式组织entry/src/main/ets/ ├── entryability/ │ └── EntryAbility.ets // 应用入口 Ability ├── pages/ │ ├── Index.ets // 首页 Tab 容器 │ ├── NoteListPage.ets // 笔记瀑布流 │ ├── NoteDetailPage.ets // 笔记详情 │ ├── NotePublishPage.ets // 发布笔记 │ ├── ProductListPage.ets // 商品列表 │ ├── CartPage.ets // 购物车 │ ├── OrderConfirmPage.ets // 订单确认 │ ├── LoginPage.ets // 登录 │ └── MinePage.ets // 个人中心 ├── components/ │ ├── NoteCard.ets // 笔记卡片组件 │ ├── ProductCard.ets // 商品卡片组件 │ └── LoadingView.ets // 加载状态组件 ├── api/ │ ├── HttpUtil.ets // 网络请求封装 │ └── ApiConstants.ets // 接口地址常量 ├── model/ │ ├── Note.ets // 笔记数据模型 │ ├── Product.ets // 商品数据模型 │ └── User.ets // 用户数据模型 └── utils/ ├── AuthManager.ets // 登录态管理 └── PermissionUtil.ets // 权限申请工具这样划分的好处是职责清晰页面只负责 UI 渲染和用户交互网络请求统一走api包数据模型统一放在model包后续如果换接口地址只需要改ApiConstants.ets。3. 环境准备与工程创建3.1 开发工具与运行环境开发鸿蒙应用首选官方 IDEDevEco Studio。当前主流版本都已经支持 HarmonyOS 工程的创建、模拟器运行和真机调试。需要提前准备的软件环境如下DevEco Studio。HarmonyOS SDK建议根据 IDE 的提示完成安装。Node.js 环境部分工程构建流程会使用。可选HarmonyOS 模拟器或真机设备。需要特别说明的是不同版本的 DevEco Studio 对应的工程模板和 API 等级有差异。本文示例围绕常见的 Stage 模型编写如果你的 IDE 版本比较新创建工程时默认就是 Stage 模型代码结构基本一致。3.2 创建 HarmonyOS 工程的具体步骤打开 DevEco Studio按以下步骤创建工程点击 “Create Project”。选择 “Application” - “Empty Ability” 模板。填写项目名称例如HarmonyLittleRedBook。选择设备类型Phone。确认后会生成一个标准工程结构。生成后可以在entry/src/main/module.json5中查看应用配置。这个文件相当于鸿蒙版本的AndroidManifest.xml应用包名、权限声明、Ability 注册都在这里配置。3.3 工程目录结构解析创建完成后的核心文件如下文件作用entry/src/main/module.json5模块配置和应用权限声明entry/src/main/ets/entryability/EntryAbility.etsAbility 生命周期入口entry/src/main/ets/pages/Index.ets首页页面entry/src/main/resources/base/profile/main_pages.json页面路由配置build-profile.json5模块构建配置oh-package.json5依赖管理配置这里要特别注意main_pages.json。鸿蒙应用的路由跳转依赖于页面注册每新增一个页面都要在这个文件里添加对应的页面路径否则调用router.pushUrl时会报页面不存在。{ src: [ pages/Index, pages/NoteListPage, pages/NoteDetailPage, pages/NotePublishPage, pages/ProductListPage, pages/CartPage, pages/OrderConfirmPage, pages/LoginPage, pages/MinePage ] }4. ArkTS 核心语法与关键机制讲解4.1 ArkTS 和 TypeScript 的关系ArkTS 是鸿蒙生态的应用开发语言它在 TypeScript 的基础上增加了声明式 UI 的状态管理、并发编程等能力同时约束了一些动态特性让代码更适合静态分析和性能优化。如果你已经会 TypeScript上手 ArkTS 几乎没有障碍。主要的写法差异体现在组件结构上// 文件路径entry/src/main/ets/pages/DemoPage.ets Entry Component struct DemoPage { State message: string Hello HarmonyOS; build() { Column({ space: 20 }) { Text(this.message) .fontSize(24) .fontWeight(FontWeight.Bold) Button(点击修改) .onClick(() { this.message 你已经点击了按钮; }) } .width(100%) .padding(16) } }这里有几个关键概念Entry标记当前组件是页面的入口组件一个页面只能有一个。Component声明这是一个自定义组件。State装饰状态变量当变量值变化时ArkUI 会自动刷新绑定了该变量的组件。build()声明式描述 UI 结构的地方。这种写法和 Flutter 的 Widget、SwiftUI 的 View 属于同一套思维模型界面是状态的函数状态变化驱动界面刷新。4.2 状态管理的常用装饰器实际开发中只靠State是不够的页面之间经常需要传递数据。ArkUI 提供了多级状态管理装饰器装饰器用途State组件内部状态变化触发 UI 刷新Prop从父组件传入的子组件属性单向同步Link父子组件双向同步Provide/Consume跨层级组件共享数据Observed/ObjectLink观察对象内部属性变化StorageLink/StorageProp与本地持久化存储绑定举个例子首页的 Tab 容器需要维护当前选中的 Tab 索引子组件需要根据索引切换内容这时用Link就比较合适// 文件路径entry/src/main/ets/components/TabContent.ets Component export struct TabContent { Link currentIndex: number; tabId: number 0; build() { Column() { Text(当前 Tab this.currentIndex) .fontSize(18) if (this.currentIndex this.tabId) { Text(显示当前 Tab 的内容) } } .padding(16) } }4.3 页面路由跳转在 HarmonyOS 中最常见的页面跳转方式是使用router模块。以下代码演示了如何从首页跳转到登录页并传递参数import { router } from kit.ArkUI; router.pushUrl({ url: pages/LoginPage, params: { loginType: phone } }).then(() { console.info(跳转成功); }).catch((err: Error) { console.error(跳转失败: JSON.stringify(err)); });目标页面通过router.getParams()接收参数import { router } from kit.ArkUI; Entry Component struct LoginPage { State loginType: string ; aboutToAppear() { const params router.getParams() as Recordstring, string; if (params) { this.loginType params[loginType] ?? ; } } }4.4 ArkTS 权限申请流程鸿蒙系统对用户隐私保护非常严格。如果你的 App 需要访问相机、相册、定位等敏感信息必须在module.json5中先声明权限再在代码中动态申请。这里以申请相机权限为例。首先在module.json5中加入权限声明{ module: { requestPermissions: [ { name: ohos.permission.CAMERA, reason: 需要使用相机拍摄笔记配图, usedScene: { abilities: [EntryAbility] } } ] } }然后在代码中调用权限管理模块// 文件路径entry/src/main/ets/utils/PermissionUtil.ets import abilityAccessCtrl, { Permissions } from ohos.abilityAccessCtrl; import { bundleManager } from kit.AbilityKit; import { common } from kit.AbilityKit; export async function requestPermission( context: common.UIAbilityContext, permissions: Permissions[] ): Promiseboolean { const atManager abilityAccessCtrl.createAtManager(); // 获取当前应用的 token ID const bundleInfo await bundleManager.getBundleInfoForSelf( bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION ); const tokenID bundleInfo.appInfo.accessTokenId; // 遍历检查权限是否已授予 for (let i 0; i permissions.length; i) { const grantStatus atManager.checkAccessToken(tokenID, permissions[i]); if (grantStatus abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) { continue; } // 向用户发起授权弹窗 const result await atManager.requestPermissionsFromUser(context, permissions); if (result.authResults[i] ! 0) { return false; } } return true; }这里的代码思路是通用的先检查权限没有授权就去申请凡是用户拒绝的就认为不通过。执行这段代码时如果权限弹窗没有出现先确认module.json5里的权限名称是否拼写正确其次确认当前使用的 API 版本是否支持动态申请。5. 核心功能实战从笔记流到订单闭环接下来实现项目中最有代表性的几个功能页面。考虑到代码篇幅我会保留完整业务逻辑框架你可以直接对照着往里填业务细节。5.1 首页 Tab 容器整个 App 采用底部 Tab 导航首页、商城、发布、消息、我的。这里用Tabs组件实现比较方便// 文件路径entry/src/main/ets/pages/Index.ets import { NoteListPage } from ./NoteListPage; import { ProductListPage } from ./ProductListPage; import { MinePage } from ./MinePage; Entry Component struct Index { State currentTab: number 0; Builder tabBuilder(title: string) { Column({ space: 4 }) { Text(title) .fontSize(14) .fontColor(this.currentTab 0 ? #FF2442 : #666666) } .width(100%) .height(50) } build() { Tabs({ barPosition: BarPosition.End }) { TabContent() { NoteListPage() } .tabBar(this.tabBuilder(首页)) TabContent() { ProductListPage() } .tabBar(this.tabBuilder(商城)) TabContent() { Column() { Text(发布页占位) } } .tabBar(this.tabBuilder(发布)) TabContent() { Column() { Text(消息页占位) } } .tabBar(this.tabBuilder(消息)) TabContent() { MinePage() } .tabBar(this.tabBuilder(我的)) } .scrollable(false) .onChange((index: number) { this.currentTab index; }) } }要注意的是上面代码中.tabBar()里传入的是一个自定义Builder函数这样可以定制 Tab 的样式。如果你用的是 API 12 以上版本还可以使用TabContent的tabBar属性直接配置字符串或组件根据实际 SDK 调整写法。5.2 首页瀑布流笔记列表瀑布流是小红书类应用最核心的交互形态。在 ArkUI 中可以使用WaterFlow组件实现它和List的用法类似但支持多列高度不一致的布局。// 文件路径entry/src/main/ets/pages/NoteListPage.ets import { NoteCard } from ../components/NoteCard; import { HttpUtil } from ../api/HttpUtil; import { ApiConstants } from ../api/ApiConstants; import { Note } from ../model/Note; Component export struct NoteListPage { State noteList: Note[] []; State page: number 1; State loading: boolean false; aboutToAppear() { this.loadNotes(); } async loadNotes() { if (this.loading) { return; } this.loading true; const data await HttpUtil.getNote[]( ${ApiConstants.BASE_URL}/api/note/page?page${this.page}size10 ); this.noteList this.noteList.concat(data); this.page; this.loading false; } build() { Column() { WaterFlow() { ForEach(this.noteList, (item: Note) { FlowItem() { NoteCard({ note: item }) } }, (item: Note) item.id) } .columnsTemplate(1fr 1fr) .onReachEnd(() { this.loadNotes(); }) } .width(100%) .height(100%) } }FlowItem就是瀑布流中的单个条目里面可以放图片和文字。为了性能考虑图片组件建议使用Image组的objectFit属性并设置合适的占位背景色避免图片加载时出现大面积白屏。5.3 笔记卡片组件为了让笔记列表代码可维护把单个笔记卡片抽成子组件// 文件路径entry/src/main/ets/components/NoteCard.ets import { Note } from ../model/Note; import { router } from kit.ArkUI; Component export struct NoteCard { Prop note: Note; build() { Column({ space: 6 }) { Image(this.note.cover) .width(100%) .aspectRatio(0.8) .borderRadius(12) Text(this.note.title) .fontSize(14) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 8 }) { Text(this.note.author) .fontSize(12) .fontColor(#999999) Blank() Text(♥ this.note.likeCount) .fontSize(12) .fontColor(#FF2442) } } .padding(8) .backgroundColor(#FFFFFF) .borderRadius(12) .onClick(() { router.pushUrl({ url: pages/NoteDetailPage, params: { noteId: this.note.id } }); }) } }5.4 发布笔记页面发布笔记涉及文本输入和权限申请。核心逻辑分三步判断是否有相册权限、选择图片、把内容提交到后端。// 文件路径entry/src/main/ets/pages/NotePublishPage.ets import { promptAction } from kit.ArkUI; import { requestPermission } from ../utils/PermissionUtil; import { HttpUtil } from ../api/HttpUtil; import { common } from kit.AbilityKit; Entry Component struct NotePublishPage { State title: string ; State content: string ; State coverUrl: string ; async publishNote() { if (this.title.trim().length 0) { promptAction.showToast({ message: 请填写笔记标题 }); return; } const context getContext(this) as common.UIAbilityContext; const granted await requestPermission(context, [ohos.permission.READ_IMAGEVIDEO]); if (!granted) { promptAction.showToast({ message: 需要相册权限才能发布笔记 }); return; } const body { title: this.title, content: this.content, cover: this.coverUrl }; const result await HttpUtil.post(/api/note/publish, JSON.stringify(body)); promptAction.showToast({ message: 发布成功 }); } build() { Column({ space: 16 }) { TextInput({ placeholder: 填写标题, text: this.title }) .onChange((value: string) { this.title value; }) TextArea({ placeholder: 分享你的生活瞬间, text: this.content }) .height(200) .onChange((value: string) { this.content value; }) Button(发布笔记) .width(100%) .onClick(() { this.publishNote(); }) } .padding(16) .backgroundColor(#F5F5F5) } }5.5 商城列表与购物车商城模块和笔记模块在写法上没有本质区别只是数据字段不同。商品列表用一个List横向排列或者普通List竖向排列都可以。购物车需要处理一个典型的“选择状态”问题。建议在CartItem模型中增加一个checked: boolean字段// 文件路径entry/src/main/ets/model/CartItem.ets export class CartItem { id: number 0; productId: number 0; productName: string ; price: number 0; count: number 1; checked: boolean false; constructor(productId?: number, productName?: string, price?: number) { if (productId) this.productId productId; if (productName) this.productName productName; if (price) this.price price; } }计算总价时只需要遍历购物车列表并判断checked属性getTotalPrice(): number { let total 0; this.cartList.forEach((item: CartItem) { if (item.checked) { total item.price * item.count; } }); return total; }5.6 网络请求封装把所有网络请求统一封装可以避免每个页面都写一堆重复代码。这里用ohos.net.http实现一个简单的 GET、POST 封装// 文件路径entry/src/main/ets/api/HttpUtil.ets import http from ohos.net.http; import { promptAction } from kit.ArkUI; export class HttpUtil { static async requestT( url: string, method: http.RequestMethod, body?: string ): PromiseT { const httpRequest http.createHttp(); const response await httpRequest.request(url, { method: method, header: { Content-Type: application/json, Authorization: this.getToken() }, extraData: body, connectTimeout: 10000, readTimeout: 15000 }); httpRequest.destroy(); if (response.responseCode 200) { return JSON.parse(response.result as string) as T; } else if (response.responseCode 401) { promptAction.showToast({ message: 登录已过期请重新登录 }); throw new Error(Unauthorized); } else { throw new Error(HTTP ${response.responseCode}); } } static getT(url: string): PromiseT { return this.requestT(url, http.RequestMethod.GET); } static postT(url: string, body: string): PromiseT { return this.requestT(url, http.RequestMethod.POST, body); } static getToken(): string { return Bearer (localStorage.getItem(token) ?? ); } }注意上面的登录态用localStorage保存实际操作中更规范的方式是用ohos.data.preferences实现持久化或者使用PersistentStorage。你可以在封装层替换为你的实现。6. 数据模型与后端接口设计6.1 核心数据表设计后端数据库使用 MySQL至少要建以下这几张表表名字段说明userid, username, password, nickname, avatar, status, create_time用户表noteid, user_id, title, content, cover, like_count, comment_count, status, create_time笔记表note_likeid, user_id, note_id, create_time笔记点赞记录note_commentid, user_id, note_id, content, create_time评论表productid, title, cover, price, stock, sales, status, create_time商品表cart_itemid, user_id, product_id, count, checked, create_time购物车表orderid, order_no, user_id, total_price, status, create_time订单表order_itemid, order_id, product_id, product_name, price, count订单明细表这里要注意密码不要明文存储建议使用 BCrypt 加密点赞记录表要加user_id和note_id的唯一索引避免重复点赞。6.2 Spring Boot 后端接口示例假设你已经创建了一个 Spring Boot 工程并引入了spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java等依赖。用一个简单的商品列表接口演示// 文件路径src/main/java/com/harmony/app/controller/ProductController.java RestController RequestMapping(/api/product) public class ProductController { Resource private IProductService productService; GetMapping(/list) public RIPageProduct list( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageProduct pageParam new Page(page, size); IPageProduct result productService.page(pageParam); return R.ok(result); } }在统一返回类R中建议包含code、message、data三个字段。前端通过code判断接口是否成功而不是只看 HTTP 状态码。这样可以统一异常处理避免前端解析不一致。6.3 笔记发布接口发布笔记的逻辑包括校验登录态、组装笔记实体、插入数据库。为了完整展示业务逻辑我给出 Service 层代码// 文件路径src/main/java/com/harmony/app/service/impl/NoteServiceImpl.java Override Transactional(rollbackFor Exception.class) public boolean publish(NotePublishRequest request, Long userId) { if (StringUtils.isBlank(request.getTitle())) { throw new BusinessException(标题不能为空); } Note note new Note(); note.setUserId(userId); note.setTitle(request.getTitle()); note.setContent(request.getContent()); note.setCover(request.getCover()); note.setStatus(1); note.setLikeCount(0); note.setCommentCount(0); note.setCreateTime(LocalDateTime.now()); return save(note); }所有写操作都建议加上Transactional保证数据一致性。尤其是在生成订单时扣减库存和写入订单明细必须处于同一个事务。7. 常见问题与排查思路7.1 ArkTS 权限申请失败问题现象可能原因解决思路弹窗不出现权限名称拼写错误检查requestPermissions是否与官方文档一致授权成功后功能仍不可用未在业务代码中再次检查授权结果授权成功后再调用系统能力真机安装后崩溃缺少reason字段动态申请权限必须在module.json5声明reason和usedScene7.2 网络请求失败或连不上后台开发鸿蒙 App 时最常见的问题是模拟器或真机访问不到本机后端接口。这里要注意模拟器里访问电脑本机的localhost并不一定等同于你电脑的localhost。Windows 或 macOS 环境下后端服务通常监听在8080端口App 端请求地址应该填写电脑在局域网中的 IP例如http://192.168.1.100:8080而不是http://localhost:8080。另外HarmonyOS 应用默认不允许 HTTP 明文请求。如果后端是本地http接口需要配置网络安全策略或者在开发阶段允许明文流量。具体配置方式根据 SDK 版本有所不同建议查阅当前版本的官方文档。7.3 编译报错符号找不到或 API 版本不支持不同版本的 HarmonyOS API 中某些组件属性和方法有差异。例如WaterFlow的columnsTemplate方法在部分版本中写法不同。遇到这类报错优先查看当前 SDK 的 API 文档或者将工程 SDK 版本调整到示例代码对应的 API 版本。最稳妥的办法是先创建官方模板的WaterFlow示例确认能编译通过后再改造成自己的业务代码。8. 最佳实践与工程化建议8.1 分层架构尽量清晰鸿蒙端代码至少分成四层页面层、组件层、数据层、工具层。页面层只负责交互和状态管理不直接写网络代码网络请求封装在api包中数据模型统一放在model包。这样后续维护代码、排查问题会轻松很多。8.2 数据安全与隐私合规涉及用户登录、支付模拟等场景时需要特别注意安全边界用户密码不能明文传输生产环境必须使用 HTTPS。Token 不要长时间保存在本地建议设置合理过期时间。管理后台的所有删除、下架操作都要做管理员权限校验。不要使用真实支付渠道毕设项目使用模拟支付即可。8.3 性能优化思路瀑布流面临的最大问题是图片加载。列表图片建议使用压缩后的图片地址并设置Image的占位图和alt属性。另外ForEach渲染长列表时需要为每一项提供唯一 key避免组件复用混乱。8.4 毕设答辩常见问题预判老师大概率会问这几个问题为什么选鸿蒙而不用 Android可以从生态趋势和原生开发价值回答。笔记列表的加载性能如何优化可以从图片懒加载、分页加载、缓存策略回答。这个项目的难点是什么可以说权限管理的动态申请、瀑布流失真的复用、前后端联调排错。你的项目有哪些可以继续优化的方向比如推荐算法、消息推送、视频笔记。提前把这些问题想明白答辩时表达会更流畅。9. 总结与后续学习路线一个“鸿蒙 小红书”项目表面上是一个 App 开发教程实际上串联了 ArkTS 语法、ArkUI 声明式组件、状态管理、权限申请、网络请求、前后端接口设计、数据库表结构设计、管理后台开发等多项技能。把这套项目完整走通之后你对鸿蒙原生开发的整个链路会有一个系统性的认识。如果接下来还想深入可以按下面的路线继续学习学习鸿蒙的元服务开发尝试做一个桌面卡片或服务卡片。深入学习状态管理尤其是Observed、ObjectLink在多层级组件中的应用。使用ohos.data.relationalStore做本地数据库把笔记缓存到本地。接入鸿蒙的推送服务实现点赞、评论等消息通知。把管理后台从 Vue 换成更轻量的方案或者直接对接鸿蒙端的其他场景。项目源码的整理方式建议按照“前端 App 后端接口 数据库脚本 管理后台”四部分归档同时写一份 README 说明启动步骤和测试账号。这样不管是自己答辩还是给同学讲解都能快速还原项目环境。动手写代码的过程一定会遇到不少编译错误和联调问题但这恰恰是收获最大的部分。先把第一个页面跑起来再逐步补齐笔记、商品、购物车和后台接口整个项目就会一步步成型。 鸿蒙原生开发实战：用ArkTS打造小红书风格APP的完整方案
又到了一年一度的毕业设计选题季打开选题表格一看满屏都是“图书管理系统”“网上商城”“学生选课系统”这些老面孔。好不容易看到一个稍微有点意思的方向结果隔壁室友提交了相同的选题导师那边直接打回重改。如果你也正在经历选题撞车的尴尬不妨把目光转向一个兼具热点和落地空间的组合方案基于鸿蒙系统的小红书风格 APP。这个项目并不只是换了个 UI 皮而是完整覆盖了“鸿蒙原生应用开发 ArkTS 语言实战 社交笔记内容流 电商购物闭环 Web 管理后台 前后端接口联调”这几大模块。无论你是计算机专业的本科毕设还是想积累一份能写进简历的鸿蒙应用项目经历这套方案的可操作性和完成度都比较高。接下来我会从环境搭建、页面实现、权限申请、网络请求、后台接口设计一直讲到联调排错带你把整个项目串起来。1. 项目定位为什么“鸿蒙 小红书”值得做1.1 鸿蒙原生开发正处于红利期过去几年移动端毕设的主角基本被 Android 和微信小程序承包。但从技术热度和就业市场的关注度来看鸿蒙原生开发已经成为不可忽视的增量方向。越来越多的应用开始针对鸿蒙系统做原生适配企业招聘中“鸿蒙开发工程师”的岗位也明显增多。对于在校学生来说选择一个处于上升期的技术方向作为毕设主题答辩时的说服力和后续求职的延展性都会更强。这里说的“鸿蒙系统”通常指 HarmonyOS。开发时使用 ArkTS 语言和 ArkUI 声明式框架通过 DevEco Studio 完成工程的创建、编译、调试和打包。和传统的 Android 开发相比ArkTS 的语法更接近 TypeScript前端同学上手快ArkUI 的声明式 UI 写法和 SwiftUI、Flutter 也比较相似学习路径并不陡峭。1.2 社交笔记 电商商城一个项目覆盖两种核心场景“小红书风格”的本质是一个内容社区用户浏览笔记、发布笔记、点赞收藏、关注作者。这套逻辑本身就是一个典型的移动端应用场景涉及列表渲染、图片加载、页面路由、状态管理、本地缓存几乎把 App 开发的高频知识点全部覆盖了。在这个基础上再叠加电商模块就能把业务闭环补完整笔记种草、商品推荐、加入购物车、提交订单、后台管理商品和订单。从毕设评分角度来看这种“内容 交易”的组合比单纯做一个商城或者单纯做一个笔记应用功能密度高出一个档次。答辩时老师问到“你的项目解决了什么问题”你可以从内容分发和商业转化两个维度展开思路非常清晰。1.3 ArkTS 原生开发与跨端方案的差别有些同学会想既然已经有 Flutter、uni-app 这类跨端框架为什么还要用 ArkTS 写原生原因是鸿蒙生态正在快速完善系统级 API 和硬件能力的调用原生方案始终是最直接的。比如申请相机权限、读写本地文件、使用系统分享面板、调用扫码能力跨端框架往往需要依赖插件桥接而 ArkTS 原生开发可以直接调用系统权限管理模块。对于毕设项目你不一定要把“原生”作为宣传噱头但用原生方式写一遍确实能帮你理解移动端开发的底层机制面试被问到项目细节时也能讲得更扎实。2. 项目整体架构与功能模块拆分在动手写代码之前先把整个系统的架构想清楚。这里我把它拆成三个端鸿蒙 App 端、Web 后台管理端、后端服务端。2.1 功能模块总览从用户视角出发可以把鸿蒙 App 端的功能划分为以下几个模块模块子功能关键技术点用户模块登录、注册、个人信息、关注列表Token 鉴权、本地持久化笔记模块笔记瀑布流、笔记详情、发布笔记、点赞收藏、评论列表懒加载、图片加载、富文本展示商城模块商品列表、商品详情、购物车、订单确认、支付模拟数据绑定、订单状态流转搜索模块笔记搜索、商品搜索、历史记录关键字匹配、本地存储消息模块点赞通知、评论通知、系统通知消息列表、未读计数Web 后台管理端则面向运营人员功能包括用户管理查看用户列表、禁用账号、重置密码。笔记管理审核笔记内容、下架违规笔记。商品管理新增商品、编辑商品、上架/下架、设置库存。订单管理查看订单列表、发货、退款处理。数据统计笔记发布量、订单成交量、用户增长趋势。后端服务端负责提供接口最常见的方案是 Java Spring Boot 或者 Node.js我推荐用 Spring Boot原因很简单资料多、生态成熟、MySQL MyBatis 的组合大家都熟悉答辩时讲数据表设计也方便。2.2 技术栈选型这里给出一个相对稳妥的选型组合具体版本以你本机环境为准端技术说明移动端HarmonyOS ArkTS ArkUI使用 DevEco Studio 开发后端Java Spring Boot提供 RESTful 接口数据库MySQL存储用户、笔记、商品、订单数据ORMMyBatis-Plus简化单表 CRUD管理后台Vue 3 Element Plus可选也可以直接用简单页面接口调试Apifox / Postman联调阶段使用如果你对 Vue 不熟Web 后台也可以用原生 HTML JavaScript 来实现虽然界面不那么精致但足以完成管理功能。核心精力还是放在鸿蒙 App 端。2.3 鸿蒙 App 端页面结构在 DevEco Studio 中一个鸿蒙应用工程通常包含多个 module主模块是entry。页面可以按下面这种方式组织entry/src/main/ets/ ├── entryability/ │ └── EntryAbility.ets // 应用入口 Ability ├── pages/ │ ├── Index.ets // 首页 Tab 容器 │ ├── NoteListPage.ets // 笔记瀑布流 │ ├── NoteDetailPage.ets // 笔记详情 │ ├── NotePublishPage.ets // 发布笔记 │ ├── ProductListPage.ets // 商品列表 │ ├── CartPage.ets // 购物车 │ ├── OrderConfirmPage.ets // 订单确认 │ ├── LoginPage.ets // 登录 │ └── MinePage.ets // 个人中心 ├── components/ │ ├── NoteCard.ets // 笔记卡片组件 │ ├── ProductCard.ets // 商品卡片组件 │ └── LoadingView.ets // 加载状态组件 ├── api/ │ ├── HttpUtil.ets // 网络请求封装 │ └── ApiConstants.ets // 接口地址常量 ├── model/ │ ├── Note.ets // 笔记数据模型 │ ├── Product.ets // 商品数据模型 │ └── User.ets // 用户数据模型 └── utils/ ├── AuthManager.ets // 登录态管理 └── PermissionUtil.ets // 权限申请工具这样划分的好处是职责清晰页面只负责 UI 渲染和用户交互网络请求统一走api包数据模型统一放在model包后续如果换接口地址只需要改ApiConstants.ets。3. 环境准备与工程创建3.1 开发工具与运行环境开发鸿蒙应用首选官方 IDEDevEco Studio。当前主流版本都已经支持 HarmonyOS 工程的创建、模拟器运行和真机调试。需要提前准备的软件环境如下DevEco Studio。HarmonyOS SDK建议根据 IDE 的提示完成安装。Node.js 环境部分工程构建流程会使用。可选HarmonyOS 模拟器或真机设备。需要特别说明的是不同版本的 DevEco Studio 对应的工程模板和 API 等级有差异。本文示例围绕常见的 Stage 模型编写如果你的 IDE 版本比较新创建工程时默认就是 Stage 模型代码结构基本一致。3.2 创建 HarmonyOS 工程的具体步骤打开 DevEco Studio按以下步骤创建工程点击 “Create Project”。选择 “Application” - “Empty Ability” 模板。填写项目名称例如HarmonyLittleRedBook。选择设备类型Phone。确认后会生成一个标准工程结构。生成后可以在entry/src/main/module.json5中查看应用配置。这个文件相当于鸿蒙版本的AndroidManifest.xml应用包名、权限声明、Ability 注册都在这里配置。3.3 工程目录结构解析创建完成后的核心文件如下文件作用entry/src/main/module.json5模块配置和应用权限声明entry/src/main/ets/entryability/EntryAbility.etsAbility 生命周期入口entry/src/main/ets/pages/Index.ets首页页面entry/src/main/resources/base/profile/main_pages.json页面路由配置build-profile.json5模块构建配置oh-package.json5依赖管理配置这里要特别注意main_pages.json。鸿蒙应用的路由跳转依赖于页面注册每新增一个页面都要在这个文件里添加对应的页面路径否则调用router.pushUrl时会报页面不存在。{ src: [ pages/Index, pages/NoteListPage, pages/NoteDetailPage, pages/NotePublishPage, pages/ProductListPage, pages/CartPage, pages/OrderConfirmPage, pages/LoginPage, pages/MinePage ] }4. ArkTS 核心语法与关键机制讲解4.1 ArkTS 和 TypeScript 的关系ArkTS 是鸿蒙生态的应用开发语言它在 TypeScript 的基础上增加了声明式 UI 的状态管理、并发编程等能力同时约束了一些动态特性让代码更适合静态分析和性能优化。如果你已经会 TypeScript上手 ArkTS 几乎没有障碍。主要的写法差异体现在组件结构上// 文件路径entry/src/main/ets/pages/DemoPage.ets Entry Component struct DemoPage { State message: string Hello HarmonyOS; build() { Column({ space: 20 }) { Text(this.message) .fontSize(24) .fontWeight(FontWeight.Bold) Button(点击修改) .onClick(() { this.message 你已经点击了按钮; }) } .width(100%) .padding(16) } }这里有几个关键概念Entry标记当前组件是页面的入口组件一个页面只能有一个。Component声明这是一个自定义组件。State装饰状态变量当变量值变化时ArkUI 会自动刷新绑定了该变量的组件。build()声明式描述 UI 结构的地方。这种写法和 Flutter 的 Widget、SwiftUI 的 View 属于同一套思维模型界面是状态的函数状态变化驱动界面刷新。4.2 状态管理的常用装饰器实际开发中只靠State是不够的页面之间经常需要传递数据。ArkUI 提供了多级状态管理装饰器装饰器用途State组件内部状态变化触发 UI 刷新Prop从父组件传入的子组件属性单向同步Link父子组件双向同步Provide/Consume跨层级组件共享数据Observed/ObjectLink观察对象内部属性变化StorageLink/StorageProp与本地持久化存储绑定举个例子首页的 Tab 容器需要维护当前选中的 Tab 索引子组件需要根据索引切换内容这时用Link就比较合适// 文件路径entry/src/main/ets/components/TabContent.ets Component export struct TabContent { Link currentIndex: number; tabId: number 0; build() { Column() { Text(当前 Tab this.currentIndex) .fontSize(18) if (this.currentIndex this.tabId) { Text(显示当前 Tab 的内容) } } .padding(16) } }4.3 页面路由跳转在 HarmonyOS 中最常见的页面跳转方式是使用router模块。以下代码演示了如何从首页跳转到登录页并传递参数import { router } from kit.ArkUI; router.pushUrl({ url: pages/LoginPage, params: { loginType: phone } }).then(() { console.info(跳转成功); }).catch((err: Error) { console.error(跳转失败: JSON.stringify(err)); });目标页面通过router.getParams()接收参数import { router } from kit.ArkUI; Entry Component struct LoginPage { State loginType: string ; aboutToAppear() { const params router.getParams() as Recordstring, string; if (params) { this.loginType params[loginType] ?? ; } } }4.4 ArkTS 权限申请流程鸿蒙系统对用户隐私保护非常严格。如果你的 App 需要访问相机、相册、定位等敏感信息必须在module.json5中先声明权限再在代码中动态申请。这里以申请相机权限为例。首先在module.json5中加入权限声明{ module: { requestPermissions: [ { name: ohos.permission.CAMERA, reason: 需要使用相机拍摄笔记配图, usedScene: { abilities: [EntryAbility] } } ] } }然后在代码中调用权限管理模块// 文件路径entry/src/main/ets/utils/PermissionUtil.ets import abilityAccessCtrl, { Permissions } from ohos.abilityAccessCtrl; import { bundleManager } from kit.AbilityKit; import { common } from kit.AbilityKit; export async function requestPermission( context: common.UIAbilityContext, permissions: Permissions[] ): Promiseboolean { const atManager abilityAccessCtrl.createAtManager(); // 获取当前应用的 token ID const bundleInfo await bundleManager.getBundleInfoForSelf( bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION ); const tokenID bundleInfo.appInfo.accessTokenId; // 遍历检查权限是否已授予 for (let i 0; i permissions.length; i) { const grantStatus atManager.checkAccessToken(tokenID, permissions[i]); if (grantStatus abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) { continue; } // 向用户发起授权弹窗 const result await atManager.requestPermissionsFromUser(context, permissions); if (result.authResults[i] ! 0) { return false; } } return true; }这里的代码思路是通用的先检查权限没有授权就去申请凡是用户拒绝的就认为不通过。执行这段代码时如果权限弹窗没有出现先确认module.json5里的权限名称是否拼写正确其次确认当前使用的 API 版本是否支持动态申请。5. 核心功能实战从笔记流到订单闭环接下来实现项目中最有代表性的几个功能页面。考虑到代码篇幅我会保留完整业务逻辑框架你可以直接对照着往里填业务细节。5.1 首页 Tab 容器整个 App 采用底部 Tab 导航首页、商城、发布、消息、我的。这里用Tabs组件实现比较方便// 文件路径entry/src/main/ets/pages/Index.ets import { NoteListPage } from ./NoteListPage; import { ProductListPage } from ./ProductListPage; import { MinePage } from ./MinePage; Entry Component struct Index { State currentTab: number 0; Builder tabBuilder(title: string) { Column({ space: 4 }) { Text(title) .fontSize(14) .fontColor(this.currentTab 0 ? #FF2442 : #666666) } .width(100%) .height(50) } build() { Tabs({ barPosition: BarPosition.End }) { TabContent() { NoteListPage() } .tabBar(this.tabBuilder(首页)) TabContent() { ProductListPage() } .tabBar(this.tabBuilder(商城)) TabContent() { Column() { Text(发布页占位) } } .tabBar(this.tabBuilder(发布)) TabContent() { Column() { Text(消息页占位) } } .tabBar(this.tabBuilder(消息)) TabContent() { MinePage() } .tabBar(this.tabBuilder(我的)) } .scrollable(false) .onChange((index: number) { this.currentTab index; }) } }要注意的是上面代码中.tabBar()里传入的是一个自定义Builder函数这样可以定制 Tab 的样式。如果你用的是 API 12 以上版本还可以使用TabContent的tabBar属性直接配置字符串或组件根据实际 SDK 调整写法。5.2 首页瀑布流笔记列表瀑布流是小红书类应用最核心的交互形态。在 ArkUI 中可以使用WaterFlow组件实现它和List的用法类似但支持多列高度不一致的布局。// 文件路径entry/src/main/ets/pages/NoteListPage.ets import { NoteCard } from ../components/NoteCard; import { HttpUtil } from ../api/HttpUtil; import { ApiConstants } from ../api/ApiConstants; import { Note } from ../model/Note; Component export struct NoteListPage { State noteList: Note[] []; State page: number 1; State loading: boolean false; aboutToAppear() { this.loadNotes(); } async loadNotes() { if (this.loading) { return; } this.loading true; const data await HttpUtil.getNote[]( ${ApiConstants.BASE_URL}/api/note/page?page${this.page}size10 ); this.noteList this.noteList.concat(data); this.page; this.loading false; } build() { Column() { WaterFlow() { ForEach(this.noteList, (item: Note) { FlowItem() { NoteCard({ note: item }) } }, (item: Note) item.id) } .columnsTemplate(1fr 1fr) .onReachEnd(() { this.loadNotes(); }) } .width(100%) .height(100%) } }FlowItem就是瀑布流中的单个条目里面可以放图片和文字。为了性能考虑图片组件建议使用Image组的objectFit属性并设置合适的占位背景色避免图片加载时出现大面积白屏。5.3 笔记卡片组件为了让笔记列表代码可维护把单个笔记卡片抽成子组件// 文件路径entry/src/main/ets/components/NoteCard.ets import { Note } from ../model/Note; import { router } from kit.ArkUI; Component export struct NoteCard { Prop note: Note; build() { Column({ space: 6 }) { Image(this.note.cover) .width(100%) .aspectRatio(0.8) .borderRadius(12) Text(this.note.title) .fontSize(14) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 8 }) { Text(this.note.author) .fontSize(12) .fontColor(#999999) Blank() Text(♥ this.note.likeCount) .fontSize(12) .fontColor(#FF2442) } } .padding(8) .backgroundColor(#FFFFFF) .borderRadius(12) .onClick(() { router.pushUrl({ url: pages/NoteDetailPage, params: { noteId: this.note.id } }); }) } }5.4 发布笔记页面发布笔记涉及文本输入和权限申请。核心逻辑分三步判断是否有相册权限、选择图片、把内容提交到后端。// 文件路径entry/src/main/ets/pages/NotePublishPage.ets import { promptAction } from kit.ArkUI; import { requestPermission } from ../utils/PermissionUtil; import { HttpUtil } from ../api/HttpUtil; import { common } from kit.AbilityKit; Entry Component struct NotePublishPage { State title: string ; State content: string ; State coverUrl: string ; async publishNote() { if (this.title.trim().length 0) { promptAction.showToast({ message: 请填写笔记标题 }); return; } const context getContext(this) as common.UIAbilityContext; const granted await requestPermission(context, [ohos.permission.READ_IMAGEVIDEO]); if (!granted) { promptAction.showToast({ message: 需要相册权限才能发布笔记 }); return; } const body { title: this.title, content: this.content, cover: this.coverUrl }; const result await HttpUtil.post(/api/note/publish, JSON.stringify(body)); promptAction.showToast({ message: 发布成功 }); } build() { Column({ space: 16 }) { TextInput({ placeholder: 填写标题, text: this.title }) .onChange((value: string) { this.title value; }) TextArea({ placeholder: 分享你的生活瞬间, text: this.content }) .height(200) .onChange((value: string) { this.content value; }) Button(发布笔记) .width(100%) .onClick(() { this.publishNote(); }) } .padding(16) .backgroundColor(#F5F5F5) } }5.5 商城列表与购物车商城模块和笔记模块在写法上没有本质区别只是数据字段不同。商品列表用一个List横向排列或者普通List竖向排列都可以。购物车需要处理一个典型的“选择状态”问题。建议在CartItem模型中增加一个checked: boolean字段// 文件路径entry/src/main/ets/model/CartItem.ets export class CartItem { id: number 0; productId: number 0; productName: string ; price: number 0; count: number 1; checked: boolean false; constructor(productId?: number, productName?: string, price?: number) { if (productId) this.productId productId; if (productName) this.productName productName; if (price) this.price price; } }计算总价时只需要遍历购物车列表并判断checked属性getTotalPrice(): number { let total 0; this.cartList.forEach((item: CartItem) { if (item.checked) { total item.price * item.count; } }); return total; }5.6 网络请求封装把所有网络请求统一封装可以避免每个页面都写一堆重复代码。这里用ohos.net.http实现一个简单的 GET、POST 封装// 文件路径entry/src/main/ets/api/HttpUtil.ets import http from ohos.net.http; import { promptAction } from kit.ArkUI; export class HttpUtil { static async requestT( url: string, method: http.RequestMethod, body?: string ): PromiseT { const httpRequest http.createHttp(); const response await httpRequest.request(url, { method: method, header: { Content-Type: application/json, Authorization: this.getToken() }, extraData: body, connectTimeout: 10000, readTimeout: 15000 }); httpRequest.destroy(); if (response.responseCode 200) { return JSON.parse(response.result as string) as T; } else if (response.responseCode 401) { promptAction.showToast({ message: 登录已过期请重新登录 }); throw new Error(Unauthorized); } else { throw new Error(HTTP ${response.responseCode}); } } static getT(url: string): PromiseT { return this.requestT(url, http.RequestMethod.GET); } static postT(url: string, body: string): PromiseT { return this.requestT(url, http.RequestMethod.POST, body); } static getToken(): string { return Bearer (localStorage.getItem(token) ?? ); } }注意上面的登录态用localStorage保存实际操作中更规范的方式是用ohos.data.preferences实现持久化或者使用PersistentStorage。你可以在封装层替换为你的实现。6. 数据模型与后端接口设计6.1 核心数据表设计后端数据库使用 MySQL至少要建以下这几张表表名字段说明userid, username, password, nickname, avatar, status, create_time用户表noteid, user_id, title, content, cover, like_count, comment_count, status, create_time笔记表note_likeid, user_id, note_id, create_time笔记点赞记录note_commentid, user_id, note_id, content, create_time评论表productid, title, cover, price, stock, sales, status, create_time商品表cart_itemid, user_id, product_id, count, checked, create_time购物车表orderid, order_no, user_id, total_price, status, create_time订单表order_itemid, order_id, product_id, product_name, price, count订单明细表这里要注意密码不要明文存储建议使用 BCrypt 加密点赞记录表要加user_id和note_id的唯一索引避免重复点赞。6.2 Spring Boot 后端接口示例假设你已经创建了一个 Spring Boot 工程并引入了spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java等依赖。用一个简单的商品列表接口演示// 文件路径src/main/java/com/harmony/app/controller/ProductController.java RestController RequestMapping(/api/product) public class ProductController { Resource private IProductService productService; GetMapping(/list) public RIPageProduct list( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageProduct pageParam new Page(page, size); IPageProduct result productService.page(pageParam); return R.ok(result); } }在统一返回类R中建议包含code、message、data三个字段。前端通过code判断接口是否成功而不是只看 HTTP 状态码。这样可以统一异常处理避免前端解析不一致。6.3 笔记发布接口发布笔记的逻辑包括校验登录态、组装笔记实体、插入数据库。为了完整展示业务逻辑我给出 Service 层代码// 文件路径src/main/java/com/harmony/app/service/impl/NoteServiceImpl.java Override Transactional(rollbackFor Exception.class) public boolean publish(NotePublishRequest request, Long userId) { if (StringUtils.isBlank(request.getTitle())) { throw new BusinessException(标题不能为空); } Note note new Note(); note.setUserId(userId); note.setTitle(request.getTitle()); note.setContent(request.getContent()); note.setCover(request.getCover()); note.setStatus(1); note.setLikeCount(0); note.setCommentCount(0); note.setCreateTime(LocalDateTime.now()); return save(note); }所有写操作都建议加上Transactional保证数据一致性。尤其是在生成订单时扣减库存和写入订单明细必须处于同一个事务。7. 常见问题与排查思路7.1 ArkTS 权限申请失败问题现象可能原因解决思路弹窗不出现权限名称拼写错误检查requestPermissions是否与官方文档一致授权成功后功能仍不可用未在业务代码中再次检查授权结果授权成功后再调用系统能力真机安装后崩溃缺少reason字段动态申请权限必须在module.json5声明reason和usedScene7.2 网络请求失败或连不上后台开发鸿蒙 App 时最常见的问题是模拟器或真机访问不到本机后端接口。这里要注意模拟器里访问电脑本机的localhost并不一定等同于你电脑的localhost。Windows 或 macOS 环境下后端服务通常监听在8080端口App 端请求地址应该填写电脑在局域网中的 IP例如http://192.168.1.100:8080而不是http://localhost:8080。另外HarmonyOS 应用默认不允许 HTTP 明文请求。如果后端是本地http接口需要配置网络安全策略或者在开发阶段允许明文流量。具体配置方式根据 SDK 版本有所不同建议查阅当前版本的官方文档。7.3 编译报错符号找不到或 API 版本不支持不同版本的 HarmonyOS API 中某些组件属性和方法有差异。例如WaterFlow的columnsTemplate方法在部分版本中写法不同。遇到这类报错优先查看当前 SDK 的 API 文档或者将工程 SDK 版本调整到示例代码对应的 API 版本。最稳妥的办法是先创建官方模板的WaterFlow示例确认能编译通过后再改造成自己的业务代码。8. 最佳实践与工程化建议8.1 分层架构尽量清晰鸿蒙端代码至少分成四层页面层、组件层、数据层、工具层。页面层只负责交互和状态管理不直接写网络代码网络请求封装在api包中数据模型统一放在model包。这样后续维护代码、排查问题会轻松很多。8.2 数据安全与隐私合规涉及用户登录、支付模拟等场景时需要特别注意安全边界用户密码不能明文传输生产环境必须使用 HTTPS。Token 不要长时间保存在本地建议设置合理过期时间。管理后台的所有删除、下架操作都要做管理员权限校验。不要使用真实支付渠道毕设项目使用模拟支付即可。8.3 性能优化思路瀑布流面临的最大问题是图片加载。列表图片建议使用压缩后的图片地址并设置Image的占位图和alt属性。另外ForEach渲染长列表时需要为每一项提供唯一 key避免组件复用混乱。8.4 毕设答辩常见问题预判老师大概率会问这几个问题为什么选鸿蒙而不用 Android可以从生态趋势和原生开发价值回答。笔记列表的加载性能如何优化可以从图片懒加载、分页加载、缓存策略回答。这个项目的难点是什么可以说权限管理的动态申请、瀑布流失真的复用、前后端联调排错。你的项目有哪些可以继续优化的方向比如推荐算法、消息推送、视频笔记。提前把这些问题想明白答辩时表达会更流畅。9. 总结与后续学习路线一个“鸿蒙 小红书”项目表面上是一个 App 开发教程实际上串联了 ArkTS 语法、ArkUI 声明式组件、状态管理、权限申请、网络请求、前后端接口设计、数据库表结构设计、管理后台开发等多项技能。把这套项目完整走通之后你对鸿蒙原生开发的整个链路会有一个系统性的认识。如果接下来还想深入可以按下面的路线继续学习学习鸿蒙的元服务开发尝试做一个桌面卡片或服务卡片。深入学习状态管理尤其是Observed、ObjectLink在多层级组件中的应用。使用ohos.data.relationalStore做本地数据库把笔记缓存到本地。接入鸿蒙的推送服务实现点赞、评论等消息通知。把管理后台从 Vue 换成更轻量的方案或者直接对接鸿蒙端的其他场景。项目源码的整理方式建议按照“前端 App 后端接口 数据库脚本 管理后台”四部分归档同时写一份 README 说明启动步骤和测试账号。这样不管是自己答辩还是给同学讲解都能快速还原项目环境。动手写代码的过程一定会遇到不少编译错误和联调问题但这恰恰是收获最大的部分。先把第一个页面跑起来再逐步补齐笔记、商品、购物车和后台接口整个项目就会一步步成型。