鸿蒙移动应用开发项目式教程课件 项目1-人文史哲展示页-任务1-1-3（工程创建）

鸿蒙移动应用开发项目式教程（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）双击桌面图标，打开开发工具DevEcoStudio，创建工程有两种情况：第一次打开，会出现这样的页面向导，点击CreateHarmonyOSProject，创建新工程。如已经建立了HarmonyOS工程，想要创建新的工程，请点击菜单栏选择File>New>CreateProject来创建一个新工程。1.1创建工程任务导入知识解析学以致用课堂小结课后拓展选择工程模板（2）根据工程创建向导，选择HarmonyOS模板库，选择模板“EmptyAbility”，点击Next进行下一步配置。1.1创建工程任务导入知识解析学以致用课堂小结课后拓展工程模板介绍工程模板支持的开发语言及模板说明如下表所示：1.1创建工程任务导入知识解析学以致用课堂小结课后拓展配置工程参数（1）进入配置工程界面，选择参数，点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。1.1创建工程任务导入知识解析学以致用课堂小结课后拓展配置工程参数（1）应用包名要求较多，开发者需根据以下要求完成配置信息填写。a．必须为以点号（.）分隔的字符串，且至少包含3段，每段中仅允许使用英文字母、数字、下画线（_），如“com.bossay.myapplication”。b．首段字符串以英文字母开头，非首段字符串以数字或英文字母开头，每一段字符串以数字或者英文字母结尾，如“com.01example.myapplication”。c．不允许多个点号（.）连续出现，如“com.example..myapplication”是不允许使用的。d．长度为7～128个字符。1.1创建工程任务导入知识解析学以致用课堂小结课后拓展配置工程参数（2）1.1创建工程任务导入知识解析学以致用课堂小结课后拓展创建完成通过以上步骤，工程创建完成后，DevEcoStudio会自动进行工程的同步。1.1创建工程任务导入知识解析学以致用课堂小结课后拓展认识DevEcoStudio界面进入DevEcoStudio后，可以看到整个界面大致可以分为4个部分，分别是代码编辑区、通知栏、工程目录区及预览区，如图所示。任务导入学以致用知识解析课堂小结课后拓展1.2DevEcoStudio界面认识DevEcoStudio界面（1）代码编辑区

界面中间的是代码编辑区，开发者可以在这里修改代码，以及切换显示的文件。按住“Ctrl”键并滚动鼠标滚轮，可以实现界面的放大与缩小。（2）通知栏

在代码编辑区下方的通知栏，主要用于显示常用信息。其中Build是项目运行时的信息栏；Problems是当前工程错误与提醒信息栏；Terminal是命令行终端，在这里执行命令行操作；PreviewerLog是预览区日志输出栏；Log是模拟器和真机运行时的日志输出栏。（3）工程目录区

界面左侧为工程目录区。任务导入学以致用知识解析课堂小结课后拓展1.2DevEcoStudio界面认识DevEcoStudio界面（4）预览区

单击界面右上角的“Previewer”按钮

，可以预览相应的文件UI展示效果。预览区提供了一些基本功能，包括旋转设备屏幕、切换显示设备及多设备预览等。单击“旋转”按钮

，可以切换竖屏和横屏显示的效果，如图。任务导入学以致用知识解析课堂小结课后拓展1.2DevEcoStudio界面认识DevEcoStudio界面单击预览区右上角的“组件预览”按钮

，可以进入组件预览界面，如图所示。任务导入学以致用知识解析课堂小结课后拓展1.2DevEcoStudio界面认识DevEcoStudio界面通过组件预览模式可以预览当前组件对应的代码块。单击某一组件，代码编辑区会框选对应的代码部分，右侧组件树会显示对应组件的基本属性，如图所示。任务导入学以致用知识解析课堂小结课后拓展1.2DevEcoStudio界面工程级目录在DevEcoStudio中，基本工程目录分为工程级目录和模块级目录，工程级目录如图所示。任务导入学以致用知识解析课堂小结课后拓展1.3基本工程目录①AppScope用于存放应用所需要的全局资源文件，包含resources文件夹和配置文件app.json5。AppScope\resources\base中包含element和media两个文件夹，其中element文件夹主要用于存放公共的字符串、布局文件等资源，media文件夹用于存放全局的公共多媒体资源文件。②oh_modules文件夹用于存放工程依赖的源文件。③entry文件夹用于存放HarmonyOS应用的代码、资源等。模块级目录entry\src目录中主要包含main文件夹、ohosTest文件夹，以及模块级的配置文件。模块级目录如图所示。任务导入学以致用知识解析课堂小结课后拓展1.3基本工程目录①main文件夹中，ets文件夹用于存放.ets文件；resources文件夹用于存放模块内的多媒体资源文件及布局文件等，module.json5文件为模块的配置文件。②ohosTest是单元测试目录。③build-profile.json5是模块级配置文件，包括编译构建配置项。④hvigorfile.ts文件是模块级构建脚本。⑤oh-package.json5是模块级依赖配置信息文件。模块级目录进入src\main\ets目录，其中有entryability、pages两个文件夹。①entryability文件夹用于存放ability文件，用于当前ability应用逻辑和生命周期管理。②pages文件夹用于存放UI相关代码文件，应用开发初始会生成一个Index.ets文件，如图所示。任务导入学以致用知识解析课堂小结课后拓展1.3基本工程目录1.4小结本任务主要讲解了Harmo