第一、原理講解

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);
 JxmCJNlKVA
 
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#\r\n，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伺服器埠
#definhttp://www.cppcns.come 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 temperaturJxmCJNlKVAe = 0;
 byte humidity = 0;
 int err = SimpleDHTErrSuccess;
 if ((err = dht11.read(&temperature,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已聯網，都是可以收到資訊的。

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

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

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