uniapp mqttjs 小程序开发

在UniApp中集成MQTT.js开发微信小程序时，需注意平台差异、协议兼容性及消息处理等问题。以下是关键步骤与注意事项的综合指南：

---

一、环境配置与依赖安装

1. 安装MQTT.js

   • 推荐使用兼容性较好的版本：[email protected]（H5和小程序兼容性最佳）或[email protected]（部分场景更稳定）。

   • 安装命令：npm install [email protected]，若需卸载旧版本：npm uninstall [email protected]159。

2. 引入MQTT库

   • 在代码中按需引入：import mqtt from 'mqtt/dist/mqtt.min.js'（必须使用mqtt.min.js，否则小程序可能报错）139。

3. 配置微信开发者工具

   • 开启服务端口（设置 → 安全设置），并在HBuilderX中配置微信开发者工具路径，确保真机调试正常6。

---

二、MQTT连接与平台适配

1. 协议与URL配置

   • H5端：使用wss://（加密）或ws://（非加密）协议。

   • 微信小程序：需使用wxs://（加密）或wx://（非加密）协议，且需配置服务器域名至微信公众平台白名单139。

   • 示例代码：

     javascript

     复制

     // #ifdef H5
     const url = 'wss://broker.example.com:8888/mqtt';
     // #endif
     // #ifdef MP-WEIXIN
     const url = 'wxs://broker.example.com:8888/mqtt';
     // #endif

2. 连接参数配置

   • clientId需唯一，建议用随机数生成：clientId: 'client_' + Math.random().toString(16).substr(2, 8)。

   • 关键参数：clean（会话持久化）、keepalive（心跳时间，建议30秒以上避免后台断开）、connectTimeout（连接超时）135。

3. 初始化与订阅

   • 封装工具类管理连接、订阅、消息接收及销毁（参考代码示例19）。

   • 订阅主题时需处理错误回调，避免因重复订阅或主题格式错误导致崩溃。

---

三、消息处理与优化

1. 消息解析

   • 小程序端接收的消息为ArrayBuffer格式，需转换为字符串：

     javascript

     复制

     const encodedString = String.fromCharCode.apply(null, new Uint8Array(message));
     // 处理中文乱码
     const decodeString = decodeURIComponent(escape(encodedString));
     ```:cite[3]:cite[9]。
     

2. 心跳与重连机制

   • 设置keepalive: 30（单位：秒），避免小程序切后台时频繁断开。若需保持长连接，可设为035。

   • 监听reconnect和offline事件，实现自动重连逻辑。

3. 资源释放

   • 页面销毁时主动调用client.end()断开连接，并取消订阅相关主题，防止内存泄漏19。

---

四、常见问题与解决方案

1. 连接失败

   • 协议不匹配：确保服务端支持WebSocket（如使用ws://而非TCP直连）37。

   • 端口错误：H5常用8083（非加密）或8084（加密），微信小程序需与服务器配置一致35。

2. 真机调试异常

   • 更新HBuilderX至3.7.3以上版本，检查连接地址前缀（如wx://）5。

   • 若频繁重连，调整心跳时间或检查网络权限35。

3. 中文乱码

   • 使用decodeURIComponent(escape(str))转换字符串，或通过Uint8Array与TextDecoder处理39。

---

五、本地测试与服务器部署

1. 本地MQTT服务器搭建

   • 使用mosca库快速搭建，示例代码参考7。

   • 测试服务器推荐：broker.hivemq.com（端口8000）或test.mosquitto.org（端口8080/8081）3。

2. 跨平台调试

   • H5与小程序需分别配置域名，确保服务端支持跨域和HTTPS（小程序强制要求加密通信）16。

---

通过以上步骤，可高效实现UniApp小程序与MQTT协议的集成。建议结合业务场景封装通用工具类，并注意版本兼容性与真机调试细节。若需完整代码示例，可参考179。