鸿蒙移动应用开发项目式教程课件 项目1-人文史哲展示页-任务1-1-4 调试工具介绍

鸿蒙移动应用开发项目式教程（AI助学）项目1ArkUI（方舟开发框架）—人文史哲展示页任务1-1创建人文史哲展示页基本布局任务1-2创建轮播图专区任务1-3创建人文历史专区任务1-4创建高校科普、戏曲文化专区

鸿蒙学习路线1.1人文史哲展示页

项目背景1.1人文史哲展示页

在日常生活中，传统的阅读方式受限于时间和空间，人们经常需要利用碎片化的时间获取和消化知识。随着HarmonyOS的兴起，其全场景、全连接的设计理念为开发跨平台、高效互动的网页提供了强大的技术支持。本项目旨在利用HarmonyOS中的ArkUI，开发一个集知识展示、互动体验、个性化学习于一体的人文史哲展示页，以满足不同用户群体对人文史哲知识的多元化需求。无论是在通勤途中、休息时间，还是在居家环境或咖啡馆等场所，用户都可以通过智能手机、平板计算机等设备轻松访问该展示页，获取高质量的人文史哲知识。

学习目标素质目标知识目标素质1.掌握HarmonyOS的全场景分布式架构设计；2.掌握HarmonyOS的开发环境配置；3.掌握如何使用Row和Column组件来构建基本的页面布局；4.掌握如何在Grid组件中定义网格的行数、列数及每行、每列的尺寸。能力目标1.理解HarmonyOS跨设备协同、资源高效利用等核心特性；2.了解并掌握HarmonyOS提供的开发工

具

集、应用程序接口（ApplicationProgramInterface，API）及用户界面（UserInterface，UI）组件库；3.深入理解Row和Column是HarmonyOS布局中的基础组件。1.加强对新技术、新工具的关注与学习，不断提升自身在HarmonyOS开发领域的专业能力；2.加强对自身工作的反思与总结，不断寻求提升工作效率和质量的方法与途径。；3.培养团队合作精神、用户导向思维及职业素养与责任心。1.1人文史哲展示页知识点预览#知识点重点难点应用说明1HarmonyOS概念√理解HarmonyOS基本概念2HarmonyOS技术架构√区分HarmonyOS技术架构层次3DevEcoStudio√√掌握开发工具DevEcoStudio的使用4工程创建√√会创建项目工程5TypeScript基础语法√√√掌握TypeScript基础语法6ArkUI中的布局容器√√√掌握ArkUI中的布局容器1.1人文史哲展示页知识解析任务导入学以致用课堂小结课后拓展预期目标与成果图1-1

人文史哲展示页效果1.1人文史哲展示页任务分析知识解析任务导入学以致用课堂小结课后拓展

人文史哲展示页，包括标题、轮播图、人文历史专区、高校科普专区、戏曲文化专区等栏目，需要通过Row、Column组件进行页面布局设计以及相关参数配置。1.1人文史哲展示页

调试与开发辅助工具工欲善其事必先利其器，为了帮助开发者更好的进行应用开发。DevEcoStudio提供了如下调试工具：任务导入知识解析学以致用课堂小结课后拓展1.1调试工具介绍

Previewer预览器任务导入知识解析学以致用课堂小结课后拓展1.1调试工具介绍

Previewer实时预览实时预览：在开发界面UI代码过程中，对UI组件进行修改后，保存代码预览器就会立即刷新预览结果。如果修改了组件的属性，则会实时（亚秒级）刷新预览结果。实时预览默认开启，如果不需要实时预览，请单击预览器右上角

按钮，关闭实时预览功能。任务导入知识解析学以致用课堂小结课后拓展1.1调试工具介绍

Previewer动态预览在预览器界面，可以在预览器中操作应用/服务的界面交互动作，如单击、跳转、滑动等，与应用/服务运行在真机设备上的界面交互体验一致。任务导入知识解析学以致用课堂小结课后拓展1.1调试工具介绍使用ArkTS预览器的方法在创建好的工程目录中，打开任意一个.ets文件，通过如下任意一种方式打开预览器开关。注意，如打开其他文件将无法开启预览器，且会出现报错提示。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍

Inspector双向预览DevEcoStudio提供HarmonyOS应用/服务的UI预览界面与源代码文件间的双向预览功能，支持ets文件、hml文件预览器界面的双向预览；在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会自动同步到代码编辑器中修改源码，并实时的刷新UI界面；如果在代码编辑器中修改源码，也会实时刷新UI界面，并更新组件树信息及组件属性。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍开启Inspector双向预览开启双向预览功能后，支持代码编辑器、UI界面和ComponentTree组件树三者之间的联动：选中三者中任何一个，其他两者都会联动显示。例如：选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时对应的代码块高亮显示。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍模拟器介绍支持的设备：手机、折叠屏、平板、2in1支持的平台：Macarm、Windowsx86、Macx86支持的API版本：API11、API12任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍模拟器特点DevEcoStudio提供了模拟器（Emulator），为开发者提供了运行和调试HarmonyOS应用/服务的便捷途径。模拟器还原了真实设备的基本功能，如屏幕旋转、音量调节、模拟的硬件传感器和指定设备的位置等。这使得开发者无需拥有不同类型的物理设备，就可以在各种虚拟环境中轻松测试应用程序。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍远程模拟器：RemoteEmulatorDevEcoStudio提供的RemoteEmulator是远程模拟器，可以运行和调试Phone、Tablet、Car、TV和Wearable设备的应用。在RemoteEmulator上运行应用兼容签名与不签名两种类型的HAP。RemoteEmulator每次使用时长为2小时，到期前可申请延长使用时间。如果RemoteEmulator到期释放后，可以重新申请资源。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍单设备远程模拟器运行应用/服务在DevEcoStudio菜单栏，单击Tools>DeviceManager。在RemoteEmulator页签中，单击SignIn，在浏览器中弹出华为开发者联盟帐号登录界面。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍登录华为帐号请输入已实名认证的华为开发者联盟帐号的用户名和密码进行登录。登录后，请单击界面的允许按钮进行授权。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍拉起远程模拟器授权成功页面如下左图，重新切换回DeviceManager界面，会出现如下右图界面，在SingleDevice中选择设备单击

拉起远程模拟器（同一时间只能启动一个设备）。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍应用/服务运行在单设备远程模拟器单击DevEcoStudio的Run>Run“模块名称”或单击

启动按钮。DevEcoStudio会启动应用/服务的编译构建，完成后应用/服务即可运行在RemoteEmulator上。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍本地模拟器与远程模拟器的区别任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍资源准备任务导入学以致用知识解析课堂小结课后拓展单击File>Settings>SDK（macOS系统为DevEcoStudio>Preferences>SDK），下拉框选择HarmonyOS，勾选并下载Platforms下的System-image-phone和Tools下的Emulator资源。1.1调试工具介绍创建本地模拟器任务导入学以致用知识解析课堂小结课后拓展单击菜单栏的Tools>DeviceManager，在LocalEmulator页签，单击设置本地模拟器的存储路径LocalEmulatorLocation。单击右下角的NewEmulator按钮，创建一个本地模拟器。1.1调试工具介绍自定义设备参数任务导入学以致用知识解析课堂小结课后拓展在模拟器配置界面，可以选择一个默认的设备模板，也可以在该界面下载、更新或删除不同设备的模拟器镜像。单击Edit可以设置镜像文件的存储路径。选择模板，单击Next，核实确定需要创建的模拟器的名称，内存和存储空间，然后单击Finish创建模拟器。1.1调试工具介绍下载镜像文件任务导入学以致用知识解析课堂小结课后拓展设置完设备参数，单击Next，可以看到模拟器的镜像信息，如API、Version、CPU/ABI等信息。下载完镜像文件单击Next，核实确定需要创建的模拟器信息后，单击Finish创建本地模拟器。1.1调试工具介绍应用/服务运行在本地模拟器在设备管理器页面，单击

启动模拟器。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍连接本地物理设备任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍本地物理设备连接成功任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍DevEcoStudio与真机设备连接成功，会出现对应的设备名称。为什么需要远程真机？任务导入学以致用知识解析课堂小结课后拓展如果开发者没有真机设备资源，则不能很方便的调试和验证HarmonyOS应用。为方便开发者，DevEcoStudio提供了RemoteDevice远程真机设备资源供开发者使用，减少开发成本。1.1调试工具介绍远程真机介绍目前，远程真机支持Phone和Wearable设备，开发者使用远程真机调试和运行应用时，同本地物理真机设备一样，需要对应用/服务进行签名才能运行。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍为应用/服务进行签名（自动化签名方案）进入File>ProjectStructure>Project>SigningConfigs界面，勾选“Automaticallygeneratesignature”，即可完成签名。如果未登录，请先单击SignIn进行登录，然后自动完成签名。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍真机设备运行应用菜单栏中，单击Run>Run“模块名称”，运行应用。任务导入学以致用知识解析课堂小结课后拓展1.1调试工具介绍DevEcoStudio启动HAP的编译构建和安装。安装成功后，Phone/Tablet会自动运行安装的HarmonyOS应用/服务。使用远程真机运行应用任务导入学以致用知识解析课堂小结课后拓展运程真机需要对应用进行签名才能运行，除此需要注意的是，远程真机每次释放后重新申请，服务端分配的设备都不一样。因此，每次重新申请远程真机后，都需要对应用/服务重新进行