鸿蒙系统应用开发项目化教程 课件全套 项目1-6 建立HarmonyOS开发环境- 开发新闻客户端

鸿蒙应用开发项目一建立HarmonyOS开发环境要成为一名HarmonyOS应用程序开发工程师，首先需要正确搭建HarmonyOS应用程序开发环境。正确搭建HarmonyOS应用程序开发环境有三个步骤，首先需要了解HarmonyOS系统架构和技术特性，然后根据现有操作系统选择合适的HarmonyOS开发工具进行安装和配置，最后通过创建一个简单的HarmonyOS应用程序来测试开发环境是否已经安装成果，鸿蒙SDK和模拟器能否正常使用。因此，本项目可以分解为认识HarmonyOS、安装DevEcoStudio工具和创建第一个HarmonyOS应用程序三个子任务。了解HarmonyOS的概念与特性；了解HarmonyOS与OpenHarmony的关系。知识目标能够搭建HarmonyOS开发环境；能够创建并运行HarmonyOS应用程序。能力目标阅读并理解软件技术文档；理解鸿蒙系统开发是突破技术壁垒，实现系统国产化的有效途径。素养目标教学目标任务一认识HarmonyOS应用开发岗位要求任务二

安装DevEcoStudioforHarmonyOS任务三

创建并运行第一个HarmonyOS移动应用程序目录CONTENTS任务一认识HarmonyOS应用开发岗位要求任务目标及重点难点知识清单01HarmonyOS的发展历程02HarmonyOS系统架构03HarmonyOS技术特性04HarmonyOS应用场景知识清单01HarmonyOS的发展历程HarmonyOS升级至2.0版本HarmonyOS4正式发布HarmonyOS3开发者预览版正式发布华为正式发布HarmonyOS2012年2019年2020年2021年2023年华为开始规划自有操作系统“鸿蒙”知识清单02HarmonyOS系统架构知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单03HarmonyOS技术特性多种设备之间通过HarmonyOS可以实现硬件互助和资源共享，依赖的关键技术主要包括分布式软总线、分布式数据管理、分布式任务调度和分布式设备虚拟化等知识清单04HarmonyOS应用场景华为“1+8+N”战略产品示意图HarmonyOS是面向AIoT的下一代操作系统。AIoT=AI+IoT。AI（ArtificialIntelligence）就是人工智能的意思，IoTInternetofThings）就是物联网的意思，也就是说AIoT融合了这两项技术。AI的内核是智能化，IoT的内核是万物互联。HarmonyOS应用开发和安卓应用开发的区别任务实施HarmonyOS应用开发人员需求数量HarmonyOS应用开发人员岗位的招聘要求了解HarmonyOS发展历程、系统架构、技术特性和应用场景，可以帮助进一步分析HarmonyOS应用开发岗位要求。任务实施01HarmonyOS应用开发人员需求数量仅从智能手机应用来看，从HarmonyOS发布以来，迅速成为全球仅次于安卓、iOS外的第三大智能手机操作系统。决定一款操作系统成功的关键在于应用生态，其衡量指标就是用APP的数量，而APP数量的关键又在于开发者数量。开发者数量多，APP就多，生态才能建立起来。目前苹果iOS在全球开发者人数已经超2000万，遍布77个国家，开发的APP超过500万个，苹果iOS在中国就有440万开发者，开发出超过100万个APP。谷歌虽不曾公布具体的数据，但根据有关机构的分析，安卓开发者数量已经超过了苹果，APP数量也超过了苹果，也就是说开发者数量超过了2000万，APP数量也超过了500万。而目前HarmonyOS生态的开发者数量为120万，原生APP数量仅为300多个。虽然HarmonyOS兼容安卓应用，但为了建立鸿蒙应用生态，对HarmonyOS应用开发者的需求量是十分巨大的。任务实施02HarmonyOS应用开发和安卓应用开发的区别HarmonyOS能够兼容安卓应用。但HarmonyOS应用开发与安卓应用开发是有区别的。HarmonyOS是微内核设计，安卓是基于Linux的宏内核设计。为了兼容安卓应用，目前HarmonyOS包含与安卓相同的Linux内核。在未来HarmonyOS生态成熟后，将会去掉Linux内核，只保留鸿蒙微内核，最终实现理想的智能终端分布式系统。相对来说，微内核开发难度大，但是系统稳定性高。HarmonyOS目前可以兼容所有的安卓应用，同时支持等多终端设备。任务实施03HarmonyOS应用开发人员岗位的招聘要求15423熟悉JavaScript/Typescript、React、鸿蒙HiLink、FAJS开发框架（或微信小程序原生框架）、或类似状态管理组件等具有良好编码风格，有较强的独立工作能力和团队合作精神思路清晰，思维敏捷，快速的学习能力熟悉Android或者iOS等其他移动平台应用开发能根据产品定义开发鸿蒙系统的应用任职要求任务拓展OpenHarmony和HarmonyOS有什么区别常见问题及其解决方法了解HarmonyOS系统1学习编程语言和工具2掌握HarmonyOS的UI框架和设计理念3迁移现有Android应用4开发新的HarmonyOS应用5持续学习和跟进6如何从Android开发岗位迁移到HarmonyOS开发岗位任务小结完成的任务学到的知识HarmonyOS发展历程HarmonyOS系统架构HarmonyOS技术特性HarmonyOS应用场景通过本任务认识HarmonyOS，明确鸿蒙应用开发岗位要求，了解OpenHarmony和HarmonyOS的区别，为后续搭建鸿蒙开发环境和应用开发打下了基础。任务二安装DevEcoStudioforHarmonyOS任务目标及重点难点知识清单01DevEcoStudio工具HUAWEIDevEcoStudio（以下简称DevEcoStudio）是基于IntelliJIDEACommunity开源版本打造，面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用/服务开发。通过使用DevEcoStudio，开发者可以更高效的开发具备HarmonyOS分布式能力的应用/服务，进而提升创新效率。DevEco

Studio的特点知识清单02HarmonyOSSDK及工具链安装DevEcoStudio任务实施下载DevEcoStudio配置DevEcoStudio任务实施01下载DevEcoStudio/consumer/cn/deveco-studio/archive/任务实施02安装DevEcoStudio（1）Windows环境。下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEcoStudio安装向导，在如下安装选项界面勾选DevEcoStudio后，点击Next，直至安装完成。（2）macOS环境。下载完成后，双击下载的“deveco-studio-xxxx.dmg”软件包。在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。任务实施03配置DevEcoStudioHarmonyOS应用/服务支持APIVersion4～APIVersion9，首次使用DevEcoStudio，该工具的配置向导会引导用户下载SDK及工具链。配置向导默认下载APIVersion9的SDK及工具链，如需下载APIVersion4～APIVersion8的SDK及工具链，可在工程配置完成后，进入HarmonyOSSDK界面手动下载任务实施03配置DevEcoStudio运行已安装的DevEcoStudio，若是首次使用，则选择Donotimportsettings单选按钮，单击OK按钮安装Node.js与Ohpm。可以指定本地已安装的Node.js或Ohpm（Node.js版本要求为v14.19.1及以上，且低于v17.0.0；对应的npm版本要求为6.14.16及以上）路径位置在SDKSetup界面单击文件夹按钮，设置HarmonyOSSDK存储路径（HarmonyOSSDK存储路径中不能包含中文字符）在弹出的SDK下载信息界面中单击Next按钮，并在弹出的HarmonyOSSDKLicenseAgreement界面中阅读License协议，须同意License协议后，单击Next按钮开始下载SDK等待Node.js、Ohpm和SDK下载完成后，单击Finish按钮，进入DevEcoStudio欢迎页12345任务拓展

DevEcoStudio开发环境依赖于网络环境，需要连接网络才能确保工具的正常使用。一般来说，如果使用的是个人或家庭网络，那么是不需要配置代理信息的；只有在部分企业网络受限的情况下，才需要配置代理信息。

如果首次使用DevEcoStudio，那配置向导中会出现SetupHTTPProxy界面，如果用户通过代理服务器上网，可以通过配置代理的方式来解决，包括配置DevEcoStudio代理、npm代理和Ohpm代理。配置DevEcoStudio代理配置NPM代理配置Ohpm代理常见问题及其解决方法HarmonyOSSDK无法安装

修改DevEcoStudio快捷方式的兼容性，以管理员身份运行此程序任务小结完成的任务学到的知识DevEcoStudio工具HarmonyOSSDK及工具链在本任务中，完成了DevEcoStudio的安装与配置。以管理员身份启动DevEcoStudio能正常进入开发工具主界面，确保HarmonyOSSDK和相关工具已经正确安装并配置，表明任务测评通过，这样就为后续应用的开发搭建了必需的开发环境任务三创建并运行第一个HarmonyOS移动应用程序任务目标及重点难点知识清单01HarmonyOS应用/服务开发流程使用DevEcoStudio，只需要按照如下几步，即可轻松开发并上架一个HarmonyOS应用/服务到华为应用市场开发HarmonyOS应用/服务使用DevEcoStudio开发应用或者服务发布HarmonyOS应用/服务HarmonyOS应用/服务开发一切就绪后，需要将应用发布至华为应用市场开发准备注册一个华为开发者账号，并完成实名认证运行、调试和测试HarmonyOS应用/服务HarmonyOS应用/服务开发完成后，可以使用真机进行调试，或者使用模拟器进行调试使用Previewer工具预览程序界面任务实施创建HelloWorld项目使用模拟器运行HelloWorld任务实施01创建HelloWorld项目（1）打开DevEcoStudio，在欢迎页点击CreateProject，创建一个新工程；（2）根据工程创建向导，选择创建Application应用或AtomicService原子化服务；（3）填写工程相关信息，保持默认值即可；（4）工程创建完成后，DevEcoStudio会自动进行工程的同步。任务实施02使用Previewer工具预览程序运行效果（1）在HelloWorld项目左边目录结构中找到Index.ets文件并打开（2）单击右侧边框栏中的Previewer工具，可以看到程序运行效果任务实施03使用远程模拟器运行HelloWorld（1）在DevEcoStudio菜单栏中执行Tools→DeviceManager，找到远程模拟器；（2）在RemoteEmulator标签中单击SignIn按钮，弹出华为开发者联盟账号（实际一般用“账号”，软件中通常为“帐号”）登录界面，输入已实名认证的华为开发者联盟账号的用户名和密码进行登录；（3）成功登录后，单击界面中的“允许”按钮进行授权；（4）在弹出的设备列表中，选择设备P50，并单击启动按钮，运行远程模拟器；（5）单击DevEcoStudio工具栏中的图标运行项目，或者使用默认快捷键<Shift+F10>（macOS为<Ctrl+R>HarmonyOS）运行项目；（6）DevEcoStudio会启动HarmonyOS应用/服务的编译构建，完成后HarmonyOS应用/服务即可运行在远程模拟器上。任务实施03使用远程模拟器运行HelloWorld任务拓展配置NPM代理配置Ohpm代理HarmonyOSAPP工程结构常见问题及其解决方法输入华为账号开发者联盟账号后，未出现“允许”按钮，浏览器界面无跳转

使用浏览器登录华为帐号后，如果帐号已经实名认证，但还是未出现授权的“允许”按钮，浏览器界面也未跳转或提示。

出现该问题的原因可能是浏览器不兼容导致，模拟器登录授权在Chrome、IE11和Safari浏览器中进行过充分验证，建议您将默认浏览器设置为其中一种。

以Windows10为例，打开控制面板>程序>默认程序>设置默认程序，更改或设置默认浏览器任务小结完成的任务学到的知识HarmonyOS应用/服务开发流程通过此任务，能够运行第一个HarmonyOS移动应用程序，且能够运用Previewer工具和远程模拟器查看界面运行效果。特别注意的是，远程模拟器需要实名认证的华为开发者联盟账号登录以后才能使用，推荐使用个人银行卡或者身份证进行实名认证。——感谢观看——THANKS长沙民政职业技术学院鸿蒙应用开发开发计算器本项目需要实现一个简单的计算器应用。该应用可进行简单的加、减、乘、除运算；单击C按钮可清除结果显示区；输入数字和运算符后可即时运算；输入等号后，可计算出结果并显示在结果区。项目二开发计算器任务一实现计算器界面任务二

实现计算器计算逻辑目录CONTENTSPART-01工程中核心文件的关系工程中核心文件的关系新建一个工程MyCal,程序将默认生成如右图的目录结构，其中entry是项目下的一个工程模块。有几个文件需要关注，分别是：module.json5、EntryAbility.ts、Index.ets。工程中核心文件的关系module.json5是模块配置文件。一个应用里可以有多个Ability，每次在工程里通过右键新建一个ability，该配置文件将新增一个ability配置。但只有一个Ability对象可以将"skills"的值设置为{"entities":["entity.system.home"],"actions":["action.system.home"]}，代表该Ability对象为程序启动后第一个加载的Ability。工程中核心文件的关系UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口EntryAbility.ts中以on开头的方法都是生命周期函数。其中onWindowStageCreate通过windowStage.loadContent方法指明需要加载的页面文件工程中核心文件的关系打开pages/Index.ets，Index.ets文件由ArkTS语言编写。应用的页面布局都在后缀为ets的文件中完成Build()方法中，可以完成页面的布局。注意：build方法里只能由一个根布局。比如右图中，Column()是build()的直接孩子，它没有兄弟，这里的Column(）就是一个列布局，是本页面的唯一的根布局工程中核心文件的关系@Entry、@Component和@State都是装饰器。@Component表示这是个自定义组件；@Entry则表示这是个入口组件；@State表示这是组件中的状态变量，这个变量变化会触发UI刷新。ArkTS中默认内置的基础组件、容器组件、媒体组件、绘制组件、画布组件等各种组件，开发者可以直接调用，如示例中的Column、Text、Divider、Button等。工程中核心文件的关系@Component实现自定义组件；@Entry则表示这是个入口组件；PART-02常见布局常见布局弹性布局栅格布局网格布局层叠布局12345线性布局常见布局—线性布局线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。根据不同的排列方向，选择使用Row或Column容器创建线性布局，通过调整space，alignItems，justifyContent属性调整子组件的间距，水平垂直方向的对齐方式。常见布局—线性布局space的作用及使用方法常见布局—线性布局space的作用及使用方法常见布局—线性布局alignItems的作用及使用方法常见布局—线性布局justifyContent的作用及使用方法在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。自适应拉伸

@Entry@ComponentstructBlankExample{build(){Column(){Row(){Text('Bluetooth').fontSize(18)Blank()Toggle({type:ToggleType.Switch,isOn:true})}.backgroundColor(0xFFFFFF).borderRadius(15).padding({left:12}).width('100%')}.backgroundColor(0xEFEFEF).padding(20).width('100%')}}常见布局—线性布局自适应缩放自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。第一种方法：父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。第二种方法：父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。常见布局—线性布局自适应缩放第一种方法：父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。Column(){Text('1:2:3').width('100%')Row(){Column(){Text('layoutWeight(1)').textAlign(TextAlign.Center)

}.layoutWeight(2).backgroundColor(0xffd306).height('100%')

Column(){Text('layoutWeight(2)').textAlign(TextAlign.Center)

}.layoutWeight(4).backgroundColor(0xffed97).height('100%')Column(){Text('layoutWeight(6)').textAlign(TextAlign.Center)

}.layoutWeight(6).backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常见布局—线性布局自适应缩放第二种方法：父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。Column(){Row(){Column(){Text('leftwidth20%').textAlign(TextAlign.Center)

}.width('20%').backgroundColor(0xffd306).height('100%')Column(){Text('centerwidth50%').textAlign(TextAlign.Center)

}.width('50%').backgroundColor(0xffed97).height('100%')

Column(){Text('rightwidth30%').textAlign(TextAlign.Center)

}.width('30%').backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常见布局—线性布局常见布局—层叠布局层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。通过层叠容器Stack实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。对齐方式设置子元素在容器内的对齐方式。支持左上（TopStart），上中（Top），右上（TopEnd），左（Start），中（Center），右（End），左下（BottomStart），中下（Bottom），右下（BottomEnd）九种对齐方式Stack({alignContent:Alignment.BottomStart}){…}常见布局—层叠布局层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。通过层叠容器Stack实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。Z序控制Stack容器中兄弟组件显示层级关系可以通过zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

Stack({alignContent:Alignment.BottomStart}){Column(){Text('Stack子元素1').fontSize(20)}.width(100).height(100).backgroundColor(0xffd306).zIndex(2)Column(){Text('Stack子元素2').fontSize(20)}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)Column(){Text('Stack子元素3').fontSize(20)}.width(200).height(200).backgroundColor(Color.Grey)}.margin({top:100}).width(350).height(350).backgroundColor(0xe0e0e0)常见布局—弹性布局弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。容器：Flex组件作为Flex布局的容器，用于设置布局相关属性。子组件：Flex组件内的子组件自动成为布局的子组件。主轴：Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。交叉轴：垂直于主轴方向的轴线。交叉轴起始的位置称为交叉轴首部，结束位置称为交叉轴尾部。几个重要概念常见布局—弹性布局创建一个Flex({direction:FlexDirection.Row}){…}为例，主轴方向为Row,代表横向。交叉轴为纵向。常见布局—弹性布局弹性布局可通过Flex组件提供的Flex接口创建。如下：Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})，参数direction决定主轴的方向，即子组件的排列方向。可选值有Row、RowReverse、Column、ColumnReverse弹性布局的换行方式常见布局—弹性布局默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置子组件换行方式。可选值有：FlexWrap.NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。FlexWrap.Wrap：换行，每一行子组件按照主轴方向排列。FlexWrap.WrapReverse：换行，每一行子组件按照主轴反方向排列。常见布局—弹性布局FlexWrap.NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。弹性布局的换行方式常见布局—弹性布局弹性布局的换行方式FlexWrap.Wrap：换行，每一行子组件按照主轴方向排列。FlexWrap.WrapReverse：换行，每一行子组件按照主轴反方向排列。常见布局—弹性布局弹性布局的换行方式主轴对齐：通过justifyContent参数设置在主轴方向的对齐方式，存在下面六种情况常见布局—弹性布局弹性布局的换行方式交叉轴对齐：可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式ItemAlign.Start：交叉轴方向首部对齐ItemAlign.Center：交叉轴方向居中对齐ItemAlign.End：交叉轴方向底部对齐交叉轴方向常见布局—弹性布局弹性布局的换行方式交叉轴对齐：可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸ItemAlign.Baseline：交叉轴方向文本基线对齐交叉轴方向常见布局—弹性布局弹性布局的换行方式子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems默认配置

Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){//容器组件设置子组件居中Text('alignSelfStart').width('25%').height(80)

.alignSelf(ItemAlign.Start)//子组件自己设置为首部对齐.backgroundColor(0xF5DEB3)}.width('90%').height(220).backgroundColor(0xAFEEEE)常见布局—弹性布局使用弹性布局，可以实现子组件沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中的效果

@Entry@ComponentstructFlexExample{build(){Column(){Column({space:5}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)Text('2').width('30%').height(50).backgroundColor(0xD2B48C)Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}.width('100%')}}常见布局—网格布局网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的页面均分能力，子组件占比控制能力。通过Grid容器组件和子组件GridItem实现，Grid用于设置网格布局相关参数，GridItem定义子组件相关特征（1）容器组件尺寸发生变化时，所有子组件以及间距等比例调整，实现布局的自适应能力。（2）支持自定义网格布局行数和列数，以及每行每列尺寸占比。（3）支持设置网格布局中子组件的行列间距。（4）支持设置子组件横跨几行或者几列。优势常见布局—网格布局行列数量占比：通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。

Grid(){ForEach(this.Number,(num:string)=>{GridItem(){Text(`列${num}`).fontSize(16).textAlign(TextAlign.Center).backgroundColor(0xd0d0d0).width('100%').height('100%').borderRadius(5)}})

}.columnsTemplate('1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height(100)一行四列常见布局—网格布局通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。可选值包括Row，RowReverse，Column，ColumnReverse四种情况。排列方式常见布局—网格布局行列间距columnsGap用于设置网格子组件GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距Grid().columnsTemplate('1fr1fr1fr1fr').columnsGap(10).rowsGap(20)常见布局—网格布局网格子组件GridItem设置子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格Grid(){GridItem(){Text('4').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.columnStart(4).columnEnd(5)//4从第四列到第五列}.columnsTemplate('1fr1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)一行五列，第四列做了列合并常见布局—网格布局网格子组件GridItem设置子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格Grid(){

GridItem(){Text('5').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.rowStart(2).rowEnd(3)//5子组件从第二行到第三行}.columnsTemplate('1fr').rowsTemplate(‘1fr1fr1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)三行一列，第二行做了行合并PART-03常见组件常见组件组件是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。组件类型主要组件基础组件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、PatternLock、PluginComponent、Progress、QRCode、Radio、Rating、RemoteWindow、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent容器组件AbilityComponent、AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、、GridContainer、GridCol、GridRow、Grid、GridItem、List、ListItem、ListItemGroup、Navigator、Panel、Refresh、RelativeContainer、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent媒体组件Video绘制组件Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape画布组件Canvas常见组件组件的创建都是以组件名开头，接一对英文圆括号，括号内是组件的参数，在括号外可级联调用组件的属性方法和事件方法。以Text组件为例：Text('你好').fontSize(60).width('95%').height('100%')组件的创建常见组件组件的创建Text组件的创建语法：Text(content?:string|Resource)。参数说明如表参数名参数类型必填参数描述contentstring|Resource否文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：''常见组件所有组件有一些通用属性，比如尺寸设置、位置设置、边框设置、背景设置等。名称参数说明描述widthLength设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围heightLength设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围paddingPadding|Length设置内边距属性。参数为Length类型时，四个方向内边距同时生效。默认值：0padding设置百分比时，上下左右内边距均以父容器的width作为基础值。marginMargin|Length设置外边距属性。参数为Length类型时，四个方向外边距同时生效。默认值：0margin设置百分比时，上下左右外边距均以父容器的width作为基础值alignAlignment设置元素内容在元素绘制区域内的对齐方式。默认值：Alignment.CenterbackgroundColorResourceColor设置组件的背景色。backgroundImagesrc:ResourceStr,repeat?:ImageRepeatsrc：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。repeat：设置背景图片的重复样式，默认不重复fontColorResourceColor设置字体颜色fontSizeLength设置字体大小，Length为number类型时，使用fp单位。字体默认大小16。不支持设置百分比字符串fontStyleFontStyle.Normal正常字体FontStyle.Italic斜体设置字体样式。默认值：FontStyle.Normal组件的通用属性常见组件某些组件在创建时，圆括号里的参数会用到一些特有属性，以Button组件为例。Button('Disable',{type:ButtonType.Capsule,stateEffect:false})名称描述Capsule胶囊型按钮（圆角默认为高度的一半）Circle圆形按钮Normal普通按钮（默认不带圆角）ButtonType取值组件参数中的属性PART-04开发计算器界面任务实施—开发计算器界面将计算器布局从整体到局部进行划分。由于整个计算器界面背景颜色统一，可以最外面设计一个Column布局。Column布局里的内容将纵向排列，从上往下可分成四个部分，分别是三个Text，一个五行四列的Grid布局。每个Text组件外建议加一个Row布局，表示一行横向布局。其中等号按钮要做行合并。界面布局设计任务实施—开发计算器界面打开DevEcoStudio，新建EmptyAbility工程，命名为MyCalStage，注意按图2-27选项选择：Bundlename通常以“com.公司名.项目名”构成，CompileSDK为3.1.0(API9),Model为Stage，Language为ArkTS，DeviceType暂时只能选Phone。因华为提供的远程模拟器中针对API9的设备也还只有Phone。

1、新建工程任务实施—开发计算器界面见教材代码清单2-132、代码实现任务实施—开发计算器界面针对手机的中英文配置进行了适配en_US\element\string.json下定义了英文环境下的字符配置zh_CN\element\string.json下定义了中文环境下的字符配置3、语言个性化任务实施—开发计算器界面3、语言个性化任务实施—开发计算器界面上述资源字符串calculate_name在定义时，如果只在base\element\string.json中定义，而没有在en_US\element\string.json和zh_CN\element\string.json定义，则会报错。解决方法：在en_US\element\string.json和zh_CN\element\string.json下同时定义calculate_name3、语言个性化PART-05实现计算器计算逻辑任务实施—实现计算器计算逻辑所有组件也有一些通用事件，比如点击事件、触摸事件、挂载卸载事件等。这里以按钮的点击事件为例说明事件的用法。Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为onclick中要定义一个响应点击动作的事件处理方法。Button('Ok',{type:ButtonType.Normal,stateEffect:true}).onClick(()=>{('ButtononClick’)})这里面有一个箭头函数，属于ES6的语法事件绑定任务实施—实现计算器计算逻辑计算器逻辑需要实现加、减、乘、除，在用户点击等号时需要进行计算，点击C键时进行删除。1、首先，要找到需要实现事件响应的按钮，添加事件；2、然后，针对每一种事件实现具体计算逻辑。任务实施—实现计算器计算逻辑效果测试求余运算尚未实现，请模仿已实现的加、减、乘、除实现求余运算。——感谢观看——THANKS长沙民政职业技术学院鸿蒙应用开发

本任务需要实现一个联系人的应用。1.主界面能显示目前用户保存的所有联系人信息（性别图标、姓名、电话）2.在通讯录主界面点击新增图标时，进入新增联系人界面。如果用户按界面要求填入电话、联系人名称、性别等信息，点击保存图标，则将在系统中保存联系人信息，并自动追加到主界面已有联系人的最后；如果用户点击了对话框的取消图标，则不会保存新建联系人对话框输入的信息且自动回到主界面。项目三创建通讯录主界面新建联系人界面联系人详情界面主界面学习目标知识目标能力目标素养目标教学目标掌握常用UI组件TextInput、Search的常见方法。掌握线性界面布局。掌握关系型数据库的使用方法。掌握使用列表List及ListItem显示条目数据的方法。掌握页面路由以及参数传递方法。熟练掌握鸿蒙移动应用开发的基本流程。能熟练应用线性布局编写界面。能熟练利用List及ListItem显示列表。能熟练使用关系数据库进行插入、修改、删除、查询数据。能熟练掌握页面路由及参数传递。培养并践行编码规范意识，变量命名可读、格式规范，注释清晰易读。培养自主学习能力，通过阅读文档，学习新知并能在实际项目中运用、解决问题。任务一实现主界面和新增联系人界面任务二向通讯录增加联系人任务三显示通讯录联系人列表任务四查看联系人详情目录CONTENTS实现主界面和新增联系人界面任务描述

通讯录的主界面需求如下面左图所示，请实现主界面。当用户点击了新增图标时，界面跳转到新增界面，新增界面如右图所示。在新增界面，点击标题栏的回退图标，将回到主界面。主界面联系人详情界面任务重点及难点任务目的1．知识目标：（1）掌握常用UI组件Search、TextInput的常见方法；（2）掌握使用router进行页面跳转的方法；2．能力目标：（1）熟练掌握鸿蒙移动开发的基本流程中的创建项目、创建界面布局的过程；（2）能熟练应用线性布局和层叠布局编写界面；（3）能熟练使用router实现页面跳转3．素质目标：（1）通过界面布局培养从整体到局部的思维；（2）学习读API文档；重难点重点：（1）能熟练使用router实现页面跳转（2）能熟练应用线性布局和层叠布局编写界面；难点：（1）能熟练应用线性布局和层叠布局编写界面；1.1完成任务所需知识清单1Search2TextInput3router1.1完成任务所需知识清单-Search组件当需要对所浏览内容根据关键字搜索特定条目时就可以用到搜索框组件。接口定义如下：Search(options?:{value?:string;placeholder?:string;icon?:string;controller?:SearchController})1、Search组件--实现搜索框的组件接口参数说明表参数名参数类型必填参数描述valuestring否设置当前显示的搜索文本内容placeholderstring否设置无输入时的提示文本iconstring否设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式:svg、jpg和pngcontrollerSearchController否设置Search组件控制器1.1完成任务所需知识清单-Search组件除支持UI组件的通用属性（比如Width，Height等），还支持其余属性1、Search组件实现搜索框的组件名称参数类型描述searchButtonstring搜索框末尾搜索按钮文本内容，默认无搜索按钮placeholderColorResourceColor设置placeholder文本颜色placeholderFontFont设置placeholder文本样式textFontFont设置搜索框内输入文本样式textAlignTextAlign设置文本在搜索框中的对齐方式。默认值：TextAlign.StartcopyOption9+CopyOptions设置输入的文本是否可复制1.1完成任务所需知识清单-Search组件除支持通用事件外，还支持其余事件1.Search组件实现搜索框的组件名称功能描述onSubmit(callback:(value:string)=>void)点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。-value:当前搜索框中输入的文本内容onChange(callback:(value:string)=>void)输入内容发生变化时，触发该回调。-value:当前搜索框中输入的文本内容1.1完成任务所需知识清单-Search组件1、Search组件实现搜索框的组件示例：实现一个如图的搜索框。1.1完成任务所需知识清单-Search组件1

@Entry2

@Component3

structSearchExample{4

@StatechangeValue:string=''5

@StatesubmitValue:string=''6

controller:SearchController=newSearchController()78

build(){9

Column(){10

Text('onSubmit:'+this.submitValue).fontSize(18).margin(15)11

Text('onChange:'+this.changeValue).fontSize(18).margin(15)12

Search({value:this.changeValue,placeholder:'Typetosearch...',controller:this.controller})13

.searchButton('SEARCH')14

.width(400)15

.height(40)1.1完成任务所需知识清单-Search组件16

.placeholderColor(Color.Grey)17

.placeholderFont({size:14,weight:400})18

.textFont({size:14,weight:400})19

.onSubmit((value:string)=>{20

this.submitValue=value21

})22

.onChange((value:string)=>{23

this.changeValue=value24

})25

.margin(20)26

Button('SetcaretPosition1')27

.onClick(()=>{28

//设置光标位置到输入的第一个字符后29

this.controller.caretPosition(1)30

})31

}.width('100%')32

}33

}1.1完成任务所需知识清单-TextInput组件接口参数说明表TextInput是单行文本输入框组件，可以设置输入文本的数据类型为字符或者数字或者密码，可以设置输入框的默认输入内容等属性。接口定义如下：TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})参数名参数类型必填参数描述placeholderResourceStr否设置无输入时的提示文本textResourceStr否设置输入框当前的文本内容controller8+TextInputController否设置TextInput控制器1.1完成任务所需知识清单-TextInput组件

TextInput组件文本输入框除支持通用属性外，还支持其余属性名称参数类型描述typeInputType设置输入框类型。默认值：InputType.Normal；枚举值可以选择Normal,Password,Email,Number,PhoneNumberplaceholderColorResourceColor设置placeholder文本颜色placeholderFontFont设置placeholder文本样式enterKeyTypeEnterKeyType设置输入法回车键类型，目前仅支持默认类型显示。默认值：EnterKeyType.DonemaxLengthnumber设置文本的最大输入字符数copyOptionCopyOptions设置输入的文本是否可复制。设置CopyOptions.None时，当前TextArea中的文字无法被复制或剪切，仅支持粘贴showPasswordIconboolean密码输入模式时，输入框末尾的图标是否显示。默认值：truestyleTextInputStyle设置输入框为默认风格或内联输入风格。默认值：TextInputStyle.DefaulttextAlignTextAlign设置输入文本在输入框中的对齐方式。默认值：TextAlign.Start

事件接口名称功能描述onChange(callback:(value:string)=>void)输入内容发生变化时，触发该回调。value：输入的文本内容。onSubmit(callback:(enterKey:EnterKeyType)=>void)按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。enterKeyType：输入法回车键类型。具体类型见EnterKeyType枚举说明。onEditChanged(callback:(isEditing:boolean)=>void)(deprecated)输入状态变化时，触发该回调。从API8开始，建议使用onEditChange。onEditChange(callback:(isEditing:boolean)=>void)8+输入状态变化时，触发该回调。isEditing为true表示正在输入。1.1完成任务所需知识清单-TextInput组件

TextInput样例1.1完成任务所需知识清单-TextInput组件1@Entry2@Component3structTextInputExample{4@Statetext:string=''5controller:TextInputController=newTextInputController()67build(){8Column(){9TextInput({placeholder:'inputyourword...',controller:this.controller})10.placeholderColor(Color.Grey)11.placeholderFont({size:14,weight:400})12.caretColor(Color.Blue)13.width(400)14.height(40)15.margin(20)16.fontSize(14)17.fontColor(Color.Black)18.onChange((value:string)=>{19this.text=value20})

TextInput样例1.1完成任务所需知识清单-TextInput组件21Text(this.text)22Button('SetcaretPosition1')23.margin(15)24.onClick(()=>{25//将光标移动至第一个字符后26this.controller.caretPosition(1)27})28//密码输入框29TextInput({placeholder:'inputyourpassword...'})30.width(400)31.height(40)32.margin(20)33.type(InputType.Password)34.maxLength(9)35.showPasswordIcon(true)36//内联风格输入框37TextInput({placeholder:'inlinestyle'})38.width(400)39.height(50)40.margin(20)41.borderRadius(0)42.style(TextInputStyle.Inline)43}.width('100%')44}

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，访问不同的页面。两种跳转模式，决定了目标页是否会替换当前页：●

router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。●

router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。1.1完成任务所需知识清单-router页面路由

两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。●

Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。●

Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。1.1完成任务所需知识清单-router页面路由

场景一：有一个主页（Home）和一个详情页（Detail），希望从主页点击一个商品，跳转到详情页。同时，需要保留主页在页面栈中，以便返回时恢复状态。这种场景下，可以使用pushUrl()方法，并且使用Standard实例模式（标准实例模式下，router.RouterMode.Standard参数可以省略）。1//在Home页面中2functiononJumpClick():void{3router.pushUrl({4url:'pages/Detail'//目标url5},router.RouterMode.Standard,(err)=>{6if(err){7console.error(`InvokepushUrlfailed,codeis${err.code},messageis${err.message}`);8return;9}10('InvokepushUrlsucceeded.');11});12}1.1完成任务所需知识清单-router页面路由

场景二：有一个登录页（Login）和一个个人中心页（Profile），希望从登录页成功登录后，跳转到个人中心页。同时，销毁登录页，在返回时直接退出应用。这种场景下，可以使用replaceUrl()方法，并且使用Standard实例模式（或者省略）。场景三：有一个设置页（Setting）和一个主题切换页（Theme），希望从设置页点击主题选项，跳转到主题切换页。同时，需要保证每次只有一个主题切换页存在于页面栈中，在返回时直接回到设置页。这种场景下，可以使用pushUrl()方法，并且使用Single实例模式。1.1完成任务所需知识清单-router页面路由

场景四：有一个搜索结果列表页（SearchResult）和一个搜索结果详情页（SearchDetail），希望从搜索结果列表页点击某一项结果，跳转到搜索结果详情页。同时，如果该结果已经被查看过，则不需要再新建一个详情页，而是直接跳转到已经存在的详情页。这种场景下，可以使用replaceUrl()方法，并且使用Single实例模式。1.3完成任务所需知识清单-router页面路由

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。方式一：返回到上一个页面。1router.back();方式二：返回到指定页面。1router.back({2url:'pages/Home'3});1.3完成任务所需知识清单-router页面路由输入主题完成应用的主界面UI框架设计1.2任务1的实施任务目标创建主界面

（1）创建项目启动