文章目录前言一、知识体系回顾1.1 语言与基础01-041.2 Ability 与系统05-091.3 数据与工具10-141.4 地图与交互15-201.5 列表与组件21-25二、项目设计的亮点2.1 关注点分离做得好2.2 常量管理规范2.3 全局状态管理思路正确三、项目可以改进的地方3.1 定位调用次数优化3.2 Marker 动画的 from 值3.3 权限被拒绝后引导用户3.4 加油站数据从网络获取3.5 距离排序3.6 完整支持暗色模式四、可以继续添加的功能五、HarmonyOS 开发的真实体验六、学习路线建议总结前言这是系列文章的最后一篇。25 篇文章我们从认识项目结构开始一路讲到 ArkTS 语言基础、ArkUI 布局、Ability 生命周期、状态管理、Navigation 路由、权限申请、数据模型、工具类封装、MapKit 地图、定位服务、暗色模式与国际化……这篇文章做两件事回顾整个系列的知识体系以及给出项目可以继续改进的方向让这个教程不只是读完就结束而是成为你继续学习的起点。项目预览一、知识体系回顾1.1 语言与基础01-04知识点关键概念ArkTS 语言interface、class、async/await、装饰器ArkUI 声明式 UIColumn、Row、Stack、Text、Image常量管理static readonly、SCREAMING_SNAKE_CASE资源文件$r()、color.json、string.json、media核心记忆点ArkTS TypeScript 装饰器扩展ArkUI 声明式不是命令式。1.2 Ability 与系统05-09知识点关键概念UIAbility 生命周期onCreate → onWindowStageCreate → onForeground沉浸式全屏setWindowLayoutFullScreen、getWindowAvoidAreaAppStoragesetOrCreate、StorageProp、StorageLinkNavigation 路由NavPathStack、pushPathByName、pop、NavDestination权限申请abilityAccessCtrl、checkAccessToken、requestPermissionsFromUser核心记忆点安全区域高度存 AppStorage → StorageProp 全局响应式Navigation 现代路由不用 Router。1.3 数据与工具10-14知识点关键概念数据模型interface StationData、ResourceStr、export constLoggerhilog、domain/tag/format、日志分级距离计算map.calculateDistance、toFixed(1)、m → kmMapKit 接入MapOptions、MapComponent、MapComponentController坐标系转换WGS84GPS→ GCJ02中国地图、map.convertCoordinate核心记忆点interface 定义数据模型class 封装行为GPS WGS84中国地图 GCJ02必须转换。1.4 地图与交互15-20知识点关键概念Marker 标记MarkerOptions、addMarker、anchorU/anchorV、SVG 图标相机动画CameraPosition、CameraUpdate、animateCameraScaleAnimationfromX/toX/fromY/toY、setDuration、FillMode.FORWARDSMapUtil 封装Observed、单例export const mapUtilbindSheetdetents、dragBar、blurStyle、onWillDismiss核心记忆点Marker 底部对准坐标点anchorV1所有地图操作在 callback 里bindSheet 必须调用 dismiss()。1.5 列表与组件21-25知识点关键概念List ForEachkey 生成函数、LazyForEach大数据量Builder局部/全局、共享父组件状态、vs ComponentLocationKitgetCurrentLocation、WGS84、错误处理暗色模式dark/element/color.json、setColorMode多语言zh_CN/element/string.json、资源优先级核心记忆点Builder 共享状态适合页面内拆分Component 独立适合跨页面复用资源文件自动按设备语言/主题选择代码无感知。二、项目设计的亮点这个项目虽然功能简单但设计上有几个值得学习的亮点2.1 关注点分离做得好页面GasStationPage ← 只关心业务逻辑 ↓ 调用 工具类MapUtil ← 只关心地图操作技术细节 ↓ 调用 KitMapKit、LocationKit← 系统能力页面不知道地图坐标如何转换工具类不知道业务逻辑。层次清晰。2.2 常量管理规范所有魔法数字集中在Constants.etsstatic readonly 全大写命名改动一处全局生效。这个习惯值得在所有项目里坚持。2.3 全局状态管理思路正确安全区域高度用AppStorage存储页面用StorageProp读取动态监听变化。这种模式可以推广到所有需要跨组件/跨页面共享的数据。三、项目可以改进的地方3.1 定位调用次数优化// 现在定位了 3 次moveToMyLocation 1次 getMyLocation 2次mapUtil.moveToMyLocation(mapController);this.currentLatitude(awaitmapUtil.getMyLocation()).latitude;this.currentLongitude(awaitmapUtil.getMyLocation()).longitude;// 优化只定位 1 次letlocationawaitmapUtil.getMyLocation();this.currentLatitudelocation.latitude;this.currentLongitudelocation.longitude;awaitmapUtil.moveToMyLocationByCoord(location,mapController);// 传入已有的位置3.2 Marker 动画的 from 值// 现在放大时 from1缩小时也是 from1不连续letanimationnewmap.ScaleAnimation(Constants.ONE,imageScale,// 永远从 1 开始Constants.ONE,imageScale);// 优化记录当前比例作为起始值letanimationnewmap.ScaleAnimation(this.currentScale,imageScale,// 从当前比例开始this.currentScale,imageScale);this.currentScaleimageScale;3.3 权限被拒绝后引导用户// 现在权限被拒绝只记日志.catch((err:BusinessError){Logger.error(Failed to request permissions from user...);});// 优化弹窗引导用户去设置页.catch((){AlertDialog.show({title:需要定位权限,message:请在设置中开启位置权限否则无法查看附近加油站,confirm:{value:去设置,action:(){openAppSettings(context);}}});});3.4 加油站数据从网络获取// 现在静态数据this.stationInfoListSTATION_LIST;// 优化从后端 API 获取asyncloadStations(){this.isLoadingtrue;try{letresponseawaithttp.request(https://api.example.com/nearby-stations);this.stationInfoListJSON.parse(response.resultasstring);}catch(err){Logger.error(加载数据失败使用本地数据);this.stationInfoListSTATION_LIST;// 降级使用静态数据}finally{this.isLoadingfalse;}}3.5 距离排序// 优化加油站列表按距离由近到远排序this.stationInfoList[...STATION_LIST].sort((a,b){letdistAparseFloat(CalculateUtil.getDistance(this.currentLatitude,this.currentLongitude,a.latitude,a.longitude));letdistBparseFloat(CalculateUtil.getDistance(this.currentLatitude,this.currentLongitude,b.latitude,b.longitude));returndistA-distB;});3.6 完整支持暗色模式// 删除这行强制亮色代码// this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);// 然后在 dark/element/color.json 里补全所有颜色的暗色版本四、可以继续添加的功能如果你想基于这个项目继续练习以下是一些功能扩展方向功能涉及技术加油站详情页Navigation 传参、新页面开发导航功能调用系统导航 AppstartAbility Want收藏加油站PersistentStorage 持久化搜索功能TextInput 组件、数据过滤加载状态骨架屏、LoadingProgress 组件下拉刷新Refresh 组件评分显示自定义 Rating 组件燃油价格网络请求、数据展示路线规划MapKit 路线规划 API五、HarmonyOS 开发的真实体验学完这个系列说说我对 HarmonyOS 开发的整体感受优点ArkUI 声明式 UI 写起来很流畅和 SwiftUI/Compose 体验类似Kit 体系封装了大量系统能力地图、定位这些调用门槛低TypeScript 基础的 ArkTS 入门曲线平滑有前端经验很容易上手状态管理体系State/StorageProp/AppStorage设计合理响应式明确挑战文档质量参差不齐有些 API 的参数说明不够详细部分功能只能在真机上测试地图、定位在模拟器上有限制生态相比 Android/iOS 还在发展中第三方库较少折叠屏、多窗口等适配需要额外工作六、学习路线建议如果你想继续深入 HarmonyOS 开发推荐路线基础本系列 └─ 进阶功能 ├─ 网络请求ohos/axios / http模块 ├─ 本地数据库关系型数据库、首选项 ├─ 多 Ability 应用 └─ 元服务HarmonyOS的小程序 └─ UI 深入 ├─ 自定义动画animateTo、transition ├─ 自定义绘制Canvas └─ 折叠屏适配 └─ 架构进阶 ├─ MVVM 架构模式 ├─ 模块化设计HAR/HSP └─ 性能优化启动速度、渲染性能总结25 篇文章我们一起解析了附近加油站这个项目的每一行代码。从一个陌生的.ets文件到能说清楚每个装饰器的作用、每个 API 的调用方式、每个设计决策背后的原因——这就是这个系列的目标。希望这个系列对你有帮助。HarmonyOS 还很年轻它的生态还在快速发展。现在入坑有机会参与到一个新平台的成长过程中——这是一件挺值得期待的事。代码要写也要想清楚为什么这样写。加油
【HarmonyOS实战】HarmonyOS应用的性能优化：从这个项目出发的10个改进点
文章目录前言一、知识体系回顾1.1 语言与基础01-041.2 Ability 与系统05-091.3 数据与工具10-141.4 地图与交互15-201.5 列表与组件21-25二、项目设计的亮点2.1 关注点分离做得好2.2 常量管理规范2.3 全局状态管理思路正确三、项目可以改进的地方3.1 定位调用次数优化3.2 Marker 动画的 from 值3.3 权限被拒绝后引导用户3.4 加油站数据从网络获取3.5 距离排序3.6 完整支持暗色模式四、可以继续添加的功能五、HarmonyOS 开发的真实体验六、学习路线建议总结前言这是系列文章的最后一篇。25 篇文章我们从认识项目结构开始一路讲到 ArkTS 语言基础、ArkUI 布局、Ability 生命周期、状态管理、Navigation 路由、权限申请、数据模型、工具类封装、MapKit 地图、定位服务、暗色模式与国际化……这篇文章做两件事回顾整个系列的知识体系以及给出项目可以继续改进的方向让这个教程不只是读完就结束而是成为你继续学习的起点。项目预览一、知识体系回顾1.1 语言与基础01-04知识点关键概念ArkTS 语言interface、class、async/await、装饰器ArkUI 声明式 UIColumn、Row、Stack、Text、Image常量管理static readonly、SCREAMING_SNAKE_CASE资源文件$r()、color.json、string.json、media核心记忆点ArkTS TypeScript 装饰器扩展ArkUI 声明式不是命令式。1.2 Ability 与系统05-09知识点关键概念UIAbility 生命周期onCreate → onWindowStageCreate → onForeground沉浸式全屏setWindowLayoutFullScreen、getWindowAvoidAreaAppStoragesetOrCreate、StorageProp、StorageLinkNavigation 路由NavPathStack、pushPathByName、pop、NavDestination权限申请abilityAccessCtrl、checkAccessToken、requestPermissionsFromUser核心记忆点安全区域高度存 AppStorage → StorageProp 全局响应式Navigation 现代路由不用 Router。1.3 数据与工具10-14知识点关键概念数据模型interface StationData、ResourceStr、export constLoggerhilog、domain/tag/format、日志分级距离计算map.calculateDistance、toFixed(1)、m → kmMapKit 接入MapOptions、MapComponent、MapComponentController坐标系转换WGS84GPS→ GCJ02中国地图、map.convertCoordinate核心记忆点interface 定义数据模型class 封装行为GPS WGS84中国地图 GCJ02必须转换。1.4 地图与交互15-20知识点关键概念Marker 标记MarkerOptions、addMarker、anchorU/anchorV、SVG 图标相机动画CameraPosition、CameraUpdate、animateCameraScaleAnimationfromX/toX/fromY/toY、setDuration、FillMode.FORWARDSMapUtil 封装Observed、单例export const mapUtilbindSheetdetents、dragBar、blurStyle、onWillDismiss核心记忆点Marker 底部对准坐标点anchorV1所有地图操作在 callback 里bindSheet 必须调用 dismiss()。1.5 列表与组件21-25知识点关键概念List ForEachkey 生成函数、LazyForEach大数据量Builder局部/全局、共享父组件状态、vs ComponentLocationKitgetCurrentLocation、WGS84、错误处理暗色模式dark/element/color.json、setColorMode多语言zh_CN/element/string.json、资源优先级核心记忆点Builder 共享状态适合页面内拆分Component 独立适合跨页面复用资源文件自动按设备语言/主题选择代码无感知。二、项目设计的亮点这个项目虽然功能简单但设计上有几个值得学习的亮点2.1 关注点分离做得好页面GasStationPage ← 只关心业务逻辑 ↓ 调用 工具类MapUtil ← 只关心地图操作技术细节 ↓ 调用 KitMapKit、LocationKit← 系统能力页面不知道地图坐标如何转换工具类不知道业务逻辑。层次清晰。2.2 常量管理规范所有魔法数字集中在Constants.etsstatic readonly 全大写命名改动一处全局生效。这个习惯值得在所有项目里坚持。2.3 全局状态管理思路正确安全区域高度用AppStorage存储页面用StorageProp读取动态监听变化。这种模式可以推广到所有需要跨组件/跨页面共享的数据。三、项目可以改进的地方3.1 定位调用次数优化// 现在定位了 3 次moveToMyLocation 1次 getMyLocation 2次mapUtil.moveToMyLocation(mapController);this.currentLatitude(awaitmapUtil.getMyLocation()).latitude;this.currentLongitude(awaitmapUtil.getMyLocation()).longitude;// 优化只定位 1 次letlocationawaitmapUtil.getMyLocation();this.currentLatitudelocation.latitude;this.currentLongitudelocation.longitude;awaitmapUtil.moveToMyLocationByCoord(location,mapController);// 传入已有的位置3.2 Marker 动画的 from 值// 现在放大时 from1缩小时也是 from1不连续letanimationnewmap.ScaleAnimation(Constants.ONE,imageScale,// 永远从 1 开始Constants.ONE,imageScale);// 优化记录当前比例作为起始值letanimationnewmap.ScaleAnimation(this.currentScale,imageScale,// 从当前比例开始this.currentScale,imageScale);this.currentScaleimageScale;3.3 权限被拒绝后引导用户// 现在权限被拒绝只记日志.catch((err:BusinessError){Logger.error(Failed to request permissions from user...);});// 优化弹窗引导用户去设置页.catch((){AlertDialog.show({title:需要定位权限,message:请在设置中开启位置权限否则无法查看附近加油站,confirm:{value:去设置,action:(){openAppSettings(context);}}});});3.4 加油站数据从网络获取// 现在静态数据this.stationInfoListSTATION_LIST;// 优化从后端 API 获取asyncloadStations(){this.isLoadingtrue;try{letresponseawaithttp.request(https://api.example.com/nearby-stations);this.stationInfoListJSON.parse(response.resultasstring);}catch(err){Logger.error(加载数据失败使用本地数据);this.stationInfoListSTATION_LIST;// 降级使用静态数据}finally{this.isLoadingfalse;}}3.5 距离排序// 优化加油站列表按距离由近到远排序this.stationInfoList[...STATION_LIST].sort((a,b){letdistAparseFloat(CalculateUtil.getDistance(this.currentLatitude,this.currentLongitude,a.latitude,a.longitude));letdistBparseFloat(CalculateUtil.getDistance(this.currentLatitude,this.currentLongitude,b.latitude,b.longitude));returndistA-distB;});3.6 完整支持暗色模式// 删除这行强制亮色代码// this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);// 然后在 dark/element/color.json 里补全所有颜色的暗色版本四、可以继续添加的功能如果你想基于这个项目继续练习以下是一些功能扩展方向功能涉及技术加油站详情页Navigation 传参、新页面开发导航功能调用系统导航 AppstartAbility Want收藏加油站PersistentStorage 持久化搜索功能TextInput 组件、数据过滤加载状态骨架屏、LoadingProgress 组件下拉刷新Refresh 组件评分显示自定义 Rating 组件燃油价格网络请求、数据展示路线规划MapKit 路线规划 API五、HarmonyOS 开发的真实体验学完这个系列说说我对 HarmonyOS 开发的整体感受优点ArkUI 声明式 UI 写起来很流畅和 SwiftUI/Compose 体验类似Kit 体系封装了大量系统能力地图、定位这些调用门槛低TypeScript 基础的 ArkTS 入门曲线平滑有前端经验很容易上手状态管理体系State/StorageProp/AppStorage设计合理响应式明确挑战文档质量参差不齐有些 API 的参数说明不够详细部分功能只能在真机上测试地图、定位在模拟器上有限制生态相比 Android/iOS 还在发展中第三方库较少折叠屏、多窗口等适配需要额外工作六、学习路线建议如果你想继续深入 HarmonyOS 开发推荐路线基础本系列 └─ 进阶功能 ├─ 网络请求ohos/axios / http模块 ├─ 本地数据库关系型数据库、首选项 ├─ 多 Ability 应用 └─ 元服务HarmonyOS的小程序 └─ UI 深入 ├─ 自定义动画animateTo、transition ├─ 自定义绘制Canvas └─ 折叠屏适配 └─ 架构进阶 ├─ MVVM 架构模式 ├─ 模块化设计HAR/HSP └─ 性能优化启动速度、渲染性能总结25 篇文章我们一起解析了附近加油站这个项目的每一行代码。从一个陌生的.ets文件到能说清楚每个装饰器的作用、每个 API 的调用方式、每个设计决策背后的原因——这就是这个系列的目标。希望这个系列对你有帮助。HarmonyOS 还很年轻它的生态还在快速发展。现在入坑有机会参与到一个新平台的成长过程中——这是一件挺值得期待的事。代码要写也要想清楚为什么这样写。加油
