首頁 > 軟體

微信小程式+mqtt,esp8266溫溼度讀取的實現方法

2021-04-02 13:00:49

第一、原理講解

esp8266 通過mqtt釋出訊息,微信小程式通過mqtt 訂閱訊息,小程式訂閱後,就可以實時收到esp8266 傳輸來的訊息。

第二、溫溼度測試

這裡使用的是D4口。

本demo 是利用arduino IDE開發,關於arduino IDE 的ESP8266環境設定可參考:環境設定: 點選跳轉

安裝庫

本案例使用一個非常簡單易用且與ESP8266配合使用的是Simple DHT感測器庫。可以通過Arduino IDE Library Manager輕鬆安裝該庫。
在 arduino IDE上方選項處----> 工具—>管理庫,然後直接搜尋dht11即可。點選安裝庫,如下圖:

測試程式:

#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);
}

正常工作的話,串列埠會正常輸出的,如下圖所示:

第三、溫溼度推播到雲端

如果上一步的溫溼度可以讀取輸出,那麼就可以在上版的基礎上,把資料上傳到雲端。

增加了按鈕控制,資料用#號包裹,以便app採用字串切割,分割出來資料,#23#80#on,即#溫度#溼度#按鈕狀態,小程式端會根據#號分割字串進行取值,以便顯示。

如果上傳的資料不止溫溼度,可在#號後面繼續新增&msg=#23#80#data1#data2#data3#data4#rn,app字串分割的時候,要根據上傳的資料進行分割

升級版程式下載:

點選下載 https://cloud.bemfa.com/zip/mqtt/dht11_led.zip

需要修改的地方

const char* ssid = "newhtc";     //修改,修改為你的路由的WIFI名字
const char* password = "qq123456";   //修改為你的WIFI密碼
const char* mqtt_server = "bemfa.com";  //預設,MQTT伺服器地址
const int mqtt_server_port = 9501;   //預設,MQTT伺服器埠
#define ID_MQTT "4d9ec352e0376f2110a0c601a2857225" //mqtt使用者端ID,修改為你的開發者金鑰
const char* topic = "led002";      //Led主題名字,可在巴法雲控制檯自行建立,名稱隨意
const char * dhttopic = "temp004";     //溫溼度主題名字,可在巴法雲mqtt控制檯建立
int pinDHT11 = D4;       //dht11感測器引腳輸入
int B_led = D5;       //控制的led引腳
long timeval = 3*1000;     //上傳的感測器時間間隔,預設3秒

在巴法mqtt裝置雲控制檯 新建兩個主題,主題名字隨意,例如temp004 用於傳輸溫溼度,led002用於控制led,本範例用用temp004和led002使用範例程式碼時應修改為自己的主題名字,字母或數位或字母加數位組合。UID為使用者私鑰,在 巴法創客雲控制檯 註冊登陸後可獲得。

注意:在mqtt裝置雲建立主題。

登陸完成後,可在控制檯看到自己的私鑰UID,如圖所示:

WIFI名稱為自己的路由器WIFI名稱,區分大小寫,寫錯會導致連線不上網路的。

例程中,每三秒上傳一次資料:

long now = millis();//獲取當前時間戳
 if (now - lastMsg > timeval) {//如果達到3s,進行資料上傳
 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; //資料封裝#溫度#溼度#開關狀態#
 client.publish(dhttopic, msg.c_str());//資料上傳
 }

如果路由器有網路的話,資料會自動上傳,可在巴法mqtt裝置雲 重新整理網頁,即可看到上傳的資料。如下圖所示:


資料上傳時用#號進行了封裝,27是溫度,24是溼度,off是上傳的燈的狀態。

第四、微信小程式開發

在 微信公眾平臺註冊小程式賬號,拿到小程式 appid,右側點選 -開發–> 開發管理–>開發設定---->開發者ID,裡面可以看到,長的大概是這樣:wx34a2063de5cec04b,下面匯入專案的時候會用到。

右側點選 -開發–> 開發管理–>開發設定---->伺服器域名。下方伺服器域名處,點選修改,在request合法域名處,和 socket合法域名處 ,分別新增域名https://api.bemfa.com 和wss://bemfa.com 儲存提交即可。如下圖。

下載安裝微信開發者工具,可百度下載。

下載demo範例程式。下載地址: 點選下載

開啟微信開發者工具,小程式專案,匯入專案。在目錄處選擇剛剛下載解壓的demo範例程式,AppID處填入你的小程式AppID,然後點選下方匯入即可。如下圖。

本範例程式非常簡單,各位大神可以繼續開發新增各種功能,新增背景,優化色彩等等,如果只是簡單使用,只需修改/pages/index/index.js 檔案中uid 和topic 資訊為自己的即可,這裡的uid和topic需要和esp8266填入的uid和topic相同,這裡有兩個主題,一個用於傳輸溫度和溼度,一個用於控制LED。如下圖。

data: {
 uid:"4d9ec352e0376f2110a0c601a2857225",//使用者金鑰,巴法雲控制檯獲取
 ledtopic:"led002",//控制led的主題,mqtt控制檯建立
 dhttopic:"temp004",//傳輸溫溼度的主題,控制檯建立
 device_status:"離線",// 顯示led是否線上的字串,預設離線
 ledOnOff:"關閉",
 checked: false,//led的狀態。預設led關閉
 wendu:"",//溫度值,預設為空
 shidu:"",//溼度值,預設為空
 ledicon:"/utils/img/lightoff.png",//顯示led圖示的狀態。預設是關閉狀態圖示
 client: null,//mqtt使用者端,預設為空
 },

修改完畢後,ctrl+s 儲存修改。可以點選左邊螢幕上的按鈕進行偵錯,如下圖。

console控制檯可以檢視小程式的偵錯資訊。預設每3秒會自動請求一下伺服器上的資料,檢視esp8266的狀態資訊。點選開啟或者關閉按鈕,開啟esp8266串列埠偵錯助手,可檢視esp8266是否收到指令,如果第一步esp8266已聯網,都是可以收到資訊的。

如果介面和其他功能都開發完畢。可以點選微信開發者工具的上面的上傳按鈕,如下圖。

上傳成功後,再登陸剛剛註冊的微信公眾平臺,在版本管理處,可以看到自己剛剛上傳的小程式,提交稽核即可,等一天左右,一般都會通過,通過後登陸微信公眾平臺,提交發布即可。如果是自己使用的,做好加上登陸驗證功能,比如驗證匹配一下某個字串是否正確等等,不然小程式上線後別人也可以隨意控制了。

到此這篇關於微信小程式+mqtt,esp8266溫溼度讀取的文章就介紹到這了,更多相關微信小程式esp8266溫溼度讀取內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com