代码收藏家技术教程 2024-09-04

物联网MQTT微信小程序开发：ESP8266与OneNET集成指南

这篇文章主要了解ESP8266物联网小程序MQTT远程操控相关内容（ESP8266+OneNET+小程序）

MQTT通信

MQTT 是一种基于客户端服务端架构的发布/订阅模式的消息传输协议。它的设计思想是轻巧、开放、简单、规范，易于实现。这些特点使得它对很多场景来说都是很好的选择。

mqtt有很多的关键词，这个我们只需要了解一部分就可以了

subscribe：订阅某个主题，未来这个主题收到的消息都会发给你

publish：发送消息给某个主题，只要是订阅了这个主题的客户端，都会收到这条消息

Payload：发送的数据，一般数据格式为string、hex(16进制字符串)、json，这个由前后端商定

QoS：分为三个等级，0:最多交付一次， 1:至少交付一次， 2:只交付一次其中，使用 QoS 0 可能丢失消息，使用 QoS 1 可以保证收到消息，但消息可能重复，使用 QoS 2 可以保证消息既不丢失也不重复。QoS 等级从低到高，不仅意味着消息可靠性的提升，也意味着传输复杂程度的提升。

Retain：遗嘱消息，客户端订阅某个主题后，会将这个主题之前最近一次的消息发送过来。适用场景：比如某个温度传感器，设置的每隔1个小时发送一次温度数据，刚好某个app要展示这个温度传感器数据，打开app的时候，刚好错过温度传感器上次一发送数据，正常情况下需要再等待1个小时，但是如果设置消息为Retain，app打开之后，依旧可以收到温度传感器上一次发送的数据

在管理MQTT连接方面我采用的是MQTTX，这里注意我们设置的属性名和代码中指定的符合就行了

小程序开发

想要开发微信小程序，首先要有一些基础知识：html、css、js、json等，小程序的框架和前端大体相同，一个页面包括js、json、wxml、wxss格式的文件。如果你有前端的一些经验或者是 jsp “全栈” ，那你对这方面的入门会很快很快的哦！

由于我之前没有接触过小程序开发，我将会一步步的剖析如何使用微信小程序通过MQTT服务器连接设备。使用微信开发者工具进行代码的编写，刚创建好的小程序目录是很简洁的。

JS 脚本逻辑文件，通常是用来处理这个页面和用户的交互，比如数据的定义，功能函数的实现等

JSON配置文件，在小程序中json扮演的静态配置的角色，最经常用的文件是app.json，用来对全局配置

wxml文件用来描述当前这个页面的结构，比如第一个组件是按钮，第二个组件是文本框等

wxss文件用来描述页面的样式，比如位置大小排版等

配置MQTT服务

需要准备一些内容：

在公网IP上搭建MQTT服务器，并且这个IP还配置了域名，且这个域名进行过ICP备案
能够连接MQTT服务器的设备

这样配置看起来有些麻烦，我们可以使用OneNET来实现数据的上传和存储。

OneNET API介绍

OneNET是中国移动旗下的物联网平台，它提供了强大的数据存储和管理能力，支持各类物联网设备的接入。通过OneNET，设备可以实现数据的上传与存储，开发者也可以利用提供的API来获取这些数据进行分析或显示，亦或是发送控制指令到远端设备。

OneNET的API基于RESTful架构，支持标准的HTTP/HTTPS协议，使得各种平台和设备都能方便地集成和使用。通过API，开发者可以实现如下功能：

数据上传：物联网设备可以通过API将采集到的数据上传到OneNET平台，例如温度、湿度、光照强度等传感器数据。

指令下发：开发者可以使用API发送指令到设备，实现远程控制，如开关灯、开关门等。

对于微信小程序开发者而言，这意味着可以通过发送HTTPS请求来与OneNET平台进行交互，无需搭建独立的服务器。小程序中的每一个用户界面，都可以嵌入对API的调用，实现数据的动态更新和设备的即时控制。

使用MQTTx客户端创建设备

下载连接：https://mqttx.app/zh

安装完MQTTx后准备对服务器进行连接

配置MQTT设备参数

名称可以随便填，ClientID和用户名必须填上面的设备ID

连接MQTT服务器

我们定义了主题，向服务端发送了消息以后，服务器将消息转发给订阅了该主题的设备，包括本设备，说明MQTT连接成功

安装MQTT的客户端库

小程序是通过js开发的，因此可以使用MQTT.js作为MQTT客户端库

MQTT.js CDN地址：https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js

点开这个连接之后会看到一大串类似于乱码的内容。但这实际上不是乱码，其实是一个被压缩过的一个js文件。

我们需要复制这整个文件，到代码中的utils下面新建一个mqtt.js文件，这样，我们的文件就有mqtt这样的一个库了。

我们直接调用这个mqtt文件：const { connect } = require("../../utils/mqtt");

在data里面存在页面数据中

Page({
	data: {
		client: null
	},

})

在onShow生命周期中进行连接

onShow(){
	const that = this
	that.setData({
		client: connect('wxs://broker.emqx.io:8084/mqtt')
	})
}

注意：

这里的wxs就是wss

wss实际上就是拥有SSL加密通信的websocket协议

//broker.emqx.io:8084这里要指定域名和端口，这里直接用的OneNET云平台，都是硬件设置的

在EMQ的官网中，我们WebSocketSecure端口就是8084端口，这里和硬件指定的端口是不一样的，涉及到一些加密的内容没怎么详细研究，只知道这么用

在这里我直接上完整代码了

onShow() {
    var that = this;
    wx.showToast({
      title: "连接服务器....",
      icon: "loading",
      duration: 10000,
      mask: true,
    });
    let second = 10;
    var toastTimer = setInterval(() => {
      second--;
      if (second) {
        wx.showToast({
          title: `连接服务器...${second}`,
          icon: "loading",
          duration: 1000,
          mask: true,
        });
      } else {
        clearInterval(toastTimer);
        wx.showToast({
          title: "连接失败",
          icon: "error",
          mask: true,
        });
      }
    }, 1000);
    that.setData({
      client: connect(mqttUrl)
    })

    that.data.client.on("connect", function () {
      console.log("成功连接mqtt服务器！");
      clearInterval(toastTimer);
      wx.showToast({
        title: "连接成功",
        icon: "success",
        mask: true,
      });
      // 一秒后订阅主题
      setTimeout(() => {
        that.data.client.subscribe(mpSubTopic, function (err) {
          if (!err) {
            console.log("成功订阅设备上行数据Topic!");
            wx.showToast({
              title: "订阅成功",
              icon: "success",
              mask: true,
            });
          }
        });
      }, 1000);
    });
    that.data.client.on("message", function (topic, message) {
      console.log(topic);
      // message是16进制的Buffer字节流
      let dataFromDev = {};
      // 尝试进行JSON解析
      try {
        dataFromDev = JSON.parse(message);
        console.log(dataFromDev);
        that.setData({
          //这里要写一些需要解析json的数据，就是硬件和云平台传过来的那些东西
          Hum: dataFromDev.Hum
        })
      } catch (error) {
        // 解析失败错误捕获并打印（错误捕获之后不会影响程序继续运行）
        console.group(`[${formatTime(new Date)}][消息解析失败]`)
        console.log('[错误消息]', message.toString());
        console.log('上报数据JSON格式不正确', error);
        console.groupEnd()
      }
    })
  }

在这里，直接提取的路径和端口之类的内容，还是为了方便维护吧

const { connect } = require("../../utils/mqtt");

const mqttHost = "broker.emqx.io"; //mqtt 服务器域名/IP
const mqttPort = 8084; //mqtt 服务器域名/IP

const hefengVIP = false;

const deviceSubTopic = "/myhome/sub"; //  设备订阅topic（小程序发布命令topic）
const devicePubTopic = "/myhome/pub"; //  设备发布topic（小程序订阅数据topic）

const mpSubTopic = devicePubTopic;
const mpPubTopic = deviceSubTopic;

const mqttUrl = `wxs://${mqttHost}:${mqttPort}/mqtt`;

这些都完成了之后呢，只需要继续做完功能就可以了

作为一个物联网小白，目前就了解这些，如果有不正确的内容，请各位大佬指正，也请你们轻点喷，呜呜呜……

作者：哎呦我滴码呀