通過標準WiFi AT指令控制WiFi模塊,實現網絡連接、數據通信和設備管理功能。支持ESP8266/ESP32等常見WiFi模塊,適用於物聯網設備調試和網絡通信測試。
- 核心功能 AT指令控制:支持發送標準WiFi AT指令
WiFi網絡管理:掃描、連接、斷開WiFi網絡
TCP通信:建立TCP連接,發送接收數據
狀態監控:實時顯示WiFi連接狀態、信號強度、IP地址
響應記錄:完整記錄AT指令發送和響應
- 支持的AT指令 基礎指令:AT、AT+RST、AT+GMR等
WiFi模式:STA模式、AP模式、混合模式設置
網絡連接:掃描AP、連接WiFi、斷開連接、查看連接狀態
TCP/IP功能:單連接/多連接模式、建立TCP連接、發送數據、透傳模式
AP配置:設置AP參數、查看連接設備
- 界面設計 三選項卡布局(指令控制、網絡管理、TCP通信)
實時狀態顯示欄
響應數據顏色編碼區分
網絡列表可視化展示
統計信息卡片展示
- 模擬特性 模擬WiFi網絡掃描和連接過程
模擬信號強度變化
模擬TCP數據通信
模擬AT指令響應生成
5.適用場景
ESP8266/ESP32開發調試
物聯網設備WiFi配置
網絡通信測試
遠程設備監控
智能家居設備配置
// WiFiATController.ets
import { wifi } from '@kit.ConnectivityKit';
import { common } from '@kit.ArkTS';
// WiFi連接狀態枚舉
enum WiFiState {
DISCONNECTED = 'disconnected',
SCANNING = 'scanning',
CONNECTING = 'connecting',
CONNECTED = 'connected',
ERROR = 'error'
}
// WiFi網絡信息
interface WiFiNetwork {
ssid: string;
bssid: string;
securityType: number;
signalLevel: number;
frequency: number;
timestamp: number;
}
// AT指令響應
interface ATResponse {
timestamp: number;
command: string;
response: string;
status: 'success' | 'error' | 'timeout';
}
@Entry
@Component
struct WiFiATController {
// WiFi狀態
@State wifiState: WiFiState = WiFiState.DISCONNECTED;
@State currentSSID: string = '';
@State ipAddress: string = '';
@State macAddress: string = '';
@State signalStrength: number = 0;
// AT指令相關
@State currentCommand: string = '';
@State commandHistory: string[] = [];
@State atResponses: ATResponse[] = [];
// 網絡列表
@State wifiNetworks: WiFiNetwork[] = [];
@State selectedNetworkIndex: number = -1;
// 連接參數
@State ssid: string = 'MyWiFi';
@State password: string = 'password123';
@State serverIP: string = '192.168.1.100';
@State serverPort: number = 8080;
@State connectionMode: 'STA' | 'AP' = 'STA';
// TCP/UDP連接
@State tcpConnected: boolean = false;
@State connectionId: number = 0;
@State receivedData: string = '';
// UI狀態
@State currentView: string = 'control';
@State showPassword: boolean = false;
@State showServerConfig: boolean = false;
@State autoReconnect: boolean = true;
// 統計信息
@State stats = {
totalCommands: 0,
bytesSent: 0,
bytesReceived: 0,
connectionDuration: 0,
lastConnectedTime: 0
};
// WiFi常用AT指令
private wifiCommands = [
// 基礎指令
{ name: 'AT測試', cmd: 'AT', desc: '測試模塊響應' },
{ name: '重啓模塊', cmd: 'AT+RST', desc: '重啓WiFi模塊' },
{ name: '查看版本', cmd: 'AT+GMR', desc: '查看固件版本' },
// WiFi模式設置
{ name: '設置STA模式', cmd: 'AT+CWMODE=1', desc: '設置為Station模式' },
{ name: '設置AP模式', cmd: 'AT+CWMODE=2', desc: '設置為Access Point模式' },
{ name: '設置混合模式', cmd: 'AT+CWMODE=3', desc: '設置為Station+AP模式' },
// 網絡連接
{ name: '掃描網絡', cmd: 'AT+CWLAP', desc: '掃描可用WiFi網絡' },
{ name: '連接AP', cmd: `AT+CWJAP="${this.ssid}","${this.password}"`, desc: '連接到指定WiFi' },
{ name: '斷開連接', cmd: 'AT+CWQAP', desc: '斷開WiFi連接' },
{ name: '查看連接', cmd: 'AT+CWJAP?', desc: '查看當前連接狀態' },
// TCP/IP功能
{ name: '設置單連接', cmd: 'AT+CIPMUX=0', desc: '設置為單連接模式' },
{ name: '設置多連接', cmd: 'AT+CIPMUX=1', desc: '設置為多連接模式' },
{ name: '建立TCP連接', cmd: `AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, desc: '建立TCP連接' },
{ name: '關閉連接', cmd: 'AT+CIPCLOSE', desc: '關閉TCP連接' },
{ name: '發送數據', cmd: 'AT+CIPSEND=10', desc: '發送指定長度數據' },
{ name: '啓用透傳', cmd: 'AT+CIPMODE=1', desc: '啓用透明傳輸模式' },
// AP模式設置
{ name: '設置AP參數', cmd: 'AT+CWSAP="ESP8266","password",1,3', desc: '配置AP參數' },
{ name: '查看連接設備', cmd: 'AT+CWLIF', desc: '查看連接到AP的設備' },
// 其他功能
{ name: '查看IP地址', cmd: 'AT+CIFSR', desc: '查看IP地址' },
{ name: '設置串口波特率', cmd: 'AT+CIOBAUD=115200', desc: '設置串口波特率' },
{ name: '深度睡眠', cmd: 'AT+GSLP=3600000', desc: '進入深度睡眠模式' }
];
aboutToAppear() {
// 初始化模擬數據
this.initializeMockNetworks();
// 獲取設備信息
this.getDeviceInfo();
// 啓動狀態更新
this.startStatusMonitor();
}
// 初始化模擬網絡列表
initializeMockNetworks() {
const networks: WiFiNetwork[] = [
{ ssid: 'HomeWiFi_5G', bssid: '00:11:22:33:44:55', securityType: 3, signalLevel: 90, frequency: 5745, timestamp: Date.now() },
{ ssid: 'Office_NET', bssid: 'AA:BB:CC:DD:EE:FF', securityType: 2, signalLevel: 75, frequency: 2412, timestamp: Date.now() },
{ ssid: 'Guest_WiFi', bssid: '11:22:33:44:55:66', securityType: 1, signalLevel: 60, frequency: 2437, timestamp: Date.now() },
{ ssid: 'TP-Link_1234', bssid: '22:33:44:55:66:77', securityType: 3, signalLevel: 45, frequency: 2462, timestamp: Date.now() },
{ ssid: 'Huawei_AP', bssid: '33:44:55:66:77:88', securityType: 2, signalLevel: 30, frequency: 2484, timestamp: Date.now() }
];
this.wifiNetworks = networks;
}
// 獲取設備信息
getDeviceInfo() {
// 模擬獲取設備信息
this.macAddress = 'AA:BB:CC:DD:EE:FF';
this.ipAddress = '192.168.1.' + Math.floor(Math.random() * 100 + 100);
}
// 啓動狀態監控
startStatusMonitor() {
setInterval(() => {
this.updateWiFiStatus();
this.updateStatistics();
}, 3000);
}
// 更新WiFi狀態
updateWiFiStatus() {
// 模擬狀態變化
if (this.wifiState === WiFiState.CONNECTED) {
this.signalStrength = Math.floor(Math.random() * 30) + 70;
} else if (this.wifiState === WiFiState.SCANNING) {
this.wifiState = Math.random() > 0.3 ? WiFiState.CONNECTING : WiFiState.DISCONNECTED;
}
// 更新連接時長
if (this.wifiState === WiFiState.CONNECTED && this.stats.lastConnectedTime > 0) {
this.stats.connectionDuration = Math.floor((Date.now() - this.stats.lastConnectedTime) / 1000);
}
}
// 更新統計數據
updateStatistics() {
// 模擬數據增長
if (this.tcpConnected) {
this.stats.bytesReceived += Math.floor(Math.random() * 100);
this.stats.bytesSent += Math.floor(Math.random() * 50);
}
}
// 掃描WiFi網絡
scanNetworks() {
this.wifiState = WiFiState.SCANNING;
this.addResponse('AT+CWLAP', '掃描WiFi網絡中...', 'success');
// 模擬掃描過程
setTimeout(() => {
this.wifiState = WiFiState.DISCONNECTED;
this.addResponse('AT+CWLAP', this.formatScanResults(), 'success');
}, 2000);
}
// 格式化掃描結果
formatScanResults(): string {
let result = '+CWLAP:(3,"HomeWiFi_5G",-45,"00:11:22:33:44:55",1,5745)\n';
result += '+CWLAP:(2,"Office_NET",-55,"AA:BB:CC:DD:EE:FF",1,2412)\n';
result += '+CWLAP:(1,"Guest_WiFi",-65,"11:22:33:44:55:66",1,2437)\n';
result += 'OK';
return result;
}
// 連接WiFi網絡
connectToWiFi() {
if (!this.ssid.trim()) {
this.showToast('請輸入SSID');
return;
}
this.wifiState = WiFiState.CONNECTING;
this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, '連接中...', 'success');
// 模擬連接過程
setTimeout(() => {
if (Math.random() > 0.1) { // 90%成功率
this.wifiState = WiFiState.CONNECTED;
this.currentSSID = this.ssid;
this.signalStrength = 85;
this.stats.lastConnectedTime = Date.now();
this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, 'WIFI CONNECTED\nWIFI GOT IP\nOK', 'success');
// 獲取IP地址
setTimeout(() => {
this.getIPAddress();
}, 500);
} else {
this.wifiState = WiFiState.ERROR;
this.addResponse(`AT+CWJAP="${this.ssid}","${this.password}"`, 'ERROR\nFAIL', 'error');
}
}, 3000);
}
// 斷開WiFi連接
disconnectWiFi() {
this.wifiState = WiFiState.DISCONNECTED;
this.currentSSID = '';
this.ipAddress = '';
this.tcpConnected = false;
this.addResponse('AT+CWQAP', 'OK', 'success');
}
// 獲取IP地址
getIPAddress() {
this.addResponse('AT+CIFSR', '查詢IP地址...', 'success');
setTimeout(() => {
const response = `+CIFSR:STAIP,"${this.ipAddress}"\n+CIFSR:STAMAC,"${this.macAddress}"\nOK`;
this.addResponse('AT+CIFSR', response, 'success');
}, 500);
}
// 建立TCP連接
establishTCPConnection() {
if (!this.serverIP.trim() || !this.serverPort) {
this.showToast('請配置服務器地址和端口');
return;
}
this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, '連接中...', 'success');
setTimeout(() => {
if (Math.random() > 0.15) { // 85%成功率
this.tcpConnected = true;
this.connectionId = 0;
this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, 'CONNECT\nOK', 'success');
} else {
this.addResponse(`AT+CIPSTART="TCP","${this.serverIP}",${this.serverPort}`, 'ERROR\nCLOSED', 'error');
}
}, 2000);
}
// 關閉TCP連接
closeTCPConnection() {
this.tcpConnected = false;
this.addResponse('AT+CIPCLOSE', '0,CLOSED\nOK', 'success');
}
// 發送數據
sendData() {
if (!this.tcpConnected) {
this.showToast('請先建立TCP連接');
return;
}
const testData = 'Hello,WiFi! ' + Date.now();
const length = testData.length;
this.addResponse(`AT+CIPSEND=${length}`, '>', 'success');
setTimeout(() => {
// 發送數據
this.addResponse(testData, 'SEND OK', 'success');
this.stats.bytesSent += length;
// 模擬接收響應
setTimeout(() => {
const response = `+IPD,${length}:${testData}`;
this.receivedData = response;
this.stats.bytesReceived += length;
this.addResponse('', response, 'success');
}, 500);
}, 1000);
}
// 發送AT指令
sendATCommand() {
const cmd = this.currentCommand.trim();
if (!cmd) {
this.showToast('請輸入AT指令');
return;
}
// 保存到歷史記錄
this.commandHistory.unshift(cmd);
if (this.commandHistory.length > 20) {
this.commandHistory.pop();
}
// 發送指令
this.addResponse(cmd, '處理中...', 'success');
this.stats.totalCommands++;
// 模擬響應
setTimeout(() => {
this.simulateATResponse(cmd);
}, 500 + Math.random() * 1000);
this.currentCommand = '';
}
// 模擬AT響應
simulateATResponse(command: string) {
let response = '';
let status: 'success' | 'error' | 'timeout' = 'success';
if (command === 'AT') {
response = 'OK';
} else if (command === 'AT+RST') {
response = 'OK';
setTimeout(() => {
this.wifiState = WiFiState.DISCONNECTED;
this.tcpConnected = false;
}, 1000);
} else if (command === 'AT+GMR') {
response = 'AT version:1.7.0.0\nSDK version:3.0.0\ncompile time:Jan 10 2023\nOK';
} else if (command.startsWith('AT+CWMODE=')) {
const mode = command.charAt(10);
response = 'OK';
this.connectionMode = mode === '2' ? 'AP' : 'STA';
} else if (command === 'AT+CWLAP') {
response = this.formatScanResults();
} else if (command.startsWith('AT+CWJAP')) {
response = 'WIFI CONNECTED\nWIFI GOT IP\nOK';
this.wifiState = WiFiState.CONNECTED;
} else if (command === 'AT+CWQAP') {
response = 'OK';
this.wifiState = WiFiState.DISCONNECTED;
} else if (command === 'AT+CWJAP?') {
if (this.wifiState === WiFiState.CONNECTED) {
response = `+CWJAP:"${this.currentSSID}","${this.macAddress}",1,${this.signalStrength},0,0\nOK`;
} else {
response = 'No AP\nOK';
}
} else if (command.startsWith('AT+CIPSTART')) {
response = 'CONNECT\nOK';
this.tcpConnected = true;
} else if (command === 'AT+CIPCLOSE') {
response = '0,CLOSED\nOK';
this.tcpConnected = false;
} else if (command.startsWith('AT+CIPSEND=')) {
response = '>\nSEND OK';
} else if (command === 'AT+CIFSR') {
response = `+CIFSR:STAIP,"${this.ipAddress}"\n+CIFSR:STAMAC,"${this.macAddress}"\nOK`;
} else {
// 默認響應
response = Math.random() > 0.2 ? 'OK' : 'ERROR';
status = response === 'OK' ? 'success' : 'error';
}
// 更新響應
const lastIndex = this.atResponses.length - 1;
if (lastIndex >= 0) {
this.atResponses[lastIndex] = {
...this.atResponses[lastIndex],
response: response,
status: status
};
}
}
// 添加響應記錄
addResponse(command: string, response: string, status: 'success' | 'error' | 'timeout') {
this.atResponses.unshift({
timestamp: Date.now(),
command: command,
response: response,
status: status
});
if (this.atResponses.length > 50) {
this.atResponses.pop();
}
}
// 清空響應記錄
clearResponses() {
this.atResponses = [];
}
// 選擇網絡
selectNetwork(index: number) {
this.selectedNetworkIndex = index;
const network = this.wifiNetworks[index];
if (network) {
this.ssid = network.ssid;
}
}
// 獲取WiFi狀態顏色
getWiFiColor(): string {
switch (this.wifiState) {
case WiFiState.CONNECTED: return '#4CAF50';
case WiFiState.CONNECTING: return '#FFC107';
case WiFiState.SCANNING: return '#2196F3';
case WiFiState.ERROR: return '#F44336';
default: return '#757575';
}
}
// 獲取WiFi狀態文本
getWiFiText(): string {
switch (this.wifiState) {
case WiFiState.CONNECTED: return '已連接';
case WiFiState.CONNECTING: return '連接中';
case WiFiState.SCANNING: return '掃描中';
case WiFiState.ERROR: return '連接錯誤';
default: return '未連接';
}
}
// 獲取信號強度圖標
getSignalIcon(level: number): string {
if (level >= 80) return '📶';
if (level >= 60) return '📶';
if (level >= 40) return '📶';
if (level >= 20) return '📶';
return '📶';
}
// 獲取安全類型文本
getSecurityText(type: number): string {
switch (type) {
case 1: return 'WEP';
case 2: return 'WPA-PSK';
case 3: return 'WPA2-PSK';
case 4: return 'WPA/WPA2';
default: return '開放';
}
}
// 顯示提示
showToast(message: string) {
console.log('Toast:', message);
}
build() {
Column({ space: 0 }) {
// 頂部狀態欄
Row({ space: 12 }) {
// WiFi狀態
Row({ space: 8 }) {
Circle({ width: 12, height: 12 })
.fill(this.getWiFiColor())
Column({ space: 2 }) {
Text(this.getWiFiText())
.fontSize(14)
.fontColor(this.getWiFiColor())
if (this.wifiState === WiFiState.CONNECTED) {
Text(this.currentSSID)
.fontSize(10)
.fontColor('#666666')
}
}
}
.layoutWeight(1)
// 連接信息
if (this.wifiState === WiFiState.CONNECTED) {
Row({ space: 12 }) {
Column({ space: 2 }) {
Text(this.ipAddress)
.fontSize(12)
.fontColor('#2196F3')
Text('IP地址')
.fontSize(10)
.fontColor('#666666')
}
Column({ space: 2 }) {
Text(this.signalStrength + '%')
.fontSize(12)
.fontColor('#FF9800')
Text('信號強度')
.fontSize(10)
.fontColor('#666666')
}
if (this.tcpConnected) {
Badge({
count: 'TCP已連接',
position: BadgePosition.Right,
color: '#4CAF50'
})
}
}
}
}
.width('100%')
.padding(16)
.backgroundColor('#FFFFFF')
.border({ bottom: { width: 1, color: '#E0E0E0' } })
// 選項卡
Row({ space: 0 }) {
Button('指令控制')
.fontSize(14)
.fontColor(this.currentView === 'control' ? '#2196F3' : '#666666')
.backgroundColor(this.currentView === 'control' ? '#E3F2FD' : 'transparent')
.layoutWeight(1)
.height(48)
.borderRadius(0)
.onClick(() => { this.currentView = 'control'; })
Button('網絡管理')
.fontSize(14)
.fontColor(this.currentView === 'network' ? '#2196F3' : '#666666')
.backgroundColor(this.currentView === 'network' ? '#E3F2FD' : 'transparent')
.layoutWeight(1)
.height(48)
.borderRadius(0)
.onClick(() => { this.currentView = 'network'; })
Button('TCP通信')
.fontSize(14)
.fontColor(this.currentView === 'tcp' ? '#2196F3' : '#666666')
.backgroundColor(this.currentView === 'tcp' ? '#E3F2FD' : 'transparent')
.layoutWeight(1)
.height(48)
.borderRadius(0)
.onClick(() => { this.currentView = 'tcp'; })
}
.width('100%')
.border({ bottom: { width: 1, color: '#E0E0E0' } })
// 內容區域
Scroll() {
Column({ space: 16 }) {
// 指令控制視圖
if (this.currentView === 'control') {
// AT指令輸入
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('📟')
.fontSize(20)
Text('AT指令控制枱')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
Row({ space: 8 }) {
TextInput({ text: this.currentCommand })
.layoutWeight(1)
.fontSize(14)
.backgroundColor('#F5F5F5')
.onChange((value: string) => {
this.currentCommand = value;
})
Button('發送')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#2196F3')
.padding({ left: 16, right: 16 })
.height(40)
.borderRadius(20)
.onClick(() => {
this.sendATCommand();
})
}
// 常用指令快捷按鈕
Scroll(.horizontal) {
Row({ space: 8 }) {
ForEach(this.wifiCommands.slice(0, 10), (cmd: any) => {
Button(cmd.name)
.fontSize(12)
.fontColor('#2196F3')
.backgroundColor('#E3F2FD')
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.borderRadius(16)
.onClick(() => {
this.currentCommand = cmd.cmd;
})
})
}
.padding({ top: 8, bottom: 8 })
}
.scrollable(ScrollDirection.Horizontal)
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.margin({ top: 12, left: 16, right: 16 })
// 響應記錄
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('📥')
.fontSize(20)
Text('響應記錄')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
Text(`(${this.atResponses.length})`)
.fontSize(12)
.fontColor('#666666')
Row({ space: 8 })
.layoutWeight(1)
Button('清空')
.fontSize(12)
.fontColor('#F44336')
.backgroundColor(Color.Transparent)
.onClick(() => {
this.clearResponses();
})
}
// 響應列表
Column({ space: 4 }) {
ForEach(this.atResponses.slice(0, 10), (response: ATResponse, index: number) => {
this.buildResponseItem(response, index);
})
}
.height(300)
.border({ width: 1, color: '#E0E0E0' })
.borderRadius(8)
.padding(8)
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.margin({ left: 16, right: 16 })
}
// 網絡管理視圖
if (this.currentView === 'network') {
Column({ space: 16 }) {
// WiFi連接設置
Column({ space: 12 }) {
Row({ space: 8 }) {
Text('📡')
.fontSize(20)
Text('WiFi連接')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
Column({ space: 8 }) {
Text('WiFi名稱 (SSID)')
.fontSize(14)
.fontColor('#666666')
TextInput({ text: this.ssid })
.width('100%')
.fontSize(14)
.backgroundColor('#F5F5F5')
.onChange((value: string) => {
this.ssid = value;
})
}
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('WiFi密碼')
.fontSize(14)
.fontColor('#666666')
.layoutWeight(1)
Button(this.showPassword ? '隱藏' : '顯示')
.fontSize(12)
.fontColor('#2196F3')
.backgroundColor(Color.Transparent)
.onClick(() => {
this.showPassword = !this.showPassword;
})
}
TextInput({ text: this.password })
.width('100%')
.fontSize(14)
.backgroundColor('#F5F5F5')
.type(this.showPassword ? InputType.Normal : InputType.Password)
.onChange((value: string) => {
this.password = value;
})
}
Row({ space: 12 }) {
Button('掃描網絡')
.fontSize(14)
.fontColor('#2196F3')
.backgroundColor('#E3F2FD')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.scanNetworks();
})
if (this.wifiState === WiFiState.CONNECTED) {
Button('斷開連接')
.fontSize(14)
.fontColor('#F44336')
.backgroundColor('#FFEBEE')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.disconnectWiFi();
})
} else {
Button('連接WiFi')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#4CAF50')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.connectToWiFi();
})
}
}
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
// 可用網絡列表
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('📶')
.fontSize(20)
Text('可用網絡')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
Text(`(${this.wifiNetworks.length})`)
.fontSize(12)
.fontColor('#666666')
}
Column({ space: 8 }) {
ForEach(this.wifiNetworks, (network: WiFiNetwork, index: number) => {
this.buildNetworkItem(network, index);
})
}
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
}
.padding(16)
}
// TCP通信視圖
if (this.currentView === 'tcp') {
Column({ space: 16 }) {
// 服務器設置
Column({ space: 12 }) {
Row({ space: 8 }) {
Text('🌐')
.fontSize(20)
Text('服務器設置')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
Row({ space: 12 }) {
Column({ space: 8 }) {
Text('服務器IP')
.fontSize(14)
.fontColor('#666666')
TextInput({ text: this.serverIP })
.width('100%')
.fontSize(14)
.backgroundColor('#F5F5F5')
.onChange((value: string) => {
this.serverIP = value;
})
}
Column({ space: 8 }) {
Text('端口')
.fontSize(14)
.fontColor('#666666')
TextInput({ text: this.serverPort.toString() })
.width(100)
.fontSize(14)
.backgroundColor('#F5F5F5')
.onChange((value: string) => {
this.serverPort = parseInt(value) || 8080;
})
}
}
Row({ space: 12 }) {
if (this.tcpConnected) {
Button('斷開TCP')
.fontSize(14)
.fontColor('#F44336')
.backgroundColor('#FFEBEE')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.closeTCPConnection();
})
} else {
Button('連接TCP')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#2196F3')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.establishTCPConnection();
})
.enabled(this.wifiState === WiFiState.CONNECTED)
}
Button('發送測試數據')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#4CAF50')
.layoutWeight(1)
.height(48)
.borderRadius(24)
.onClick(() => {
this.sendData();
})
.enabled(this.tcpConnected)
}
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
// 數據通信
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('📨')
.fontSize(20)
Text('數據通信')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
Column({ space: 8 }) {
Text('接收到的數據')
.fontSize(14)
.fontColor('#666666')
Text(this.receivedData || '暫無數據')
.fontSize(12)
.fontColor('#333333')
.width('100%')
.padding(12)
.backgroundColor('#F5F5F5')
.borderRadius(8)
.height(100)
}
// 統計信息
Grid() {
GridItem() {
this.buildStatCard('發送字節', this.stats.bytesSent.toString(), '#2196F3');
}
GridItem() {
this.buildStatCard('接收字節', this.stats.bytesReceived.toString(), '#4CAF50');
}
GridItem() {
this.buildStatCard('指令數', this.stats.totalCommands.toString(), '#FF9800');
}
GridItem() {
this.buildStatCard('連接時長', this.stats.connectionDuration + '秒', '#9C27B0');
}
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(12)
.rowsGap(12)
}
.padding(16)
.backgroundColor('#FFFFFF')
.borderRadius(12)
}
.padding(16)
}
}
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Auto)
.margin({ bottom: 60 })
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')
}
// 構建響應項
@Builder
buildResponseItem(response: ATResponse, index: number) {
Column({ space: 4 }) {
Row({ space: 8 }) {
Text(new Date(response.timestamp).toLocaleTimeString())
.fontSize(10)
.fontColor('#999999')
Circle({ width: 6, height: 6 })
.fill(response.status === 'success' ? '#4CAF50' :
response.status === 'error' ? '#F44336' : '#FF9800')
}
Text('> ' + response.command)
.fontSize(12)
.fontColor('#2196F3')
.fontFamily('monospace')
if (response.response) {
Text(response.response.split('\n').map(line => '< ' + line).join('\n'))
.fontSize(12)
.fontColor('#4CAF50')
.fontFamily('monospace')
.margin({ top: 4 })
}
}
.width('100%')
.padding(8)
.backgroundColor(index % 2 === 0 ? '#F9F9F9' : '#FFFFFF')
.borderRadius(4)
}
// 構建網絡項
@Builder
buildNetworkItem(network: WiFiNetwork, index: number) {
Row({ space: 12 }) {
Column({ space: 4 }) {
Text(this.getSignalIcon(network.signalLevel))
.fontSize(16)
Text(network.signalLevel + '%')
.fontSize(10)
.fontColor('#666666')
}
Column({ space: 4 }) {
Row({ space: 8 }) {
Text(network.ssid)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
Badge({
count: this.getSecurityText(network.securityType),
position: BadgePosition.Right,
color: '#2196F3',
style: { fontSize: 10 }
})
}
Text(network.bssid)
.fontSize(11)
.fontColor('#666666')
}
.layoutWeight(1)
if (this.selectedNetworkIndex === index) {
Icon({ src: $r('app.media.ic_check'), size: { width: 20, height: 20 } })
.fill('#4CAF50')
}
}
.width('100%')
.padding(12)
.backgroundColor(this.selectedNetworkIndex === index ? '#E8F5E9' : '#F5F5F5')
.borderRadius(8)
.onClick(() => {
this.selectNetwork(index);
})
}
// 構建統計卡片
@Builder
buildStatCard(title: string, value: string, color: string) {
Column({ space: 6 }) {
Text(value)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor(color)
Text(title)
.fontSize(10)
.fontColor('#666666')
}
.width('100%')
.padding(12)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.border({ width: 1, color: '#E0E0E0' })
}
}
想入門鴻蒙開發又怕花冤枉錢?別錯過!現在能免費系統學 -- 從 ArkTS 面向對象核心的類和對象、繼承多態,到吃透鴻蒙開發關鍵技能,還能衝刺鴻蒙基礎 +高級開發者證書,更驚喜的是考證成功還送好禮!快加入我的鴻蒙班,一起從入門到精通,班級鏈接:點擊https://developer.huawei.com/consumer/cn/training/classDetail/b7365031334e4353a9a0fd6785bb0791?type=1?ha_source=hmosclass&ha_sourceId=89000248免費進入