鸿蒙南北向开发基础及项目实战教程 课件 第5-8章 鸿蒙移动应用开发基础- -智慧城市云管理项目开发

鸿蒙移动应用开发基础本章主要讲述鸿蒙移动应用开发环境搭建。通过学习本节将能够了解鸿蒙移动应用开发环境搭建。通过本节学习可以熟悉：DevEcoStuio安装与配置鸿蒙App工程的创建鸿蒙虚拟手机的配置DevEcoStuio安装与配置鸿蒙App工程的创建鸿蒙虚拟手机的配置DevEcoStuio安装与配置(1/3)DevEcoStudio是华为公司推出的一款集成开发环境，专门用于开发鸿蒙系统的应用程序。在华为官网/consumer/cn/deveco-studio/上注册华为账号并登录后，即可下载最新版本DevEcoStudio的安装程序。DevEcoStuio安装与配置(2/3)

下载Windows版安装程序后，关闭360等杀毒软件，右键点击安装程序并选择“以管理员身份运行”。DevEcoStuio安装与配置(3/3)选择创建桌面快捷方式DevEcoStuio安装与配置鸿蒙App工程的创建鸿蒙虚拟手机的配置鸿蒙App工程的创建(1/4)

首次打开时会弹出窗口，在此窗口中可选“Configorinstallationdirectory”导入旧版本DevEcoStudio的设置，也可选“Donotimportsettings”使用新设置。鸿蒙App工程的创建(2/4)在欢迎窗口上点击“CreateProject”创建新工程鸿蒙App工程的创建(3/4)设置工程名称、源码所在路径、鸿蒙SDK版本鸿蒙App工程的创建(4/4)点击设置窗口上的“Finish”按钮后创建工程DevEcoStuio安装与配置鸿蒙App工程的创建鸿蒙虚拟手机的配置鸿蒙虚拟手机的配置(1/5)

在工程开发界面上通过菜单“Tools->DeviceManager”，

打开设备管理器窗口后，进入模拟设备选择界面鸿蒙虚拟手机的配置(2/5)设置虚拟手机的名称、内存及硬盘存储空间大小鸿蒙虚拟手机的配置(3/5)配置完成后，点击“Finish”按钮创建虚拟手机鸿蒙虚拟手机的配置(4/5)在家庭版的Windows系统上，会发生错误提示:在Windows系统随意文件夹下创建一个hyperv.bat批处理文件，并输入以下内容:pushd"%~dp0"dir/b%SystemRoot%\servicing\Packages\*Hyper-V*.mum>hyper-v.txtfor/f%%iin('findstr/i.hyper-v.txt2^>nul')dodism/online/norestart/add-package:"%SystemRoot%\servicing\Packages\%%i"delhyper-v.txtDism/online/enable-feature/featurename:Microsoft-Hyper-V-All/LimitAccess/ALL以管理员运行此文件后，解决问题。鸿蒙虚拟手机的配置(5/5)

在DevEcoStudio中，通过执行菜单“Run->Run‘Entry’”来编译工程源码，并将App安装至虚拟手机上:请简述虚拟手机的作用。

讲述了DevEcoStuio安装与配置讲述了鸿蒙App工程的创建讲述了鸿蒙虚拟手机的配置本章主要讲述鸿蒙ArkTS开发语言基础

。通过学习本节将能够了解鸿蒙ArkTS开发语言基础

。通过本节学习可以熟悉：ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS变量的声明与类型(1/3)ArkTS语言中以let关键词开头的语句声明变量:let

变量名：

类型=初始值;lets:string=‘hello’;//变量声明时指定变量类型lets2=‘hello’;//变量声明时不指定类型，由编译器自动识别

所有变量的数据类型都必须在声明时指定，但是一个变量的声明语句中包含了初始值，那可以不指定其类型，而是由编译器指定:通过const关键词声明只读变量:const

s:string=‘hello’;//方式1const

s2=‘hello’;//方式2ArkTS变量的声明与类型(2/3)ArkTS常用的基础数据类型:

number：数字类型，支持任意大小的整数与浮点数，并支持十进制、二进制(0b开头)、八进制(0o开头)和十六进制(0x开头)等数据。

string：字符串类型，用于描述文本信息，可以使用双引号（"）或单引号（'）来表示字符串。

boolean：布尔类型，用于标识真（true）和假（false）。ArkTS变量的声明与类型(3/3)

可在DevEcoStudio编辑环境中，双击打开Index.ets源文件，并在源文件首部输入代码语句，然后点击图中右侧的“Previewer”进入窗口预览，相关的输出信息就会在底部的Log窗口中显示出来ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS数组与动态数组(1/2)

数组是多个同类型变量的集合，ArkTS中声明数组语句:let数组名:变量类型[]=[变量值1,变量值2...];letarr1:number[]=[1,2,3];

声明一个包含3个number变量的数组，初始值分别为1、2、3，

代码语句:也可以先声明数组，并指定数组元素的个数，然后再予每个变量进行赋值:letarr2:number[]=newArray(3);arr2[0]=11;arr2[1]=22;arr2[2]=33;ArkTS数组与动态数组(2/2)

动态数组可以存放任意一种类型的多个变量，并在使用中，根据需求动态改变数组中元素的个数。//1.声明存放number变量的动态数组，初始为空数组letarr:Array<number>=[];//2.往动态数组增加要存储的数据arr.push(1);//动态数组内部会增加一个元素存放值1arr.push(2);//动态数组内部会增加一个元素存放值2arr.push(3);//动态数组内部会增加一个元素存放值3//3.循环输出数组中每个元素值，arr.length获取数组中的元素for(leti:number=0;i<arr.length;i++)

console.debug("arr["+i+"]="+arr[i]);ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS函数与箭头函数(1/2)ArkTS中的函数声明格式:function函数名(参数变量名:参数变量类型,...):返回值类型function函数名(参数变量名:参数变量类型,...):void//方式1function函数名(参数变量名:参数变量类型,...)//方式2

如果函数没有返回值，则函数声明格式如下：如实现一个将两个number变量值加起来并返回的函数功能://函数封装functionmyAdd(a:number,b:number):number{returna+b;}//应用测试console.debug(""+myAdd(3,4));ArkTS函数与箭头函数(2/2)

在ArkTS中，为了便于实现函数的回调功能，可以使用Lambda函数(匿名函数)实现一个一次性的、极为简洁的函数，它可以省略函数名及返回值类型，函数声明语句中因带有=>符号，Lambda函数也称为箭头函数。//由一个func变量存放箭头函数letfunc=(a:number,b:number)=>{returna+b;}//通过func变量调用箭头函数console.debug(""+func(3,4));console.debug(""+func(7,8));ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS类与接口(1/6)

类，本质上是一种数据类型，而该类型的一个具体实例则被称为对象。例如，在学生类中，一个叫张三的学生便是一个对象实例。ArkTS的类中可直接定义描述行为功能的函数成员，并可对在类中的属性成员与函数成员赋予不同的访问权限。类中所有成员可根据三种不同的修饰词被划分为不同的访问权限，这些修饰词分别是：public：表示公有权限，只要通过类的对象名就可以访问此成员。private：表示私有权限，此成员只能由类内部的函数成员访问。protected：表示受保护权限，此成员可以在类内部和派生类中被访问。若类成员未使用上述三种修饰词声明权限，则默认使用public公有权限。ArkTS类与接口(2/6)

创建类对象时，会自动触发调用类的constructor构造函数实现属性成员的初始化，如定义一个描述学生信息的Student类：classStudent{

privateid:number=0;

privatename:string='whom';

constructor(id:number,name:string){

//构造函数

//this表示当前对象,this.id表示当前对象的id成员

this.id=id;//当前对象的id成员值设为参数id的值

=name;

}

publicshowMsg(){

console.debug("id:"+this.id+"name:"+);

}}ArkTS类与接口(3/6)//创建Student对象，触发调用构造函数并传递参数letstu1:Student=newStudent(1,'LiLei');letstu2:Student=newStudent(2,'WuBinBin');//通过对象名访问公有函数成员stu1.showMsg();stu2.showMsg();ArkTS类与接口(4/6)

在ArkTS中的interface接口通常应用在程序中，用于编写实现兼容后续代码的程序核心架构功能。如在游戏程序中，先描述角色攻击功能函数，及游戏副本://声明角色的攻击函数interfaceRole{attack():void;//只声明，不实现函数体}//游戏副本,角色攻击两次functionplay(r:Role){r.attack();r.attack();}ArkTS类与接口(5/6)

通常在游戏中会有不同类型的角色，每种角色的攻击方法与手段不尽相同，所以需要在描述具体角色类中具体实现接口函数，如实现战士与魔法师等角色的接口函数:classWarriorimplementsRole{//在战士类中实现攻击函数attack():void{console.debug("战士贴身战斗！");}}classMagicianimplementsRole{//在魔法师类中实现的攻击函数attack():void{console.debug("魔法师远程攻击！");}}ArkTS类与接口(6/6)

不管具体角色类的功能如何，只要实现了Role接口函数，则预先编写好的游戏副本会完全兼容各种游戏角色，如让战士与魔法师进入游戏副本:play(newWarrior());//创建战士对象，此战士进入副本play(newMagician());//创建魔法师对象，此魔法师进入副本ArkTS变量的声明与类型ArkTS数组与动态数组ArkTS函数与箭头函数ArkTS类与接口ArkTS模块的应用ArkTS模块的应用（1/3)

按模块化设计分成多个源文件。在DevEco工程选中“pages”文件夹后点击鼠标右键选择“ArkTSFile”，创建Role.ets源文件://声明角色的攻击函数exportinterfaceRole{

attack():void;//只声明，不实现函数体}

//游戏副本，攻击两次exportfunctionplay(r:Role){

r.attack();

r.attack();}import{Role}from'./Role';//导入使用Role.ets中的Role接口exportclassWarriorimplementsRole{//定义战士的攻击函数attack():void{console.debug("战士贴身战斗！");}}exportclassMagicianimplementsRole{//定义魔法师的攻击函数attack():void{console.debug("魔法师远程攻击！");}}ArkTS模块的应用(2/3)再创建PlayerRole.ets源文件://导入使用PlayerRole.ets中的Warrior,Magician类import{Magician,Warrior}from'./PlayerRole';//导入使用Role.ets中的play副本函数import{play}from'./Role';play(newWarrior());//创建战士对象，此战士进入副本play(newMagician());//创建魔法师对象，此魔法师进入副本ArkTS模块的应用(3/3)然后在Index.ets源文件首部增加创建游戏角色对象并执行游戏副本的代码:请简述类函数成员与接口函数成员的区别。

讲述了ArkTS变量的声明与类型讲述了ArkTS数组与动态数组讲述了ArkTS函数与箭头函数讲述了ArkTS类与接口讲述了ArkTS模块的应用本章主要讲述鸿蒙ArkUI开发基础

。通过学习本节将能够了解鸿蒙ArkUI开发基础。通过本节学习可以熟悉：Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计Text组件

在ArkUI中Text组件用于显示文字信息，可在组件描述指定显示的文字内容及相关属性设置。Text("helloworld!!")//描述Text组件，并指定显示字符串.fontSize(30)//设置字体大小.fontColor(Color.Red)//设置字体颜色.fontWeight(FontWeight.Bold)//设置字体加粗.textAlign(TextAlign.Center)//设置字体居中对齐.width('100%')//设置Text组件的宽度与页面宽度一致Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计Button组件

在ArkUI中Button表示一个按钮，可显示按钮功能相关的文字信息，并设置点击事件及其他属性的配置。Button(){//按钮组件里由一个Text组件显示文字信息Text(＂按钮＂).fontSize(18)}.type(ButtonType.Capsule)//设置按钮为胶囊类型.width(150).height(50)//设置按钮的宽高.margin(100)//设置按钮的外边距.onClick(()=>{//设置点击事件})Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计Row与Column容器(1/3)在ArkUI组件中，Row与Column组件属于布局管理的容器组件，用于管理所属组件的在页面上的排列布局。其中Row是行布局，即它会将所属的组件排成一行；Column是列布局，即会将每个所属的组件单独占用一行。同时布局管理器是可以互相嵌套的，即行布局管理器中可以包含列布局，而此被包含的列布局管理器里也可再包含一个行布局或列布局。但

根据一个系统组件内部只能有一个子组件原则，

一个页面也只能有一个根布局管理器。Row与Column容器(2/3)将四个按钮排列成一行，则可以使用行布局方式：

Row({space:20}){//space:20设置按钮间隔距离

Button("按钮1")

Button("按钮2")

Button("按钮3")

Button("按钮4")

}.width('100%').height('100%')//设置布局管理器的宽与高

.alignSelf(ItemAlign.Center)//组件居中对齐Row与Column容器(3/3)将四个按钮排列成一列，则可以使用列布局方式：

Column({space:20}){//space:20设置按钮间隔距离

Button("按钮1")

Button("按钮2")

Button("按钮3")

Button("按钮4")

}.width('100%').height('100%')//设置布局管理器的宽与高

.alignSelf(ItemAlign.Center)//组件居中对齐Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计Image组件Image组件可用于显示各种文件格式的资源图像文件，并可设置组件的宽度、高度、缩放模式等配置。将图像文件复制到工程中的“resources->base->media”文件夹中。Image($r('app.media.smoke'))//设置Image组件显示smoke资源图像.width(200).height(200)//设置Image组件的宽与高.objectFit(ImageFit.Fill)//设置图像填充模式Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计TextInput组件TextInput组件用于获取用户输入的文本内容，并提供提示信息、背景颜色等属性配置。Column({space:20}){TextInput({placeholder:'请输入账号'})//描述文本输入组件，并设置提示信息.width('60%').height(50)//设置组件的宽与高.backgroundColor('#ff326085')//设置组件的背景颜色.fontSize(20)//设置组件字体大小TextInput({placeholder:'请输入密码'})//描述文本输入组件，并设置提示信息.width('60%').height(50)//设置组件的宽与高.backgroundColor('#ff326085')//设置组件的背景颜色.fontSize(20)//设置组件字体大小.type(InputType.Password)//设置密码输入掩码}.width('100%').height('100%').alignSelf(ItemAlign.Center)Text组件Button组件Row与Column容器Image组件TextInput组件登录验证页面设计登录验证页面设计(1/2)

设计实现一个登录验证页面。验证页面主要分成三行，第一行由一个图像与一个输入框组件组成实现用户账号的输入，第二行实现用户密码的输入，第三行只有一个登录按钮组件。登录验证页面设计(2/2)

Column({space:20}){

//第一行组件描述

//第二行组件描述

//第三行组件描述

}.width('100%')

.alignItems(HorizontalAlign.Center)//列布局设置组件水平居中

}请简述State变量的作用。

讲述了Text组件讲述了Button组件讲述了Row与Column容器讲述了Image组件讲述了TextInput组件讲述了登录验证页面设计本章主要讲述鸿蒙ArkUI开发进阶技术

。通过学习本节将能够了解鸿蒙ArkUI开发进阶技术。通过本节学习可以熟悉：List列表组件Tabs分页组件自定义样式自定义组件List列表组件Tabs分页组件自定义样式自定义组件List列表组件List列表作为容器组件，通过子组件ListItem为每个数据项提供单独的视图。List结合ForEach接口，可从数组类型的数据中更加高效地构建一个列表。List(){ListItem(){//数据项1Row(){Image($r('app.media.smoke')).width(50).height(50)Text('烟雾传感器').fontSize(18)}.width('80%').margin(20)//设置外边距.padding(10)//设置内边距.borderWidth(1).borderRadius(10)//边框线条宽度为1，边框圆角半径为10}//数据项2//数据项3

List列表组件Tabs分页组件自定义样式自定义组件Tabs分页组件Tabs作为容器组件，通过子组件TabContent为每个分页提供单独区域的UI视图。Tabs(){TabContent(){//第一页Column(){Image($r('app.media.smoke')).width(200).height(200)Text('烟雾传感器').fontSize(20)}}.tabBar('烟雾')//分页标题//第二页//第三页List列表组件Tabs分页组件自定义样式自定义组件自定义样式

将相同的属性设置通过@Style修饰符封装成一个样式设置函数，然后在组件属性描述时调用此样式函数@StylesfunctionmyColumnStyle(){

.borderWidth(1).borderRadius(10)

.width('90%').height('90%')

.borderColor('#ffe9dede')

.backgroundColor('#ffdcf6db')

.padding(20)}

Tabs(){

TabContent(){//第一页

Column(){...

}.myColumnStyle()//调用样式函数

}.tabBar(this.myTabBuilder(0,"烟雾"))List列表组件Tabs分页组件自定义样式自定义组件自定义组件

ArkUI允许我们基于多个现有组件创建一个自定义组件，从而使新组件具备多个组件的UI视图特性。@Component//此修饰符表示自定义组件structMySensorDevice{privateimgSrc:ResourceStr="";//描述mySensor组件时通过imgSrc指定资源图像privatesName:string="";//描述mySensor组件时通过sName指定显示文字build(){Column(){Image(this.imgSrc).width(200).height(200)Text(this.sName).fontSize(20)}.myColumnStyle()}}自定义组件

使用自定义组件：Tabs(){TabContent(){//第一页MySensorDevice({imgSrc:$r('app.media.smoke'),sName:'烟雾传感器'})}.tabBar(this.myTabBuilder(0,"烟雾"))TabContent(){//第二页MySensorDevice({imgSrc:$r('app.media.temperature'),sName:'温度传感器'})}.tabBar(this.myTabBuilder(1,"温度"))TabContent(){//第三页MySensorDevice({imgSrc:$r('app.media.humidity'),sName:'湿度传感器'})}.tabBar(this.myTabBuilder(2,"湿度"))请简述自定义组件的作用。

讲述了List列表组件讲述了Tabs分页组件讲述了自定义样式讲述了自定义组件本章主要讲述项目实践：物联网设备管理APP开发

。通过学习本节将能够了解项目实践：物联网设备管理APP开发过程。通过本节学习可以熟悉：App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展App功能模块设计(1/3)

采用模块化设计实现一个鸿蒙移动端的物联网设备管理系统。主要功能实现：登录验证通过后，以图文列表的形式向用户及时显示各个物联网设备的传感器数据

。

整个App根据功能划分，分成登录验证与设备管理两个模块。采用在一个Ability窗口上切换Page页面的方式，实现此两个模块的界面设计与它们之间的界面切换。App功能模块设计(2/3)

登录验证模块负责验证用户输入的账号与密码，验证通过后进入设备管理页面。在登录验证模块采用自定义组件的方式，将账号与密码输入框封装带图标的输入框，并通过箭头函数的回调方式实现由状态变量实时存储用户在自定义组件上输入的信息。App功能模块设计(3/3)

设备管理模块负责将每个物联网设备的烟雾、温度、湿度等传感器数据以图文列表方式展示出来。在模块中，为每种传感器设计由Image与Text组件封装构建带图标的传感器组件，再基于传感器组件再度封装构建出物联网设备组件，并且基于List组件实现支持多个物联网设备的管理。在模块中为每个物联网设备组件创建了一个定时器，用于定时产生随机数模拟传感器的数据更新。App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展项目工程的创建与配置(1/4)

基于“EmptyAbility”模板创建一个名为“MyIotSystem”的工程。选中工程的pages文件夹后点击鼠标右键，再选择“New->>EmptyPage”，创建登录验证页面的Login.ets源文件:项目工程的创建与配置(2/4)Page创建完成后，再次选中pages文件夹通过右键菜单“New->ArkTSFile”创建用于设计自定义组件的MyCustomUI.ets源文件，而工程默认创建的Index.ets则作为设备管理页面的源文件。工程的pages文件夹下的三个源文件:项目工程的创建与配置(3/4)将项目所需的资源图像文件复制至工程目录下的resources->base->media文件夹中:项目工程的创建与配置(4/4)

然后修改工程中的EntryAbility启动窗口的代码，将启动页面由Index页面改为Login页面。双击打开entryability文件夹下的EntryAbility.ets源文件，在编辑窗口中将第18行代码修改为以下内容：windowStage.loadContent('pages/Login',(err)=>{完成上述修改后，当App启动时，将首先呈现登录验证页面。但因通过向导创建的Index与Login页面除了文件名外其他内容完全相同，可以通过修改Login.ets中message字符串状态变量值予以识别。App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展登录验证模块功能实现(1/3)登录验证页面设计目标效果：登录验证模块功能实现(2/3)登录验证页面自定义的图标输入框组件，关键代码：@Componentexport

structMyLoginRow{

创建对象时需要传值的属性成员：记录资源图像

记录输入框onChange事件发生时调用的回调函数

记录输入框的掩码类型

记录输入框的提示

build(){

Row({space:25}){//Image组件描述

//TextInput组件描述

}

}登录验证模块功能实现(3/3)在登录验证页面的Login.ets源文件关键代码：import{MyLoginRow}from'./MyCustomUI';//导入自定义的图标输入框Column({space:20}){Text('物联网设备管理系统').fontSize(30).fontWeight(FontWeight.Bold)//账号的图标输入框//密码的图标输入框Button('登录').onClick(()=>{//切换到Index页面router.pushUrl({url:'pages/Index',params:''},router.RouterMode.Standard);})App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展设备管理模块功能实现(1/7)

设备管理页面主要实现以图文列表的方式向用户提供多个物联网设备的烟雾、温度、湿度等传感器数据的监控视图，页面效果:设备管理模块功能实现(2/7)在MyCustomUI.ets源文件中，自定义的传感器组件MyDeviceRowUI关键代码：structMyDeviceRowUI{

属性成员：记录传感器图像

记录传感器名称

@Propval:string='';//绑定一个状态变量，val的值跟随此状态变量变化

build(){

Row({space:20}){//Image组件描述

//Text组件传感器名称//Text组件传感器值

}

}}设备管理模块功能实现(3/7)

由三个传感器组件构建物联网设备组件MyDeviceUI，在组件内部以一个定时器实现每隔3秒产生随机数作为传感器的数据，并通过状态变量的绑定实现在传感器组件上的更新显示。MyDeviceUI组件关键代码：exportstructMyDeviceUI{

//State变量成员：humiditytemperaturesmoke

privatetimerID:number=0;//记录定时器的ID

aboutToAppear():void{//当页面将要出现时触发执行的函数

//创建一个定时器，实现每隔3秒以随机数作为传感器的数据

this.timerID=setInterval(()=>{//更新State变量值

},3000)

}

设备管理模块功能实现(4/7)exportstructMyDeviceUI{aboutToDisappear():void{//当页面将要销毁或隐藏时触发执行的函数clearInterval(this.timerID);//关闭定时器}build(){Column({space:10}){//分别以三个传感器组件呈现湿度、温度与烟雾传感器的数据MyDeviceRowUI({imgSrc:$r('app.media.humidity'),sName:'湿度',val:this.humidity})MyDeviceRowUI({imgSrc:$r('app.media.temperature'),sName:'温度',val:this.temperature})MyDeviceRowUI({imgSrc:$r('app.media.smoke'),sName:'烟雾',val:this.smoke})}

设备管理模块功能实现(5/7)

在设备管理页面Index.ets中定义一个记录设备名称的MyDevice类,并通过构造函数记录传入的设备名称:classMyDevice{publicsName:string='';publicconstructor(sName:string){this.sName=sName;}}设备管理模块功能实现(6/7)

接着在Index组件内部增加一个存放多个MyDevice对象的动态数组，实现记录多个物联网设备的名称。增加Index组件的aboutToAppear函数，并在函数里为每个物联网设备自动生成相应的名称并存入动态数组:structIndex{privatedevs:Array<MyDevice>=[];//以动态数组记录设备名称privatecount:number=8;//物联网设备的数量aboutToAppear():void{for(leti=0;i<this.count;i++){this.devs.push(newMyDevice('设备'+i+'号'));}}设备管理模块功能实现(7/7)

最后在Index页面的List组件里通过ForEach函数遍历动态数组，为每个物联网设备描述创建出一个MyDeviceUI组件，实现物联网设备监控列表，关键代码:import{MyDeviceUI}from'./MyCustomUI';structIndex{build(){Column(){List(){ForEach(this.devs,(dev:MyDevice)=>{ListItem(){MyDeviceUI({devName:dev.sName})}})App功能模块设计项目工程的创建与配置登录验证模块功能实现设备管理模块功能实现项目总结与拓展项目总结与拓展

本次项目通过综合运用自定义组件、定时器、List列表组件、页面切换等鸿蒙应用开发技术，实现了物联网设备管理系统的基础功能，向用户提供设备监控操作界面。通过本次项目实践，能进一步提升ArkTS语言与ArkUI的开发技术水平，要求掌握自定义组件的方法，并深入理解面向对象的编程思想。在当前项目实践中，虽然采用了定时生成的随机数模拟传感器数据，但页面的开发设计原理是相通的，后续只需接入真实的传感器硬件数据，即可构建完整的物联网设备管理系统。请简述如何划分组件的组成。

讲述了App功能模块设计讲述了项目工程的创建与配置讲述了登录验证模块功能实现讲述了设备管理模块功能实现讲述了项目总结与拓展谢谢105智慧工厂项目本章主要讲述智慧工厂项目概述。通过学习本节将能够了解智慧工厂项目概述。通过本节学习可以熟悉：项目的主要功能项目概述项目概述

本项目主要基于厂区的无线网络，经过手机/平板的App程序与Hi3861设备端的网络通信，通过烟雾、光敏、人体等传感器的感知，构建物联网智能化管理的厂房。实现的主要功能有：

支持多个用户通过手机或平板的App程序通过Wi-Fi无线远程控制设备端照明灯与声光警报器的开关。

在设备端通过光照强度传感器感知环境亮度，当亮度严重不足时自动打开照明灯，并向App端反馈传感器的亮度数据。

设备端的烟雾传感器实时监测环境内可燃气体浓度，一旦浓度超出安全范围，立即触发声光警报器，并将警报状态反馈至App端。

设备端的人体感应传感器实时监控区域人员动态，一旦有人进入，即向App端发送状态信息，助力厂区的安防工作。讲述了智慧工厂项目概述本章主要讲述智慧工厂项目开发知识准备。通过学习本节将能够了解工厂物联网智能化项目开发知识准备。通过本节学习可以熟悉：项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述项目硬件架构

主要以无线Wi-Fi信号实现Hi3861开发板与手机端的通信与协同工作。在设备端通过IO口接入继电器模块控制220V电压的照明灯与声光警报器；通过烟雾传感器输出的模拟量信号，实时监测当前环境的可燃气体浓度；通过光敏传感器输出的模拟量信号，实现环境亮度不足时自动打开照明光；并且通过人体感应传感器输出的数字信号，实时侦测当前区域是否有人员走动。项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述设备端程序架构与流程(1/2)项目的设备端程序功能架构如图所示。设备端程序架构与流程(2/2)

设备端以被动触发方式进行工作，只有接收到App端的UDP网络通信命令后才会做出相应的响应操作。当接收App端发出的设备查询命令后，则通过UDP回复当前设备的编号信息；当接收到App端的传感器数据更新命令后，设备完成采集传感器数据后，

生成UDP数据报文并回传至App端。项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述APP端程序架构与流程(1/2)项目的手机端功能架构如图所示。APP端程序架构与流程(2/2)App程序以主动方式进行工作，在启动时初始化UDP网络通信后，发出查询设备的UDP广播，然后等待设备端的回复，每当接收到一个回复的设备信息时，则在页面上创建一个设备组件对象，然后在设备组件初始化中设置定时向设备发出传感器数据更新的UDP命令。待接收到设备传输的传感器数据后，更新设备组件里的UI视图，向用户呈现各种传感器的工作状态。项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述网络通信原理与网络协议栈在每次网络通信的数据中，都会有以下关键的参数信息：MAC地址，亦称物理地址，是每张网卡或网络设备在出厂时即被赋予的全球唯一标识符。在网络传输过程中，MAC地址扮演着发送方与接收方网络设备的定位角色。IP地址，同样用于标识网络中的设备，与MAC地址相辅相成。不同之处在于，IP地址并非出厂时固定，用户可自由选择，或通过配置特定区域内的IP地址来区分不同的所属子网。

端口号，其作用是区分同一计算机系统中进行网络通信的不同进程。在网络环境中，计算机以IP地址标识身份，而一台计算机上能同时运行多个网络通信程序，如微信、迅雷下载、百度网盘等，它们凭借不同的端口号来区分各自的服务进程。并且，一种通信协议下的一个端口号只能由一个进程使用，而一个进程可以同时使用多个不同的端口号。

网络通信原理与网络协议栈TCP/IP严格意义上讲是一个协议簇(集合)，包含多个子协议。标准的TCP/IP协议采用七层抽象结构模型（OSI模型），包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层，但在实际应用开发中，往往采用其中四层，分别为数据链路层、网络层、传输层、应用层:网络通信原理与网络协议栈在TCP/IP协议的分层中，每一层负责着不同的功能：链路层，也称作数据链路层，通常包括操作系统中的设备驱动程序和硬件中对应的网络接口卡(网卡)。链路层主要根据通信双方网络接口卡的物理地址建立通信通道。网络层，处理分组在网络中的活动，例如根据网络通信双方的IP地址确认联系。在TCP/IP协议簇中，网络层协议包括IP协议(网际协议)，ICMP协议（Internet互联网控制报文协议），以及IGMP协议(Internet组管理协议)。运输层，也称传输层，主要为网络通信双方的应用程序提供从端口到端口的通信。在TCP/IP协议簇中，主要有两个互不相同的传输协议：TCP(传输控制协议)和UDP(用户数据报协议)。TCP提供高可靠性的数据通信，而UDP只是把称作数据报的数据分组从一端往另一端发出，但并不保证该数据报能准确到达。应用层负责通过网络通信处理完成特定任务细节的应用程序，如FTP、Telnet等网络程序。网络通信原理与网络协议栈

操作系统中通常会集成实现TCP/IP协议的功能模块，这个模块也被称为网络协议栈。当通信程序发送网络数据时，网络协议栈会根据相关信息生成符合TCP/IP协议分层标准的网络数据包，并调用网络设备驱动将其发送出去。项目硬件架构设备端程序架构与流程APP端程序架构与流程网络通信原理与网络协议栈UDP网络通信协议概述UDP网络通信协议概述UDP(userdatagramprotocol，用户数据报)是属于TCP/IP传输层的一种协议。它是面向非连接、不可靠的网络通信协议，它不会与对方建立一对一的专用通信通道，而是通过同一接口将不同的数据包直接发给不同的接收端。当UDP数据包发出后，发送端不管数据包最终是否准确到达接收端，且无法确保数据包是按发出次序到达接收端。UDP可以支持广播、组播等网络通信功能UDP网络通信协议概述UDP网络通信编程的步骤过程基本如下：(1)

首先，网络通信程序需与网络协议栈建立连接，并指定通信协议。(2)

向网络协议栈申请使用指定的端口号，或者由网络协议栈分配一个空闲的端口号。(3)

向网络协议栈提交要发出的数据包，并指定目标IP地址及端口号。(4)

待网络协议栈接收UDP数据包后，程序从网络协议栈取回数据包。(5)

网络通信完成后，与网络协议栈断开联系，并回收资源。请简述UDP既然不可靠，为什么不淘汰此协议?

讲述了项目硬件架构讲述了设备端程序架构与流程讲述了APP端程序架构与流程讲述了网络通信原理与网络协议栈讲述了UDP网络通信协议概述本章主要讲述智慧工厂项目设备端开发过程。通过学习本节将能够了解智慧工厂项目设备端开发过程。通过本节学习可以熟悉：继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程继电器模块编程(1/7)继电器模块IoTRelay.h用于声明可调用的继电器控制函数:#ifndef__IOT_RELAY_H#define__IOT_RELAY_H//继电器控制，id表示第几个继电器，

onOff表示继电器控制IO的电平状态voidIoTRelayControl(intid,intonOff);#endif继电器模块编程(2/7)IoTRelay.c源文件用于具体实现继电器控制及初始化功能的函数，关键代码：statichi_u8relaysIO[]={RELAY0_IO,RELAY1_IO};//用数组存放所有继电器模块的控制IO//继电器控制，id表示第几个继电器，onOff表示继电器的工作状态voidIoTRelayControl(intid,intonOff){//控制数组中第id个IO口输出onOff电平}voidIoTRelayInit(){//遍历数组，初始化所有继电器IO口

}SYS_RUN(IoTRelayInit);//在系统初始化时执行IoTRelayInit函数继电器模块编程(3/7)BUILD.gn文件用于配置继电器模块相关源文件的编译操作:static_library("IoTRelay"){sources=["IoTRelay.c"]include_dirs=["./","//utils/native/lite/include","//kernel/liteos_m/kal/cmsis","//base/iot_hardware/peripheral/interfaces/kits",]}继电器模块编程(4/7)

在项目的IoTMain模块目录中创建IoTFactoryMain.c主程序源文件，并在此源文件中测试使用继电器模块:#include"IoTRelay.h"voidIoTMainInit(){IoTRelayControl(0,0);IoTRelayControl(1,0);}APP_FEATURE_INIT(IoTMainInit);继电器模块编程(5/7)在IoTMain模块目录下创建BUILD.gn编译配置文件，并在文件中加入继电器模块头文件所在路径:static_library("IoTMain"){sources=["IoTFactoryMain.c"]include_dirs=["./","../IoTRelay","//utils/native/lite/include","//kernel/liteos_m/kal/cmsis","//base/iot_hardware/peripheral/interfaces/kits","//device/hisilicon/hispark_pegasus/sdk_liteos/platform/os/Huawei_LiteOS/components/lib/libc/musl/include",]}继电器模块编程(6/7)

在IoTFactory项目目录下创建项目的BUILD.gn编译配置文件，再由此BUILD.gn文件中分别引用两个模块的BUILD.gn文件，具体内容如下：import("//build/lite/config/component/lite_component.gni")lite_component("app"){features=["IoTMain:IoTMain","IoTRelay:IoTRelay",]}继电器模块编程(7/7)

完成项目的编译配置后，接下来需要修改工程源码App目录下的BUILD.gn文件，以引用IoTFactory项目的编译配置文件:import("//build/lite/config/component/lite_component.gni")lite_component("app"){features=["IoTFactory:app",]}继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程人体感应模块编程(1/5)人体感应模块IoTHuman.h头文件用于声明人体感应传感器的功能函数:#ifndef__IOT_HUMAN_H#define__IOT_HUMAN_H//检测是否感应到人体活动，返回值HI_TRUE表示感应到，HI_FALSE表示感应不到hi_boolIoTHumanGetStatus();#endif人体感应模块编程(2/5)IoTHuman.c源文件中具体实现人体感应传感器的功能函数，关键代码:hi_boolIoTHumanGetStatus(){//获取并返回人体感应IO口电平}voidIoTHumanInit(){//人体感应传感器IO初始化并配置输入方向}SYS_RUN(IoTHumanInit);人体感应模块编程(3/5)人体感应模块目录下的BUILD.gn编译配置文件:tatic_library("IoTHumanSensor"){sources=["IoTHuman.c"]include_dirs=["./","//utils/native/lite/include","//kernel/liteos_m/kal/cmsis","//base/iot_hardware/peripheral/interfaces/kits",]}人体感应模块编程(4/5)修改项目IoTFactory目录下的BUILD.gn文件，让人体感应模块编译进入项目程序。lite_component("app"){features=[..."IoTHumanSensor:IoTHumanSensor",]}在IoTMain目录下BUILD.gn增加人体感应IoTHuman.h头文件所在路径static_library("IoTMain"){

...

include_dirs=[...

"../IoTHumanSensor",

]人体感应模块编程(5/5)改IoTMain目录下的IoTFactoryMain.c源文件，添加对人体感应模块函数的调用:#include"IoTHuman.h"voidIoTMainInit(){printf("%d\n",IoTHumanGetStatus());}APP_FEATURE_INIT(IoTMainInit);继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程光敏烟雾模块编程(1/4)

因光敏与烟雾传感器都需要通过ADC模数转换获取数据，所以这两个传感器作为一个功能模块进行封装。IoAdcSensor.h头文件用于声明光敏与烟雾传感器的功能函数：#ifndef__IOTADCSENSOR_H#define__IOTADCSENSOR_H

//获取烟雾传感器输出的电压值floatIoTSmokeGetVoltage();//获取光敏传感器输出的电压值floatIoTLightGetVoltage();#endif光敏烟雾模块编程(2/4)IoTAdcSensor.c源文件中具体实现光敏与烟雾传感器的功能函数，关键函数：floatIoTAdcGetVoltage(intchannel)//获取第channel个ADC通道电压值floatIoTSmokeGetVoltage()//返回烟雾ADC电压值floatIoTLightGetVoltage()//返回光敏ADC电压值voidIoTAdcSensorInit(){//烟雾传感器IO申请使用，配置为输入//光敏传感器IO申请使用IO，配置为输入

}SYS_RUN(IoTAdcSensorInit);光敏烟雾模块编程(3/4)人体感应模块目录下的BUILD.gn编译配置文件:static_library("IoTAdcSensor"){sources=["IoTAdcSensor.c"]include_dirs=["./","//utils/native/lite/include","//kernel/liteos_m/kal/cmsis","//base/iot_hardware/peripheral/interfaces/kits",]}光敏烟雾模块编程(4/4)修改项目IoTFactory目录下的BUILD.gn文件，让人体感应模块编译进入项目程序:lite_component("app"){features=[... "IoTAdcSensor:IoTAdcSensor",]}在IoTMain目录下BUILD.gn增加人体感应IoTHuman.h头文件所在路径static_library("IoTMain"){

...

include_dirs=[

"../IoTAdcSensor",

]}继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程Wi-Fi模块编程(1/3)

工程源码中集成的Wi-Fi驱动与LWIP网络协议栈。创建IoTWi-Fi.h头文件用于声明Wi-Fi连接、断开等功能函数:#ifndef__IOTWi-Fi_H#define__IOTWi-Fi_H#include"Wi-Fi_device.h"//Wi-Fi连接Wi-FiName热点名，passwd为密码intIoTWi-FiConnect(constchar*Wi-FiName,constchar*passwd);voidIoTWi-FiDisconnect();//断开Wi-Fi连接intIoTWi-FiIsConnected();//判断当前Wi-Fi是否已连接char*IoTWi-FiGetIp();//获取当前Wi-Fi的IP地址#endif//__IOTWi-Fi_HWi-Fi模块编程(2/3)IoTWi-Fi.c源文件中具体实现Wi-Fi连接、断开等功能函数，源文件关键函数:/当Wi-Fi连接或断开时触发调用此函数staticvoidOnWi-FiConnectionChanged(intstate,Wi-FiLinkedInfo*info);staticWi-FiEventg_defaultWi-FiEventListener={.OnWi-FiConnectionChanged=OnWi-FiConnectionChanged,};//尝试连接指定Wi-Fi热点inttry_connect_Wi-Fihost(constchar*Wi-Fi_name,constchar*passwd);staticvoid*Wi-FiThreadFunc(void*arg)//自动重连线程函数intIoTWi-FiConnect(constchar*Wi-FiName,constchar*passwd);//创建重连线程函数voidIoTWi-FiDisconnect();//断开连接Wi-Fi模块编程(3/3)IoTWi-Fi目录下的BUILD.gn编译配置文件内容如下：static_library("IoTWi-Fi"){sources=["IoTWi-Fi.c",]include_dirs=["./","//utils/native/lite/include","//kernel/liteos_m/kal/cmsis","//base/iot_hardware/peripheral/interfaces/kits","//foundation/communication/Wi-Fi_lite/interfaces/Wi-Fiservice","//vendor/hisi/hi3861/hi3861/third_party/lwip_sack/include",]}继电器模块编程人体感应模块编程光敏烟雾模块编程Wi-Fi模块编程UDP网络通信模块编程设备端主程序编程UDP网络通信模块编程(1/5)

UDP的Socket编译步骤主要有：1.

通过socket函数与网络协议栈建立联系，指定IPV4版本的UDP协议。intsd=socket(AF_INET,SOCK_DGRAM,0)函数成功得到sd文件描述符，后续操作通过此sd与网络协议栈进行交互操作。2.

通过bind函数绑定使用的IP地址对应的网络设备，

与指定使用端口号。intret=bind(sd,(structsockaddr*)&addr,sizeof(addr));绑定失败返回负数，成功返回0。3.

通过sendto函数向网络协议栈提交传输的数据，并指定目标IP地址与端口信息。sendto(sd,data,data_len,0,&dst_addr,

addr_len);4.

通过recvfrom函数获取网络协议栈接收到的UDP数据包，及发送方IP地址与发送端口信息。recvfrom(sd,rcv_buf,rcv_buf_len,0,