6.4鴻蒙APP端開發(fā)本章主要講述工廠物聯(lián)網(wǎng)智能化項目鴻蒙APP端開發(fā)。通過學(xué)習(xí)本節(jié)將能夠了解工廠物聯(lián)網(wǎng)智能化項目鴻蒙APP端開發(fā)。通過本節(jié)學(xué)習(xí)可以熟悉：鴻蒙APP端的UDP編程鴻蒙APP端的主程序編程鴻蒙APP端的UDP編程鴻蒙APP端的主程序編程鴻蒙APP端開發(fā)(1/5)

首先在DevEcoStudio基于EmptyAbility模板創(chuàng)建IoTFactoryApp工程，并將資源圖片文件復(fù)制至工程資源目錄下的media子文件夾中，然后為工程增加網(wǎng)絡(luò)訪問權(quán)限。修改工程configuration目錄下的module.json5配置文件，在第15行插入以下內(nèi)容：

"requestPermissions":[{

"name":"ohos.permission.INTERNET"

}],鴻蒙APP端的UDP編程(2/5)

在工程的pages源碼目錄下創(chuàng)建IoTUdp.ets源文件，在此源文件中將UDP通信功能封裝成IoTUdp類，實現(xiàn)ArrayBuffer轉(zhuǎn)換成字符串的函數(shù)。IoTUdp.ets關(guān)鍵代碼：exportclassIoTUdp{

//1.創(chuàng)建Udp通信對象，與網(wǎng)絡(luò)協(xié)議棧建立聯(lián)系

private

udp:socket.UDPSocket=socket.constructUDPSocketInstance();

constructor(myPort:number,

udpRcvCb:Callback<socket.SocketMessageInfo>){

//2.綁定使用端口號

this.udp.bind(bindAddr,(err:BusinessError)=>{//3.設(shè)置UDP數(shù)據(jù)的接收處理回調(diào)函數(shù)this.udp.on('message',udpRcvCb);//4.設(shè)置支持UDP廣播功能opts.broadcast=true;this.udp.setExtraOptions(opts);鴻蒙APP端的UDP編程(3/5)//5.UDP數(shù)據(jù)發(fā)送功能asyncsendData(s:string,dstIP:string,dstPort:number){letopts:socket.UDPSendOptions={}assocket.UDPSendOptions;opts.data=s;//UDP數(shù)據(jù)opts.address=addr;//目標(biāo)IP與端口號//發(fā)出UDP數(shù)據(jù)this.udp.send(opts,(err:BusinessError)=>{//ArrayBuffer轉(zhuǎn)換成字符串exportfunctionarrayBufToString(buffer:ArrayBuffer):string{returnstr;}鴻蒙APP端的UDP編程(4/5)在Index頁面上進(jìn)行簡單的測試使用UDP通信：privateudp?:IoTUdp;//Udp接收回調(diào)函數(shù)privateudpRcvCallback=async(data:socket.SocketMessageInfo)=>{letstr=arrayBufToString(data.message);console.log("udpreceived:"+str);}aboutToAppear():void{//創(chuàng)建UDP通信對象this.udp=newIoTUdp(0,this.udpRcvCallback);//發(fā)出設(shè)備掃描命令this.udp.sendData("scanningDev",this.devIP,this.devPort);}鴻蒙APP端的UDP編程(5/5)Button("Relay0On").fontSize(30).fontWeight(FontWeight.Bold).onClick(()=>{//向設(shè)備端發(fā)出繼電器0導(dǎo)通的命令this.udp?.sendData("cmdDev:relay0:on",this.devIP,this.devPort);})鴻蒙APP端的UDP編程鴻蒙APP端的主程序編程鴻蒙APP端的主程序編程

主要實現(xiàn)：當(dāng)App打開時通過UDP廣播發(fā)出掃描設(shè)備的命令，獲取在線的所有設(shè)備端，并記錄它們的IP地址與端口號。然后在List列表中顯示每個設(shè)備的頁面組件，并在設(shè)備頁面組件上顯示設(shè)備端的傳感器數(shù)據(jù)，并提供按鈕控制設(shè)備端繼電器功能。鴻蒙APP端的主程序編程在工程的pages目錄下創(chuàng)建IoTDeviceUI.ets源文件，先在此源文件中設(shè)計煙霧、光敏、人體感應(yīng)等傳感器通用的IoTDeviceSensorUI組件:鴻蒙APP端的主程序編程IoTDeviceSensorUI組件的關(guān)鍵代碼：structIoTDeviceSensorUI{

//屬性成員：記錄傳感器圖像、記錄傳感器名稱

@Propval:string='';//綁定一個狀態(tài)變量，val的值跟隨此狀態(tài)變量變化

build(){

Row({space:10}){

Image(this.imgSrc)

.width(40).height(40)

Text(this.sName).fontSize(18)

Blank().width(60)

Text(this.val).fontSize(18).fontWeight(FontWeight.Bold)

.width(80).fontColor('#ff14665e')

.textAlign(TextAlign.Center)鴻蒙APP端的主程序編程設(shè)計每個設(shè)備端的IoTDeviceUI頁面組件，并在組件中通過獨自的UDP通信對象實現(xiàn)傳感器數(shù)據(jù)的定時更新與繼電器的控制功能。IoTDeviceUI組件關(guān)鍵代碼：exportstructIoTDeviceUI{//屬性成員：

記錄UDP通信對象IP地址

端口號//@State變量:光敏數(shù)據(jù)

人體感應(yīng)數(shù)據(jù)

煙霧數(shù)據(jù)privateudpRcvFunc=async(sInfo:socket.SocketMessageInfo)=>{//UDP接收的回調(diào)函數(shù)lets=arrayBufToString(sInfo.message);//將ArrayBuffer轉(zhuǎn)換成字符串//實現(xiàn)協(xié)議：手機(jī)端發(fā):"cmdDev:updateSensor",設(shè)備端回復(fù)"dataDev:煙霧數(shù)據(jù)：光敏數(shù)據(jù)：人體感應(yīng)數(shù)據(jù)"}aboutToAppear():void{//當(dāng)頁面組件將要出現(xiàn)時觸發(fā)執(zhí)行的函數(shù)//創(chuàng)建UDP通信對象//創(chuàng)建定時器，每隔3秒向設(shè)備端發(fā)出傳感器數(shù)據(jù)的更新命令}鴻蒙APP端的主程序編程//當(dāng)頁面將要銷毀或隱藏時觸發(fā)執(zhí)行的函數(shù)aboutToDisappear():void{//關(guān)閉UDP通信,停止定時器}build(){Column({space:10}){Text("設(shè)備IP："+this.sIP+"端口："+this.port)//分別以三個傳感器組件呈現(xiàn)濕度、溫度與煙霧傳感器的數(shù)據(jù)IoTDeviceSensorUI({imgSrc:$r('app.media.smoke'),sName:'煙霧濃度:',val:this.smoke})IoTDeviceSensorUI({imgSrc:$r('app.media.light'),sName:'光敏亮度:',val:this.light})IoTDeviceSensorUI({imgSrc:$r('app.media.user2'),sName:'人體感應(yīng):',val:this.human})鴻蒙APP端的主程序編程//照明燈器控制、聲光警報器控制Row({space:10}){Image($r('app.media.light2')).width(40).height(40)Text('照明燈控制').fontSize(18)Blank().width(60)Toggle({type:ToggleType.Switch}).size({width:80,height:30}).onChange((isOn:boolean)=>{lets=isOn?"on":"off";s="cmdDev:relay0:"+s;this.udp?.sendData(s,this.sIP,this.port);})}鴻蒙APP端的主程序編程組件設(shè)計完成后，接著在Index頁面上實現(xiàn)程序功能。頁面初始化時發(fā)出掃描設(shè)備命令，并由一個動態(tài)數(shù)組存放回復(fù)的設(shè)備端信息，然后再根據(jù)動態(tài)數(shù)組中記錄的設(shè)備信息創(chuàng)建設(shè)備頁面組件。Index.ets源文件關(guān)鍵代碼：//記錄每個設(shè)備端的IP地址與端口號classUdpDevice{publicsIP:string="";//記錄設(shè)備IPpublicport:number=0;//記錄設(shè)備端口號constructor(ip:string,port:number){this.sIP=ip;this.port=port;}}鴻蒙APP端的主程序編程structIndex{//屬性成員：設(shè)備端的UDP廣播地址

設(shè)備端的UDP端口號@StatedevList:Array<UdpDevice>=[];//由動態(tài)數(shù)組記錄所有設(shè)備端的IP地址、端口號信息privateudp?:IoTUdp;//用于掃描設(shè)備的UDP通信對象//UDP接收的回調(diào)函數(shù)privateudpRcvCallback=async(sInfo:socket.SocketMessageInfo)=>{letstr=arrayBufToString(sInfo.message);//當(dāng)設(shè)備端回"iamDev"則表示成功掃描到一個設(shè)備端}aboutToAppear():void{//創(chuàng)建UDP通信對象，并設(shè)置接收處理的回調(diào)函數(shù)//頁面初始化時發(fā)出掃描設(shè)備端的命令}

鴻蒙APP端的主程序編程aboutToDisappear():void{//頁面關(guān)閉時關(guān)閉UDP通信}build(){Column({space:10}){//遍歷記錄設(shè)備端信息的動態(tài)數(shù)組，并創(chuàng)建相應(yīng)的設(shè)備頁面組件List