[Entwicklung des Internets der Dinge] – MQTT-Verbindung des WeChat-Applets, basierend auf MQTT, um die Nachrichtenübertragung zwischen Gerät, Server und Miniprogramm zu realisieren

1. Vorbereitung auf Vorkenntnisse

Wenn Sie ein WeChat-Applet entwickeln möchten, müssen Sie zunächst über einige Grundkenntnisse verfügen: HTML, CS, JS, JSON usw. Das im Applet verwendete Wissensgerüst ist ungefähr das gleiche, und eine Seite enthält Dateien in JS, JSON und WXML , und WXSS-Formate.

Da ich noch nie mit der Entwicklung kleiner Programme in Berührung gekommen bin, wird in diesem Artikel aus der Perspektive eines unerfahrenen Xiaobai Schritt für Schritt analysiert, wie man mit dem kleinen WeChat-Programm eine Verbindung zum Gerät über den MQTT-Server herstellt. Einschließlich: So beantragen Sie einen MQTT-Server, wie verwenden Sie das WeChat-Entwicklertool, um ein kleines Programm zu entwickeln, und lassen Sie das Gerät eine MQTT-Verbindung mit dem Server herstellen, Themen abonnieren und Nachrichten veröffentlichen und die Übertragung von Nachrichten zwischen den Geräten realisieren Gerät-Server-WeChat-Applet.

2. Aufbau einer kleinen Programmentwicklungsumgebung

1. Registrieren Sie das WeChat Mini-Programm

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

• Öffnen Sie den offiziellen Link oben und registrieren Sie sich für das WeChat Mini-Programm
• Als Anmeldekonto geben Sie bitte die E-Mail-Adresse ein, die nicht auf der öffentlichen WeChat-Plattform registriert ist, nicht auf der offenen WeChat-Plattform registriert ist und nicht an ein persönliches WeChat-Konto gebunden ist
• E-Mail-Aktivierung
• Informationsregistrierung

Nachdem Sie die oben genannten Schritte ausgeführt haben, können Sie sich im Hintergrund des Applets anmelden.

Warum ein Mini-Programm-Konto registrieren?

Da es auf der realen Maschine debuggt, später veröffentlicht und gestartet wird und bei Verwendung der WeChat-Entwicklerplattform zum Erstellen eines Projekts auch die AppID des Applets angegeben werden muss, ist dieser Schritt von entscheidender Bedeutung und unverzichtbar.

2. Laden Sie die Entwicklungssoftware herunter

Es gibt verschiedene Entwicklungssoftware für WeChat-Applets. Ich verwende das Original-WeChat-Entwicklertool. Der Link lautet wie folgt, laden Sie einfach die stabile Version herunter

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3. Erstellen Sie ein neues Projekt

Projekt – Neues Projekt – Geben Sie den Projektnamen, das Projektspeicherverzeichnis, die AppID, den Back-End-Dienst – nicht anwendbarer Cloud-Dienst, die Vorlagenauswahl – JavaScript ein und bestätigen Sie die Erstellung des Applets.

4. Verzeichnisstruktur

Die Verzeichnisstruktur des neu erstellten Applets ist wie folgt:

Die
JS-Skriptlogikdatei wird normalerweise verwendet, um die Interaktion zwischen dieser Seite und dem Benutzer abzuwickeln, z. B. die Definition von Daten, die Realisierung von Funktionsfunktionen usw.

JSON-Konfigurationsdatei, JSON spielt die Rolle der statischen Konfiguration in Applets, die am häufigsten verwendete Datei ist app.json, die für die globale Konfiguration verwendet wird

Die WXML-Datei wird verwendet, um die Struktur der aktuellen Seite zu beschreiben. Die erste Komponente ist beispielsweise eine Schaltfläche, die zweite Komponente ist ein Textfeld usw.

Die WXSS-Datei wird verwendet, um den Stil der Seite zu beschreiben, z. B. Position, Größe, Schriftsatz usw.

Die Syntax des spezifischen Frameworks kann im Detail in der offiziellen Dokumentation unter dem untenstehenden Link nachgelesen werden

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

Nachdem Sie das Projekt erstellt haben, können Sie mit der MQTT-Konfiguration beginnen

3. Konfigurieren Sie den MQTT-Dienst

1. Was muss vorbereitet werden?

1. Der MQTT-Server wird auf der IP des öffentlichen Netzwerks eingerichtet, die IP wird mit einem Domänennamen konfiguriert und der Domänenname wurde bei ICP hinterlegt
2. Ein Gerät, das eine Verbindung zu einem MQTT-Server herstellen kann

Haben Sie angesichts dessen das Gefühl, dass die Schwierigkeit sofort voll ist? Man muss so viel extra lernen, man muss einen Server bauen und man muss ein Betriebssystem installieren, um eine Menge Dinge zu konfigurieren ... Keine Sorge, der Weg ist frei, und hier gibt es einen Server direkt, kostenlos und zuverlässig einsetzbar! !

2. Besonderer Dank

Hier möchte ich mich bei einem gewissenhaften Up-Master bedanken, der diesen kostenlosen MQTT-Server zur Verfügung stellen kann. Ich habe zuerst gelernt, wie man das kleine Programm MQTT erstellt, und habe diesem Up-Master Schritt für Schritt gefolgt. Wenn Sie vorbeikommen, können Sie mit einem Klick drei geben -Link-Unterstützung für diesen gewissenhaften Blogger.

Dieser Blogger bietet eine Website an:

http://www.yoyolife.fun/

3. Registrieren Sie ein Konto

Ein einfacher Schritt, um die Registrierung und Anmeldung abzuschließen

4. Ausrüstung hinzufügen

Klicken Sie auf den Gerätenamen der Projektverwaltung, um die Geräteverwaltung durchzuführen

5. Ausrüstung verwalten

Zu diesem Zeitpunkt ist die Konfiguration des Servers abgeschlossen und das Gerät kann über das externe Netzwerk eine Verbindung zum MQTT-Server herstellen. Wie wird jedoch eine Verbindung hergestellt und wie kann der Verbindungsstatus des Geräts beobachtet werden? In diesem Artikel wird die MQTTx-Clientsoftware als Gerät zum Abonnieren von Themen und zum Veröffentlichen von Nachrichten auf dem MQTT-Server verwendet .

Jetzt gibt es zwei weitere Substantive: Themen abonnieren und Nachrichten veröffentlichen . Fühlen Sie sich als Neuling fremd?

Abonnieren Sie ein Thema: Das Gerät ist an ein bestimmtes Thema gebunden. Wenn der Server den Inhalt unter diesem Thema weiterleitet, wird er an alle Geräte weitergeleitet, die dieses Thema abonniert haben.

Nachricht veröffentlichen: Das Gerät bindet die Nachricht an das angegebene Thema, sendet sie an den Server, und der Server sendet und leitet sie weiter. Nur das an das Thema gebundene (d. h. abonnierte) Gerät kann die vom Thema weitergeleitete Nachricht des Themas empfangen Server.

Vereinfacht ausgedrückt: Wenn ein Gerät ein Thema abonniert, kann es Nachrichten an Geräte senden, die dasselbe Thema abonnieren, und kann auch Nachrichten von Geräten empfangen, die dasselbe Thema abonnieren.

4. Erstellen Sie ein Gerät mit dem MQTTx-Client

1. MQTTx-Download-Link

https://mqttx.app/zh

Bereiten Sie nach der Installation von MQTTx die Verbindung zum Server vor

2. Konfigurieren Sie die MQTT-Geräteparameter

Der Name kann frei eingegeben werden, die Client-ID und der Benutzername müssen mit der oben genannten Geräte-ID gefüllt werden, das Passwort ist das Passwort beim Erstellen der Geräte-ID auf dem von Uncle Jie bereitgestellten Server, die Serveradresse und der Port sind fest, nur eingestellt Laut Bild

3. Stellen Sie eine Verbindung zum MQTT-Server her

Hier können Sie sehen, dass zwei Themen abonniert sind. Nach dem Senden einer Nachricht an den Server leitet der Server die Nachricht an die Geräte weiter, die das Thema abonniert haben, einschließlich dieses Geräts, und zeigt damit an, dass die MQTT-Verbindung erfolgreich ist. Wir können sehen, dass die Der MQTT-Server zeigt an, dass das Gerät online ist, was auch bedeutet,

dass die MQTT-Verbindung erfolgreich ist

. Bisher wurde die Verbindung zwischen dem MQTT-Server und dem einzelnen Gerät (MQTTx) hergestellt.

5. Kleines Programmterminal

1. Ändern Sie die Konfiguration der WeChat-Entwicklertools

Details – Lokale Einstellungen – Deaktivieren Sie „JS in ES5 kompilieren“

2. Melden Sie sich im Hintergrund des Applets an

Entwicklungsverwaltung – Entwicklungseinstellungen – Serverdomänenname – ändern, legalen Socket-Domänennamen hinzufügen: wss://t.yoyolife.fun:8084

3. Ändern Sie den Code des WeChat-Entwicklertools

index.js-Datei

// index.js
// 获取应用实例
const app = getApp()
var mqtt = require('../../utils/mqtt.min')

Page({
    
    
  data: {
    
    
  },
  onLoad:function(options) {
    
    
    var that = this
    that.connectMqtt()
    // this.connectMqtt()
  },
  connectMqtt:function(){
    
    
    const options = {
    
    
      connectTimeout:4000,
      clientId:'5ddad3c8554e8f74fd3f96ff959dd894',
      port:8084,
      username:'5ddad3c8554e8f74fd3f96ff959dd894',
      password:'123456'
    }
    client = mqtt.connect('wxs://t.yoyolife.fun:8084/mqtt',options)
    client.on('connect',(e)=>
    {
    
    
      console.log('服务器连接成功')
      client.subscribe('/iot/2742/de',
      {
    
    
        qos:0, 
      },
      
      function(err)
      {
    
    
        if(!err)
        {
    
    
            console.log('订阅成功')
        }
      })
    })
    client.on('message',function(topic,message){
    
    
      console.log('收到'+message.toString())
    })
  },
  taphere(){
    
    
      console.log('helloworld');
  }
})

index.wxml

<!--index.wxml-->
<view class="container">
  <button type="primary" bindtap="taphere">helloworld</button>
</view>

Es ist zu beachten, dass die Seiten in der Datei app.json den Pfad der Seite speichern. Sie müssen daher den Protokollordner löschen und dann die Datei app.json ändern und speichern

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "物联网平台",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Fügen Sie die Datei mqtt.min.js zu den Dienstprogrammen hinzu

Legen Sie die Datei mit dem Download-Link im Ordner „utils“ ab. Die endgültige Verzeichnisstruktur sieht dann so aus

下载链接：
https://pan.baidu.com/s/1lS6eDXgW107dA7HyxF8ZkA?pwd=n8jw 
提取码：n8jw 

Zusammenfassen

Die Client-ID und der Benutzername im Applet müssen identisch sein. Diese ID ist die ID der von Uncle Jie bereitgestellten IoT-Plattformanwendung. Wenn Sie die falsche eingeben, können Sie nicht auf den MQTT-Server zugreifen. Der Port ist festgelegt bei 8084. Das Passwort ist das Passwort, wenn Sie die ID beantragen. Abonnieren

6. Kompilieren Sie das Applet

1. Stellen Sie eine Verbindung zum MQTT-Server her

Klicken Sie oben auf die Schaltfläche „Kompilieren“. Im Debug-Feld werden „Serververbindung erfolgreich“ und „Abonnement erfolgreich“ angezeigt, was darauf hinweist, dass das Applet erfolgreich mit dem MQTT-Server verbunden wurde.

2. Senden Sie Nachrichten geräteübergreifend

Das Applet kann als Gerät verwendet werden, und MQTTx kann ein Gerät erstellen, diese beiden Geräte verwenden, um dasselbe Thema zu abonnieren und eine Nachricht zu veröffentlichen. Nachdem MQTTx die Nachricht veröffentlicht hat, zeigt es die entsprechende gesendete Nachricht im Applet-Debugging an Machen wir eine Demonstration:

Die Funktion des kleinen Programms zum Veröffentlichen von Nachrichten ist noch nicht perfekt. Derzeit kann nur das Gerät Nachrichten freigeben und das kleine Programm kann Nachrichten anzeigen. Es wird in Zukunft noch weiter verbessert. Als Plattform zur Überwachung von Daten kann das kleine Programm jedoch bereits einige grundlegende Anwendungsszenarien erfüllen. Es muss lediglich erkannt werden, dass die empfangenen Daten auf der Seite des kleinen Programms angezeigt werden, und das kleine Programm kann offiziell gestartet und verwendet werden.

Bisher wurde die auf MQTT basierende Geräte-Server-Applet-Nachrichtenübertragung realisiert

Codewörter sind nicht einfach, Ihr Ein-Klick-Drei-Link ist für mich die größte Unterstützung ~
Alle Projektcodes sind Open Source, willkommen gleichgesinnte Freunde, um gemeinsam zu diskutieren und zu verbessern!
Sollte der Artikel Mängel aufweisen, sind alle Senioren herzlich eingeladen, diese zu kritisieren und zu korrigieren.

Download-Link für den Projektcode dieses Artikels:

Link: https://pan.baidu.com/s/1nYkcUG25VKTzmguYOAQXKA?pwd=bf95
Extraktionscode: bf95