鸿蒙移动应用开发项目式教程课件 项目1-人文史哲展示页-任务1-1-2Deveco Studio

鸿蒙移动应用开发项目式教程（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人文史哲展示页1.DevEcoStudio介绍HUAWEIDevEcoStudio（以下简称DevEcoStudio）是基于InteliJIDEACommunity开源版本打造，为运行在HarmonyOS系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEcoStudio还具有如下特点：任务导入知识解析学以致用课堂小结课后拓展1.1DevEcoStudio介绍

HarmonyOS应用/服务开发流畅任务导入知识解析学以致用课堂小结课后拓展1.1DevEcoStudio介绍

2.搭建应用开发环境开始开发HarmonyOS应用前，应首先搭建开发环境。HarmonyOS应用开发环境搭建主要包含以下步骤：DevEcoStudio提供开箱即用的开发体验，将HarmonyOSSDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEcoStudio安装配置流程。HarmonyOSSDK已嵌入DevEcoStudio中，无需额外下载配置。如需进行OpenHarmony应用开发，可通过Settings>OpenHarmonySDK页签下载OpenHarmonySDK。任务导入知识解析学以致用课堂小结课后拓展1.1DevEcoStudio介绍下载DevEcoStudio进入DevEco的下载页面，此处以下载DevEcoStudio5.0.0Release版本为例。请按照如下注解要求完成下载。下载时，建议DevEcoStudio以及SDK文件安装路径不要包含中文或空格。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍安装DevEcoStudio（1）下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEcoStudio安装向导。在如下界面选择安装路径，默认安装于C:\ProgramFiles路径下，也可以单击浏览（B）...指定其他安装路径，然后单击“下一步”。修改安装路径时，建议DevEcoStudio安装路径不要包含中文或空格。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-3

选择安装位置安装DevEcoStudio（2）打开DevEcoStudio的安装包后，点击下一步进入安装位置选择，选择好后进入下一步安装组件的选择。安装组件的选择操作如下所示：任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-4

安装选项安装DevEcoStudio（3）安装完成后，单击“完成”即可完成安装。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-5

完成安装安装DevEcoStudio（4）首次打开DevEcoStudio，会进入配置向导界面，单击“Agree”按钮同意相应的条款。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-6配置向导安装DevEcoStudio（5）单击“OK”按钮跳过导入设置。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-7导入设置诊断开发环境进入DevEcoStudio配置界面，首先需要进行开发环境诊断，识别开发环境是否完备。可以在欢迎界面单击“Diagnose”按钮进行诊断，如图1-8所示。如果已经打开了工程开发界面，也可以选择菜单项“Help”（帮助）→“DiagnosticTools”（诊断工具）→“DiagnoseDevelopmentEnvironment”（诊断开发环境）进行诊断。任务导入学以致用知识解析课堂小结课后拓展1.1DevEcoStudio介绍图1-7开发环境诊断在确认开发环境完备后，就完成了DevEcoStudio的安装及配置。

DevEcoStudio5.0.0关键特性DevEcoStudio5.0.0Release配套支持HarmonyOSNEXT版本的应用及服务开发，新提供了引入工程外模块代码支持编码、构建、调试能力、支持构建字节码har包、支持webview场景调优、支持ArkTS内存泄漏自动检测等功能，持续提升应用及服务开发效率。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性智能编辑支持代码高亮、代码智能补全、代码错误检查、代码自动跳转、代码格式化、代码查找、代码重构、提升代码编写效率。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性灵活构建全新的轻量级构建工具DevEcoHvigor，支持灵活构建任务，一键完成应用的编译打包。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性多场景深度调优DevEcoProfiler调优工具支持应用启动、卡顿丢帧、CPU调度等多场景调优深度分析，提升HarmonyOS应用质量。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性应用体验支持开发阶段对应用及元服务进行兼容性、性能、UX测试、功耗、稳定性以及最佳实践的检测。提升应用及元服务质量及上架成功率。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性跨语言调试支持ArkTS&C++跨语言调试、汇编调试、lldb命令行调试、反向调试、内存视图分析、智能跳转和数据断点等丰富调试能力。任务导入学以致用知识解析课堂小结课后拓展1.2工具特性1.3小结本任务主要讲解了HarmonyOS的集成开发工具，首先介绍了DevEcoStudio工具、安装步骤及诊断流程，后面会讲解调试工具、快速入门、工程结构。本任务的知识作为HarmonyO