微信小程序控制空調之微信小程序篇

前言

本文將深入探討如何開發一個專業的微信小程序空調遙控器，通過原生實現MQTT協議與物聯網設備通信，提供完整的溫度控制、模式切換功能，并包含強大的重連機制和調試系統。

下載微信開發者工具

鏈接：下載 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安裝到自己指定的位置

一、項目簡述

核心功能

溫度控制：16-30℃范圍調節
模式切換：制冷/制熱/除濕/送風
MQTT通信：原生協議實現（非庫依賴）
斷線重連：智能重試機制
調試系統：詳細運行日志

技術亮點

原生MQTT協議實現：不使用第三方庫
二進制協議處理：高效數據編碼
完善的重連機制：5次重試+2秒間隔
詳細調試信息：實時監控連接狀態
全類型支持：TypeScript強類型保障

二、MQTT協議實現詳解

1. MQTT連接流程

//邏輯小程序->>MQTT服務器: 1. WebSocket連接小程序->>MQTT服務器: 2. 發送CONNECT包MQTT服務器-->>小程序: 3. 返回CONNACK小程序->>MQTT服務器: 4. 發送SUBSCRIBEMQTT服務器-->>小程序: 5. 返回SUBACK小程序->>MQTT服務器: 6. 發送PUBLISH(控制指令)MQTT服務器->>空調設備: 7. 轉發指令

2. 協議包結構實現

CONNECT包構建

createConnectPacket(clientId: string): ArrayBuffer {const protocolName = 'MQTT';const protocolVersion = 4;const connectFlags = 0x02; // Clean sessionconst keepAlive = 60;// 計算包長度const protocolNameLength = protocolName.length;const clientIdLength = clientId.length;const variableHeaderAndPayloadLength = 2 + protocolNameLength + 1 + 1 + 2 + 2 + clientIdLength;// 創建ArrayBufferconst packet = new ArrayBuffer(2 + variableHeaderAndPayloadLength);const view = new DataView(packet);let offset = 0;// 固定頭view.setUint8(offset++, 0x10); // CONNECT類型view.setUint8(offset++, variableHeaderAndPayloadLength);// 可變頭view.setUint16(offset, protocolNameLength); offset += 2;for (let i = 0; i < protocolNameLength; i++) {view.setUint8(offset++, protocolName.charCodeAt(i));}view.setUint8(offset++, protocolVersion);view.setUint8(offset++, connectFlags);view.setUint16(offset, keepAlive); offset += 2;// 有效載荷view.setUint16(offset, clientIdLength); offset += 2;for (let i = 0; i < clientIdLength; i++) {view.setUint8(offset++, clientId.charCodeAt(i));}return packet;
}

PUBLISH包構建

createPublishPacket(topic: string, payload: string): ArrayBuffer {const topicLength = topic.length;const payloadLength = payload.length;const remainingLength = 2 + topicLength + payloadLength;const packet = new ArrayBuffer(1 + 1 + remainingLength);const view = new DataView(packet);let offset = 0;// 固定頭view.setUint8(offset++, 0x30); // PUBLISH類型view.setUint8(offset++, remainingLength);// 可變頭view.setUint16(offset, topicLength); offset += 2;for (let i = 0; i < topicLength; i++) {view.setUint8(offset++, topic.charCodeAt(i));}// 有效載荷for (let i = 0; i < payloadLength; i++) {view.setUint8(offset++, payload.charCodeAt(i));}return packet;
}

三、核心功能實現

1. 智能重連機制

initWebSocket() {if (this.data.retryCount >= this.data.maxRetries) {this.setData({debugInfo: this.data.debugInfo + '\n錯誤: 達到最大重試次數',isConnecting: false});return;}const socketTask = wx.connectSocket({url: 'wss://broker.emqx.io:8084/mqtt',protocols: ['mqtt'],success: () => { /* 成功處理 */ },fail: (error) => {// 失敗時重試setTimeout(() => {this.data.retryCount++;this.initWebSocket();}, this.data.retryDelay);}});// 事件監聽socketTask.onError(() => {setTimeout(() => {this.data.retryCount++;this.initWebSocket();}, this.data.retryDelay);});
}

2. 溫度控制邏輯

// 溫度輸入處理
onTempInput(e: any) {let value = e.detail.value;if (/^\d*$/.test(value)) { // 只允許數字this.setData({ temperature: parseInt(value) || 26 });}
}// 溫度范圍驗證
onTempBlur(e: any) {let value = parseInt(e.detail.value);if (isNaN(value) || value < 16 || value > 30) {value = 26; // 默認值}this.setData({ temperature: value });
}// 發送溫度指令
sendTemperature() {const temp = this.data.temperature;this.sendMessage('temperature', temp.toString());
}

3. 模式控制實現

// 設置空調模式
setMode(e: any) {const mode = e.currentTarget.dataset.mode;this.setData({ mode });this.sendMessage('mode', mode);
}// 發送控制指令
sendMessage(topic: string, message: string) {if (!this.data.connected) {this.setData({debugInfo: this.data.debugInfo + '\n錯誤: 未連接到MQTT服務器'});return;}const publishPacket = this.createPublishPacket(`aircon/${topic}`, message);this.data.socketTask?.send({ data: publishPacket });
}

四、調試系統實現

1. 調試信息收集

attached() {// 收集系統信息try {const systemInfo = wx.getSystemInfoSync();this.setData({debugInfo: `系統信息: 型號: ${systemInfo.model}系統: ${systemInfo.system}平臺: ${systemInfo.platform}`});} catch (error) {this.setData({ debugInfo: '獲取系統信息失敗: ' + error.message });}// 初始化連接this.initConnection();
}

2. 實時狀態監控

// 在initWebSocket中添加狀態日志
socketTask.onOpen(() => {this.setData({debugInfo: this.data.debugInfo + '\nWebSocket連接已建立',connected: true});
});socketTask.onMessage((res) => {const message = this.parseMqttMessage(res.data);this.setData({debugInfo: this.data.debugInfo + `\n收到MQTT消息: ${message.type}`,lastReceivedMessage: `主題: ${message.topic}, 內容: ${message.payload}`});
});

五、性能優化策略

1. 二進制處理優化

// 使用DataView高效處理二進制
parseMqttMessage(data: ArrayBuffer): any {const view = new DataView(data);const packetType = view.getUint8(0) >> 4;switch (packetType) {case 2: // CONNACKreturn { type: 'CONNACK', returnCode: view.getUint8(3) };case 3: // PUBLISHconst topicLength = view.getUint16(2);let topic = '';for (let i = 0; i < topicLength; i++) {topic += String.fromCharCode(view.getUint8(4 + i));}// ... 解析payloadreturn { type: 'PUBLISH', topic, payload };// 其他類型處理...}
}

2. 資源管理優化

lifetimes: {detached() {// 組件銷毀時關閉連接if (this.data.socketTask) {this.data.socketTask.close();this.setData({ connected: false });}}
}

六、完整實現解析

1. MQTT消息解析器

parseMqttMessage(data: ArrayBuffer): any {const view = new DataView(data);const packetType = view.getUint8(0) >> 4;let offset = 2; // 跳過固定頭switch (packetType) {case 2: // CONNACKreturn {type: 'CONNACK',returnCode: view.getUint8(offset + 1)};case 3: // PUBLISHconst topicLength = view.getUint16(offset);offset += 2;let topic = '';for (let i = 0; i < topicLength; i++) {topic += String.fromCharCode(view.getUint8(offset++));}let payload = '';const payloadLength = data.byteLength - offset;for (let i = 0; i < payloadLength; i++) {payload += String.fromCharCode(view.getUint8(offset++));}return { type: 'PUBLISH', topic, payload };default:return { type: 'UNKNOWN', packetType };}
}

2. 溫度控制組件

<view class="temp-control"><input class="temp-input" type="number" value="{{temperature}}" bindinput="onTempInput"bindblur="onTempBlur"/><text class="temp-unit">°C</text><view class="temp-buttons"><button class="temp-btn" bindtap="setTemperature" data-delta="-1">-</button><button class="temp-btn" bindtap="setTemperature" data-delta="1">+</button></view><button class="send-btn" bindtap="sendTemperature">發送溫度</button>
</view>

七、部署與測試指南

1. 測試環境搭建

使用公共MQTT代理：broker.emqx.io:8084
安裝MQTTX桌面客戶端用于測試
訂閱主題：aircon/#

2. 測試用例

測試項	預期結果
溫度設置為24	收到"aircon/temperature:24"
模式切換為制熱	收到"aircon/mode:heat"
斷開網絡后重連	自動重連并恢復訂閱
輸入無效溫度	自動修正為26℃

八、常見問題解決方案

1. 連接問題排查

// 在連接失敗時記錄詳細錯誤
socketTask.onError((error) => {this.setData({debugInfo: this.data.debugInfo + `\n連接錯誤: ${JSON.stringify(error)}` +`\n重試次數: ${this.data.retryCount + 1}/5`});// 延遲重試setTimeout(() => this.initWebSocket(), 2000);
});

2. 協議解析問題

// 添加詳細的二進制日志
createPublishPacket(topic: string, payload: string) {console.log('創建PUBLISH包', {topic,payload,topicLength: topic.length,payloadLength: payload.length});// ...構建過程console.log('包構建完成', {buffer: Array.from(new Uint8Array(packet)),offset});return packet;
}