WeChat applet + mqtt, esp8266 temperature and humidity reading implementation method

First, the principle of

esp8266 publishes messages through mqtt, and the WeChat applet subscribes to messages through mqtt. After the applet subscribes, it can receive messages transmitted by esp8266 in real time.

Second, temperature and humidity test

The D4 port is used here.

This demo is developed using Arduino IDE. For more information about Arduino IDE's ESP8266 environment configuration, please refer to: Environment Configuration: Click to jump

Installing the Library

This example uses a very simple and easy to use Simple DHT sensor library that works with ESP8266. The library can be easily installed through the Arduino IDE Library Manager.
In the options above Arduino IDE, go to Tools > Manage Libraries and search for dht11 directly. Click to install the library, as shown below:

Testing Procedure:

#include <SimpleDHT.h>

// for DHT11, 
// VCC: 5V or 3V
// GND: GND
// DATA: 2
int pinDHT11 = D4;
SimpleDHT11 dht11(pinDHT11);

void setup() {
 Serial.begin(115200);
}

void loop() {
 // start working...
 Serial.println("==================================");
 Serial.println("Sample DHT11...");
 
 // read without samples.
 byte temperature = 0;
 byte humidity = 0;
 int err = SimpleDHTErrSuccess;
 if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
 Serial.print("Read DHT11 failed, err="); Serial.println(err);delay(1000);
 return;
 }
 
 Serial.print("Sample OK: ");
 Serial.print((int)temperature); Serial.print(" *C, "); 
 Serial.print((int)humidity); Serial.println(" H");
 
 // DHT11 sampling rate is 1HZ.
 delay(1500);
}

If it works normally, the serial port will output normally, as shown in the following figure:

Third, push temperature and humidity to the cloud

If the temperature and humidity in the previous step can be read and output, then the data can be uploaded to the cloud based on the previous version.

Button control has been added, and the data is wrapped with # so that the app can use string cutting to separate the data, #23#80#on, that is, #temperature#humidity#button status. The mini program will take the value according to the string segmented by # for display.

If the uploaded data is not just temperature and humidity, you can continue to add &msg=#23#80#data1#data2#data3#data4#\r\n after the # sign. When the app splits the string, it must be split according to the uploaded data.

Download the upgraded version:

Click to download https://cloud.bemfa.com/zip/mqtt/dht11_led.zip

What needs to be modified

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

Create two new topics in the Bafa MQTT device cloud console. The topic name is arbitrary. For example, temp004 is used to transmit temperature and humidity, and led002 is used to control LEDs. This example uses temp004 and led002. When using the sample code, you should modify it to your own topic name, which can be letters, numbers, or a combination of letters and numbers. UID is the user's private key, which can be obtained after registering and logging in to the Buffa Maker Cloud Console .

Note: Create topic in mqtt device cloud.

After logging in, you can see your private key UID in the console, as shown in the figure:

The WIFI name is the WIFI name of your router, which is case-sensitive. If you enter it incorrectly, you will not be able to connect to the network.

In the example, data is uploaded every three seconds:

long now = millis(); //Get the current timestamp if (now - lastMsg > timeval) { //If it reaches 3s, upload data lastMsg = now;
 // read without samples.
 byte temperature = 0;
 byte humidity = 0;
 int err = SimpleDHTErrSuccess;
 if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
  Serial.print("Read DHT11 failed, err="); Serial.println(err); delay(1000);
  return;
 }
 String msg = "#" + (String)temperature + "#" + (String)humidity + "#" + ledstatus; //Data package#temperature#humidity#switch status#
 client.publish(dhttopic, msg.c_str()); //data upload}

If the router has network access, the data will be automatically uploaded. You can refresh the web page in the Bafa MQTT device cloud to see the uploaded data. As shown in the following figure:

The data is encapsulated with # when it is uploaded. 27 is the temperature, 24 is the humidity, and off is the status of the uploaded light.

Fourth, WeChat applet development

Register a mini program account on the WeChat public platform, get the mini program appid, and click on the right - Development -> Development Management -> Development Settings ----> Developer ID. You can see that it looks like this: wx34a2063de5cec04b. It will be used when importing the project below.

On the right, click Development –> Development Management –> Development Settings ----> Server Domain Name. At the server domain name below, click Modify, and add the domain names https://api.bemfa.com and wss://bemfa.com in the request legal domain name and socket legal domain name respectively, then save and submit. As shown below.

Download and install WeChat developer tools, which can be downloaded from Baidu.

Download the demo program. Download address: Click to download

Open WeChat developer tools, Mini Program project, and import the project. Select the demo program you just downloaded and unzipped in the directory, fill in your mini program AppID in AppID , and then click Import below. As shown below.

This example program is very simple. You can continue to develop and add various functions, add backgrounds, optimize colors, etc. If you just want to use it simply, you only need to modify the uid and topic information in the /pages/index/index.js file to your own. The uid and topic here need to be the same as the uid and topic filled in by esp8266. There are two topics here, one for transmitting temperature and humidity, and the other for controlling LED. As shown below.

data: {
 uid:"4d9ec352e0376f2110a0c601a2857225",//User key, obtained by BAFAC Cloud Console ledtopic:"led002",//Control led topic, created by mqtt console dhttopic:"temp004",//Transmit temperature and humidity topic, created by console device_status:"offline",//String showing whether led is online, default offline ledOnOff:"off",
 checked: false, //The status of the led. The default LED is off wendu:"", //Temperature value, the default is empty shidu:"", //Humidity value, the default is empty ledicon:"/utils/img/lightoff.png", //Display the status of the LED icon. The default is to close the status icon client: null, //mqtt client, the default is empty},

After the modification is completed, press ctrl+s to save the changes. You can click the button on the left screen to debug, as shown below.

The console can view the debugging information of the applet. By default, it will automatically request data from the server every 3 seconds to check the status information of esp8266. Click the open or close button to open the esp8266 serial port debugging assistant to check whether esp8266 has received the command. If esp8266 has been connected to the Internet in the first step, it can receive information.

If the interface and other functions are developed. You can click the upload button above the WeChat developer tool, as shown below.

After the upload is successful, log in to the WeChat public platform you just registered. In the version management section, you can see the mini program you just uploaded. Submit it for review. It will usually be approved after about a day. After passing, log in to the WeChat public platform and submit it for release. If you are using it yourself, please add a login verification function, such as verifying whether a certain string is correct, etc. Otherwise, others can control it at will after the mini program is launched.

This is the end of this article about WeChat applet + mqtt, esp8266 temperature and humidity reading. For more related WeChat applet esp8266 temperature and humidity reading content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!