微信小程序结合MQTT控制ESP32，看这一篇就够了

学前端的菜鸡小萌新•᷄ࡇ•᷅

已于 2024-05-11 09:40:55 修改

阅读量1.5k

点赞数 35

文章标签：微信小程序小程序单片机物联网 stm32 websocket

于 2024-05-07 16:44:43 首次发布

本文链接：https://blog.csdn.net/qq_27007037/article/details/138536725

版权

mqtt 官网和官方教程

MQTT 协议入门与进阶 | EMQ (emqx.com)

MQTT.js 入门教程 | EMQ (emqx.com)

mqtt 下载

进入https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js 右击另存为到桌面

导入和使用

将下载到本地的 mqtt.min.js 拷贝到项目的 utils 目录下，如下图所示

在js文件引入mqtt

const app = getApp();
import mqtt from "../../utils/mqtt.min";
let client = null; // MQTT服务

创建MQTT连接

connectMqtt() {
  let that = this;
  const options = {
    connectTimeout: 4000,
    address: this.data.address, // 输入的连接地址
    port: this.data.port, // 输入的端口号
    username: this.data.username, // 输入的用户名
    password: this.data.password, // 输入的密码
  };

  console.log("address是：", options.address);
  client = mqtt.connect("wxs://" + options.address + "/mqtt", options); // 连接方法
  client.on("connect", error => {
    console.log("连接成功");
    // 可以在这里写一些连接成功的逻辑
  });

  client.on("reconnect", error => {
    console.log("正在重连：", error);
    wx.showToast({ icon: "none", title: "正在重连", });
  });
  client.on("error", error => {
    console.log("连接失败：", error);
    wx.showToast({ icon: "none", title: "MQTT连接失败", });
  });
}

添加订阅/添加发布(连接成功状态下)

// 订阅一个主题
client.subscribe("想要订阅的主题名字", { qos: 0 }, function (err) {
  if (!err) {
    console.log("成功");
    wx.showToast({ icon: "none", title: "添加成功", });
    // 可以在这里写一些订阅主题成功的逻辑
  }
});

取消订阅/发布(连接成功状态下)

client.unsubscribe('想要取消的主题名字', function (err) {
  if (!err) {
    wx.showToast({ icon: "none", title: "取消成功", });、
    // 可以在这里写一些取消主题成功的逻辑
  }
});

发布消息(连接成功状态下)

根据判断是哪个设备的开关然后发送消息在我们案例里发送的消息可能为 :

{ LIGHT: "ON" }

{ LIGHT: "OFF" }

{ FAN: "ON" }

{ FAN: "OFF" }

{ CURTAIN: "ON" }

{ CURTAIN: "OFF" }

let msg = "发出的消息";
client.publish("想要发送消息的Topic", JSON.stringify(msg), { qos: 0 }, err => {
  if (!err) {
    console.log("topic:", "想要发送消息的Topic变量", "成功发出消息", msg);
  }
});

收到消息和数据回显

client.on("message", (topic, message) => {
  /* 温度、湿度、光强、烟雾
      TEMPERATURE
      HUMIDITY
      LIGHT_INTENSITY
      SMOKE
  */
  console.log("收到消息：", message.toString());
  // wx.showToast({
  //   icon: "none",
  //   title: message.toString(),
  // });
  let getMessageObj = {}; //收到的消息
  getMessageObj = JSON.parse(message); //收到的消息转换成json对象
  
});

到此就可以根据收到的消息来改变界面的设备信息或调用接口啥的...

断开MQTT连接(连接成功状态下)

client?.end(true, error => {});
client = null;

最终效果

-------------------------------------------------------------------------------------------------------

嵌入式物联网教学开发传感器控制拓展板二合一

不同于其他卖家提供资料和技术支持，我们提供手把手教学，完整的开发流程如下：

实现完整的一个物联网嵌入式项目：将数据上传并通过小程序对硬件进行控制。具体有：

[1]服务器配置，阿里云搭建mqttx服务器，ssl证书配置；

[2]微信小程序设计，借助微信开发者工具开发，js代码和类html语言；

[3]硬件驱动，基于Arduino平台开发esp32，提供wifi和蓝牙版本，读取传感器：温度、湿度、烟雾；控制设备：小灯、继电器。

提供教学视频在b站，合集播放破6w！提供项目开发文档，网页链接。

我们提供搭建好的mqtt测试服务器，供大家免费使用。

适合如下人群：

1.喜欢diy的电子极客；

2.物联网专业的相关学生课程或毕业设计；

3.寻求物联网项目经验的求职者；

有硬件工程师和软件工程师答疑，欢迎咨询～

文档资料，可参考：基于ESP32+微信小程序的物联网应用