鸿蒙南北向开发基础及项目实战教程 课件7.4 鸿蒙APP端开发

7.4鸿蒙APP端开发本章主要讲述分布式仓库环境监测项目鸿蒙APP端开发。通过学习本节将能够了解分布式仓库环境监测项目鸿蒙APP端开发。通过本节学习可以熟悉：鸿蒙APP端TCP编程鸿蒙APP端UDP编程鸿蒙APP端主程序编程鸿蒙APP端TCP编程鸿蒙APP端UDP编程鸿蒙APP端主程序编程鸿蒙APP端开发(1/8)

首先在DevEcoStudio基于EmptyAbility模板创建IoTFactoryApp工程，并将资源图片文件复制至工程资源目录下的media子文件夹中，然后为工程增加网络访问权限。修改工程configuration目录下的module.json5配置文件，在第15行插入以下内容：

"requestPermissions":[{

"name":"ohos.permission.INTERNET"

}],鸿蒙APP端TCP编程(2/8)

在工程的pages源码目录下创建socketComponent文件夹，并在该文件夹内创建IoTTcpClient.ets源文件。将TCP客户端通信功能封装为IoTTcpClient类，并实现将ArrayBuffer类型的TCP数据转换成字符串的函数。源文件关键函数代码：exportclassIoTTcpClient{//1.创建TCP通信对象，与网络协议栈建立联系privatetcp:socket.TCPSocket=socket.constructTCPSocketInstance();//当创建对象需传入参数：

服务器IP地址、端口号、接收数据的回调函数、TCP连接的回调函数、TCP断开的回调函数constructor(serverIP:string,serverPort:number,tcpRcvCb:Callback<socket.SocketMessageInfo>,tcpConnectCb:AsyncCallback<void>,tcpCloseCb:Callback<void>){//2.绑定使用端口号this.tcp.bind(addr,(err:BusinessError)=>{//设置当接收到TCP数据时，触发调用的回调函数鸿蒙APP端TCP编程(3/8)//设置当接收到TCP数据时，触发调用的回调函数this.tcp.on('message',tcpRcvCb);//设置当TCP通信断开时，触发调用的回调函数this.tcp.on('close',tcpCloseCb);//3.连接服务器端，并设置当连接成功时触发调用的回调函数this.tcp.connect(connOpts,tcpConnectCb);//4.发送数据asyncsendData(s:string){letopts:socket.TCPSendOptions={data:s};this.tcp.send(opts);}//5.关闭TCP通信close(){this.tcp.close();

鸿蒙APP端TCP编程(4/8)//ArrayBuffer转换成字符串exportfunctionarrayBufToString(buffer:ArrayBuffer):string{letdataView:DataView=newDataView(buffer);letstr="";for(leti=0;i<dataView.byteLength;++i){str+=String.fromCharCode(dataView.getUint8(i));}returnstr;}鸿蒙APP端TCP编程(5/8)在Index页面上进行简单的测试。在Index页面上实现在页面初始化时连接TCP服务器以设置回调函数，点击按钮时发出TCP数据，并在Text组件上显示接收到的数据。关键函数代码：structIndex{@Statemessage:string='HelloWorld';privatetcp?:IoTTcpClient;//接收处理的回调函数privatetcpRcvCb=async(sInfo:socket.SocketMessageInfo)=>{lets=arrayBufToString(sInfo.message);//将ArrayBuffer转成字符串//连接成功后的回调函数privatetcpConnectCb=async()=>{this.tcp?.sendData("hellofromclient");//连接成功后发出数据}

鸿蒙APP端TCP编程(6/8)aboutToAppear():void{//创建TCP通信对象，并指定服务器的IP地址、端口号、接收数据的回调函数、连接的回调函数、连接断开的回调函数this.tcp=newIoTTcpClient("",10086,this.tcpRcvCb,this.tcpConnectCb,this.tcpCloseCb);}build(){Column(){Text(this.message)Button('Send').onClick(()=>{//点击按钮时发出数据this.tcp?.sendData("hellotcpClient");})

鸿蒙APP端TCP编程(7/8)在PC上通过Socket调试工具设立TCPServer，然后进行通信测试。Socket调试工具测试输出:鸿蒙APP端TCP编程(8/8)App端程序测试效果:鸿蒙APP端TCP编程鸿蒙APP端UDP编程鸿蒙APP端主程序编程鸿蒙APP端UDP编程(1/2)

将此第5章IoTUdp.ets源文件复制至项目工程的socketComponent文件夹中，然后修改Index.ets源文件，实现当页面初始化时创建IoTUdp对象与指定UDP接收处理的回调函数，然后发出扫描设备的命令，在接收回调函数中由数组记录回复的设备端IP地址，然后在Index页面中由List组件显示在线设备端的IP地址。Index.ets源文件关键代码：structIndex{

privateboradcastIP:string="55";//设备端的UDP广播地址

privateport:number=10086;//设备端的UDP端口号

@StatedevIPList:Array<string>=[];//由动态数组记录所有设备端的IP地址、端口号信息

privateudp?:IoTUdp;//用于扫描设备的UDP通信对象

//UDP接收的回调函数

private

udpRcvCallback=async(sInfo:socket.SocketMessageInfo)=>{

letstr=

arrayBufToString(sInfo.message);

//当设备端回"iamDev"则表示成功扫描到一个设备端

//在动态数组中记录设备端IP地址鸿蒙APP端UDP编程(2/2)aboutToAppear():void{//创建UDP通信对象，并设置接收处理的回调函数this.udp=newIoTUdp(0,this.udpRcvCallback);//页面初始化时发出扫描设备端的命令this.udp.sendData("scanningDev",this.boradcastIP,this.port);}build(){Column(){List(){ForEach(this.devIPList,(ip:string)=>{ListItem(){Text(ip).fontSize(25)}鸿蒙APP端TCP编程鸿蒙APP端UDP编程鸿蒙APP端主程序编程鸿蒙APP端主程序编程(1/8)

主要实现：当App打开时通过UDP广播发出扫描设备的命令，获取在线的所有设备端，并记录它们的IP地址与端口号。然后，在List列表中展示每个设备端的页面组件。在设备页面组件内部，通过TCP协议与设备端的TCP服务器建立连接，并定期向设备发送传感器数据更新的指令，将接收到的传感器数据实时展示在对应的组件上，同时提供控制按钮以打开或关闭设备端的布防状态。

鸿蒙APP端主程序编程(2/8)

在工程的pages目录下创建customeUIComponent文件夹，并在此文件夹中创建IoTDeviceUI.ets源文件，在此源文件中设计每个传感器通用的IoTDeviceSensorUI组件，组件的关键代码：exportstructIoTDeviceSensorUI{

privateimgSrc:ResourceStr='';//记录传感器图像

privatesName:string='';//记录传感器名称

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

build(){

Row({space:10}){

Image(this.imgSrc)//图像组件描述

Text(this.sName).fontSize(18)//传感器名称组件描述

//传感器值组件描述

Text(this.val).fontSize(18).fontWeight(FontWeight.Bold)鸿蒙APP端主程序编程(3/8)

接着customUIComponent文件夹中创建操作每个设备端的IoTDeviceUI.ets页面组件源文件。源文件中实现在组件初始化时TCP连接设备端，在组件退出时断开TCP连接，并通过定时器定时向设备端发出传感器数据更新命令，根据设备端返回的传感器数据更新组件与实现布防开关的控制功能。IoTDeviceUI.ets关键代码：exportstructIoTDeviceUI{//属性成员：记录设备端的IP地址

设备端的端口号TCP通信对象//State变量：人体感应数据

烟雾数据

湿度数据

温度数据

记录TCP客户端是否在线//tcp接收的回调函数privatetcpRcvFunc=async(sInfo:socket.SocketMessageInfo)=>{//根据通信协议获取传感器数据并更新State变量值}//TCP连接成功后触发的回调函数privatetcpConnectFunc=async()=>{//创建定时器，每隔3秒向设备端发出传感器数据的更新命令}鸿蒙APP端主程序编程(4/8)/TCP断开连接后触发的回调函数privatetcpCloseFunc=()=>{//关闭定时器}aboutToAppear():void{//当页面组件将要出现时触发执行的函数//创建TCP通信对象this.tcpClient=newIoTTcpClient(this.sIP,this.port,this.tcpRcvFunc,this.tcpConnectFunc,this.tcpCloseFunc);}//当页面将要销毁或隐藏时触发执行的函数aboutToDisappear():void{

关闭TCP通信}鸿蒙APP端主程序编程(5/8)build(){Column({space:10}){...//分别以四个传感器组件呈现湿度、温度、烟雾、人体传感器的数据IoTDeviceSensorUI({imgSrc:$r('app.media.humidity'),sName:'相对湿度:',val:this.humidity})IoTDeviceSensorUI({imgSrc:$r('app.media.temperature'),sName:'相对温度:',val:this.temperature})IoTDeviceSensorUI({imgSrc:$r('app.media.smoke'),sName:'烟雾浓度:',val:this.smoke})IoTDeviceSensorUI({imgSrc:$r('app.media.user2'),sName:'人体感应:',val:this.human})鸿蒙APP端主程序编程(5/8)//照明灯器控制Row({space:10}){Image($r('app.media.alarm')).width(40).height(40)//按钮图像组件描述Text('布防开关').fontSize(18)//按钮文字组件描述Toggle({type:ToggleType.Switch})//按钮开关组件描述.onChange((isOn:boolean)=>{/*手机端发:"cmdDev:guardOn",设备端回复"dataDev:guardOn"

手机端发:"cmdDev:guardOff",设备端回复"dataDev:guardOff"*/