第一、原理講解
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#\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服務器端口
#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已聯網，都是可以收到信息的。
如果界面和其他功能都開發完畢。可以點擊微信開發者工具的上面的上傳按鈕，如下圖。
上傳成功后，再登陸剛剛注冊的微信公眾平台，在版本管理處，可以看到自己剛剛上傳的小程序，提交審核即可，等一天左右，一般都會通過，通過后登陸微信公眾平台，提交發布即可。如果是自己使用的，做好加上登陸驗證功能，比如驗證匹配一下某個字符串是否正確等等，不然小程序上線后別人也可以隨意控制了。
