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

前言

本文将深入探讨如何开发一个专业的微信小程序空调遥控器，通过原生实现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;
}