entry\src\main\ets
│ ├─common–通用常量和數(shù)據(jù)
│ ├─entryability – EntryAbility.ts 程序入口
│ ├─entryformability–EntryFormAbility.ts卡片入口
│ ├─pages—Index.ts 應(yīng)用主頁(yè)
│ ├─services
│ ├─widget
│ │ └─pages—2x2 ArkTS卡片
│ └─widget24
│ └─pages—2x4卡片
└─resources —資源文件目錄

@Entry @Component struct Index {
    build() { Column({space:10})
    {
        // 背景圖
        Image($r("app.media.Ebike"))
            ···
        Flex()
        {
            // 響鈴找車
            Column()
            {
                if(this.display_flag==1)
                {
                Image($r("app.media.ic_ring_on_filled"))
                .height("55%")
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
                .onClick(() => { this.display_flag +=1; if(this.display_flag>2)
                    {
                    this.display_flag =1;
                    }
                })
            }
            if(this.display_flag==2)
            {
            Image($r("app.media.ic_ring_off_filled"))
            .height("55%")
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
            .onClick(() => { this.display_flag+=1; if(this.display_flag>2)
                    {
                    this.display_flag =1;
                    }
                })
            }
            Text("響鈴找車")
            ···
        }
        // 獲取定位
        Column()
        {
        Image($r("app.media.ic_statusbar_gps"))
        ····
        })
        Text(this.bike_location)
        ····
        }
        ····
        }.width("95%").height("10%")
        // 電量 設(shè)置

        Flex({ direction: FlexDirection.Row,justifyContent: FlexAlign.SpaceBetween,})
        {
        // 電量
        Column() { Row()
        {
        Image($r("app.media.ic_power"))
        ···
        // 電量值
        Text(this.bike_power.toString() + '%')
        ···
        }
        Text("剩余電量")
        ···
        }
        ···
        // 設(shè)置
        Column() { Image($r("app.media.ic_public_settings_filled"))
        ···
        Text("車輛設(shè)置")
        ···
        }···
        }

        // 騎行數(shù)據(jù)
        Flex({ direction: FlexDirection.Column})
        {
        Row()
        {
        Text(" 累計(jì)騎行")
        ··· Blank()
        Text("預(yù)計(jì)續(xù)航 ")
        ···
        }
        }
        }
    }
}

// 1. 首先要引入模塊，創(chuàng)建TCPSocket對(duì)象
import socket from '@ohos.net.socket'
// 創(chuàng)建一個(gè)TCPSocket連接，返回一個(gè)TCPSocket對(duì)象。
let tcp = socket.constructTCPSocketInstance();
tcpInit() {
    // 2. 綁定IP地址和端口。
    let bindAddress = { address: '192.168.xx.xx',
    port: 1234, // 綁定端口，如1234
    family: 1
    };
    tcp.bind(bindAddress, err => { if (err) {
    console.log('bind fail'); return;
    }
    console.log('bind success');
    }
    // 3.其次是訂閱TCPSocket相關(guān)的訂閱事件，如on message，有數(shù)據(jù)傳入 
    tcp.on('connect', () => {
    this.tcp_status = '連接ok' 
        prompt.showToast({message:this.tcp_status})
    });
    tcp.on('message', value => {
    this.message_recv = this.resolveArrayBuffer(value.message) 
        prompt.showToast({message:this.message_recv})
    });
    tcp.on('close', () => { 
        prompt.showToast({message:"tcp close"})
    });
}
// 4.連接到指定的IP地址和端口。 tcpConnect() {
tcp.getState().then((data) => {
        if (data.isClose) { this.tcpInit()
        }
        // 連接
        tcp.connect(
        {address: { address: this.GetSetIP, port: this.localAddr.port, family: 1}, timeout: 2000}
        ).then(() => {
        	prompt.showToast({message:" tcp connect successful"})
        }).catch((error) => { prompt.showToast({message:"tcp connect failed"})
     })
  })
}
// 5.發(fā)送數(shù)據(jù) 
tcpSend() {
tcp.getState().then((data) => 
  { if (data.isConnected) {
    // 發(fā)送消息

    tcp.send(
    { data: this.message_send, }
    ).then(() => {
    prompt.showToast({message:"send message successful"})
    }).catch((error) => { prompt.showToast({message:"send failed"})
    })
    } else {
    prompt.showToast({message:"tcp not connect"})
  }
 })
}
// 6. TCP連接操作界面通過(guò)設(shè)置按鈕控制，點(diǎn)擊設(shè)置按鈕即可彈出，可輸入車輛IP地址，確認(rèn)連接
if(this.show_setting==1)
{
    Flex({ direction: FlexDirection.Row})
    {
        Row()
        {
            Text('車輛IP')
            TextInput({ placeholder: '192.168.43.164'})
            .onChange((value: string) => { this.InputIP = value
            })
            Button('連接').onClick(()=>
            {
           		 this.GetSetIP=this.InputIP; 
                 this.tcpInit()
            })
        }
    }
}

// 7.點(diǎn)擊組件，實(shí)現(xiàn)發(fā)送指令，并獲取對(duì)應(yīng)數(shù)據(jù)，這里以電量為例： 
Image($r("app.media.ic_power"))
        .height("80%")
        .objectFit(ImageFit.Contain)
        .onClick(() => {
        // this.bike_power = 99;
        this.message_send = MSG_CMD.GET_BIKE_POWER this.tcpSend()
        this.bike_power = this.message_recv;
    })
/ 8.連接使用完畢后，主動(dòng)關(guān)閉。取消相關(guān)事件的訂閱。 
setTimeout(() => {
	tcp.close((err) => { console.log('close socket.')
	});
	tcp.off('message');
	tcp.off('connect');
	tcp.off('close');
}, 30 * 1000);

//form_config.json
"colorMode": "auto", "isDefault": true, "updateEnabled": false, "scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*2", "supportDimensions": [
"2*2"
]

// Widget24Card.ets:
let storage = new LocalStorage();
@Entry(storage) @Component
struct WidgetCard24 {
    ···
    @LocalStorageProp('bike_power') bike_power: number = 50;
    ··· 
    build() {
        Row({space:5}) {
            // 背景圖 電量
            Column()
            {
                Row()
                {
                    Image($r("app.media.ic_power"))
                    ···
                    .onClick(() => { postCardAction(this, {
                    'action': 'message',
                    'params': { 'bike_power': 55
                    }
                    });
                    })
                    // 電量值
                Text(`${this.bike_power}`+'%')//this.bike_power.toString()+'%')
                ···
            }
            ···
        }
    }
}

// EntryFormAbility.ets:
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; import formProvider from '@ohos.app.form.formProvider';
export default class EntryFormAbility extends FormExtensionAbility {

find_bike: string = "app.media.ic_ring_off" bike_power: number = 55.6
display_flag : number = 1 
    bike_location: string = "長(zhǎng)安街1號(hào)" 
    bike_distance: number = 520
	bike_duration: number = 479 
    my_font_size : number = 12

formData = {
    'title': this.find_bike, 'bike_power': this.bike_power, 
    'bike_distance':this.bike_distance, 'bike_duration':this.bike_duration, 
    'bike_location':this.bike_location,
    'detail': 'Detail Update Success.', // 和卡片布局中對(duì)應(yīng)
}

onFormEvent(formId, message) {
        console.info(`FormAbility onEvent, formId = ${formId}, message:
    ${JSON.stringify(message)}`);
    let formInfo = formBindingData.createFormBindingData(formData) 
    formProvider.updateForm(formId, formInfo).then((data) => {
            console.info('FormAbility updateForm success.' + JSON.stringify(data));
        }).catch((error) => {
        console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
        })
    }
    ...
}