鸿蒙原生应用开发实战（一）：项目搭建与首页概览 — 电影清单App

鸿蒙原生应用开发实战一项目搭建与首页概览 — 电影清单App前言各位开发者朋友本系列将带领大家从零开始使用 HarmonyOS Stage 模型和 ArkTS 语言开发一款完整的电影清单应用。无论你是电影爱好者还是想学习鸿蒙开发这篇文章都能帮你快速上手。本系列共五篇覆盖项目搭建、添加电影、列表管理、详情评价和个人中心。本文你将学到项目创建与 Stage 模型数据模型与分类设计首页仪表盘开发路由注册与导航示例数据与 AppStorage一、项目创建1.1 新建项目打开 DevEco Studio → Create Project → Empty AbilityProject Name: MyApplicationBundle Name: com.example.myapplicationLocation: D:\harmonyos\project\6.11.12345\5\MyApplicationCompatible SDK: API 23 (6.1.0)1.2 Stage 模型入口// EntryAbility.etsimport{AbilityConstant,UIAbility,Want}fromkit.AbilityKit;import{window}fromkit.ArkUI;exportdefaultclassEntryAbilityextendsUIAbility{onWindowStageCreate(windowStage:window.WindowStage):void{windowStage.loadContent(pages/Index,(err){if(err.code){hilog.error(0x0000,testTag,Failed to load content);return;}});}}二、数据模型设计2.1 核心类型在models/MovieData.ets中定义数据模型// 电影状态exportenumMovieStatus{WANT_TO_WATCHwant_to_watch,// 想看WATCHINGwatching,// 在看WATCHEDwatched// 已看}// 电影数据exportinterfaceMovie{id:string;title:string;year:number;director:string;rating:number;// 1-5 星status:MovieStatus;isFavorite:boolean;review:string;dateAdded:string;genreId:string;}// 电影分类exportinterfaceGenre{id:string;name:string;icon:string;}2.2 预定义分类constALL_GENRES:Genre[][{id:action,name:动作,icon:},{id:comedy,name:喜剧,icon:},{id:drama,name:剧情,icon:},{id:sci_fi,name:科幻,icon:},{id:horror,name:恐怖,icon:},{id:romance,name:爱情,icon:❤️},{id:animation,name:动画,icon:},{id:thriller,name:悬疑,icon:},{id:documentary,name:纪录片,icon:️},{id:fantasy,name:奇幻,icon:}];2.3 工具函数exportfunctiongetStatusLabel(status:MovieStatus):string{if(statusMovieStatus.WANT_TO_WATCH)return想看;if(statusMovieStatus.WATCHING)return在看;return已看;}exportfunctionstarsString(rating:number):string{return★.repeat(rating)☆.repeat(5-rating);}2.4 示例数据为了首次打开页面有内容展示我们预置了8部经典电影exportfunctiongetSampleMovies():Movie[]{return[{id:m1,title:肖申克的救赎,year:1994,director:弗兰克·德拉邦特,rating:5,status:MovieStatus.WATCHED,isFavorite:true,review:经典中的经典,dateAdded:2025-01-10,genreId:drama},{id:m2,title:星际穿越,year:2014,director:克里斯托弗·诺兰,rating:5,status:MovieStatus.WATCHED,isFavorite:true,review:时间、空间与爱的史诗,dateAdded:2025-01-12,genreId:sci_fi},// ... 更多电影];}三、首页仪表盘开发3.1 页面布局┌──────────────────────────────────┐ │ 电影清单 我的 │ ├──────────────────────────────────┤ │ 总收藏 ✅ 已看 想看 ⭐ 收藏│ │ 8 3 2 3 │ ├──────────────────────────────────┤ │ ➕添加电影 全部列表 随机推荐│ ├──────────────────────────────────┤ │ 最近添加 全部 │ │ ┌────────────────────────────┐ │ │ │ 疯狂动物城 ▶️ 在看 │ │ │ │ 楚门的世界 ✅ 已看 │ │ │ │ ❤️ 泰坦尼克号 想看 │ │ │ └────────────────────────────┘ │ └──────────────────────────────────┘3.2 状态管理EntryComponentstruct Index{Statemovies:Movie[][];StatetotalCount:number0;StatewatchedCount:number0;StatewantCount:number0;StatefavoriteCount:number0;StaterecentMovies:Movie[][];}3.3 数据加载与生命周期aboutToAppear():void{this.loadData();}onPageShow():void{this.loadData();}loadData():void{letstoredAppStorage.getMovie[](movies);if(stored){this.moviesstored;}else{letsamplesgetSampleMovies();this.moviessamples;AppStorage.setMovie[](movies,samples);}this.calcStats();}3.4 Builder 复用ArkTS 中使用Builder装饰器可以高效复用 UI 代码BuilderstatCard(icon:string,label:string,value:string,color:string){Column(){Text(icon).fontSize(22)Text(value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(color).margin({top:4})Text(label).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1).padding(10).backgroundColor(#FFFFFF).borderRadius(12).margin({left:3,right:3}).alignItems(HorizontalAlign.Center)}使用方式Row(){this.statCard(,总收藏,this.totalCount.toString(),#6C63FF)this.statCard(✅,已看,this.watchedCount.toString(),#2ED573)this.statCard(,想看,this.wantCount.toString(),#FFA502)this.statCard(⭐,收藏,this.favoriteCount.toString(),#FF6B6B)}3.5 路由跳转// 页面跳转router.pushUrl({url:pages/AddMovie});router.pushUrl({url:pages/DetailPage,params:{movieId:m1}});// 页面返回router.back();四、路由注册4.1 main_pages.json{src:[pages/Index,pages/AddMovie,pages/ListPage,pages/DetailPage,pages/ProfilePage]}五、ArkTS 严格模式指南API 23 开启严格模式以下是关键注意事项Builder 中不能有let声明→ 所有计算需内联或通过State提前计算不能使用解构赋值→let [a, b] arr不允许换成let a arr[0]; let b arr[1]对象字面量需要显式类型→ 不能写{ name: test }要定义 interface 后赋值.bind()不支持→ 使用闭包或 builder onAction 替代// ❌ 不支持的写法Buildercard(item:Type){letnameitem.name;// 不允许Row(){...}}// ✅ 正确的写法Buildercard(item:Type){Row(){Text(item.name)...// 直接内联}}六、运行效果完成开发后首页会展示4个统计卡片总收藏/已看/想看/收藏3个快捷操作按钮添加/列表/随机推荐最近添加的5部电影列表Emoji 图标 电影分类标签状态标签以不同颜色区分想看橙/在看绿/已看紫总结本文完成了✅ 项目创建与 Stage 模型理解✅ 数据模型设计Movie/Genre✅ 首页仪表盘开发统计卡片 快捷操作 最近列表✅ 路由注册与页面导航✅ Builder 组件复用下一篇我们将开发添加电影页面实现表单输入、分类选择和状态切换系列目录✅ 第一篇项目搭建与首页概览本篇 第二篇添加电影与表单交互 第三篇电影列表与搜索筛选 第四篇电影详情与评分评价 第五篇个人中心与数据统计