一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 微信小程序+mqtt,esp8266溫濕度讀取的實現方法

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

2022-02-22 16:19巴法云 js教程

這篇文章主要介紹了微信小程序+mqtt,esp8266溫濕度讀取的實現方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

第一、原理講解

esp8266 通過mqtt發布消息,微信小程序通過mqtt 訂閱消息,小程序訂閱后,就可以實時收到esp8266 傳輸來的消息。

第二、溫濕度測試

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

這里使用的是D4口。

本demo 是利用arduino IDE開發,關于arduino IDE 的ESP8266環境配置可參考:環境配置: 點擊跳轉

安裝庫

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

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

測試程序:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#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);
}

 

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

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

第三、溫濕度推送到云端

如果上一步的溫濕度可以讀取輸出,那么就可以在上版的基礎上,把數據上傳到云端。

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

如果上傳的數據不止溫濕度,可在#號后面繼續添加&msg=#23#80#data1#data2#data3#data4#\r\n,app字符串分割的時候,要根據上傳的數據進行分割

升級版程序下載:

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

需要修改的地方

 

1
2
3
4
5
6
7
8
9
10
const char* ssid = "newhtc";     //修改,修改為你的路由的WIFI名字
const char* password = "qq123456";   //修改為你的WIFI密碼
const char* mqtt_server = "bemfa.com"//默認,MQTT<a href="http://www.zhuxianfei.com/server/" target="_blank" class="infotextkey">服務器</a>地址
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,如圖所示:

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

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

例程中,每三秒上傳一次數據:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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設備云 刷服務器之家頁,即可看到上傳的數據。如下圖所示:

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

數據上傳時用#號進行了封裝,27是溫度,24是濕度,off是上傳的燈的狀態。

第四、微信小程序開發

在 微信公眾平臺注冊小程序賬號,拿到小程序 appid,右側點擊 -開發–> 開發管理–>開發設置---->開發者ID,里面可以看到,長的大概是這樣:wx34a2063de5cec04b,下面導入項目的時候會用到。

右側點擊 -開發–> 開發管理–>開發設置---->服務器域名。下方服務器域名處,點擊修改,在request合法域名處,和 socket合法域名處 ,分別添加域名https://api.bemfa.com 和wss://bemfa.com 保存提交即可。如下圖。

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

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

下載demo示例程序。下載地址: 點擊下載

打開微信開發者工具,小程序項目,導入項目。在目錄處選擇剛剛下載解壓的demo示例程序,AppID處填入你的小程序AppID,然后點擊下方導入即可。如下圖。

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

本示例程序非常簡單,各位大神可以繼續開發添加各種功能,添加背景,優化色彩等等,如果只是簡單使用,只需修改/pages/index/index.js 文件中uid 和topic 信息為自己的即可,這里的uid和topic需要和esp8266填入的uid和topic相同,這里有兩個主題,一個用于傳輸溫度和濕度,一個用于控制LED。如下圖。

 

1
2
3
4
5
6
7
8
9
10
11
12
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 保存修改??梢渣c擊左邊屏幕上的按鈕進行調試,如下圖。

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

console控制臺可以查看小程序的調試信息。默認每3秒會自動請求一下服務器上的數據,查看esp8266的狀態信息。點擊打開或者關閉按鈕,打開esp8266串口調試助手,可查看esp8266是否收到指令,如果第一步esp8266已聯網,都是可以收到信息的。

如果界面和其他功能都開發完畢??梢渣c擊微信開發者工具的上面的上傳按鈕,如下圖。

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

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

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

到此這篇關于微信小程序+mqtt,esp8266溫濕度讀取的文章就介紹到這了,更多相關微信小程序esp8266溫濕度讀取內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!

原文鏈接:https://bemfa.blog.csdn.net/article/details/115282152

延伸 · 閱讀

精彩推薦
  • js教程微信小程序選擇圖片控件

    微信小程序選擇圖片控件

    這篇文章主要為大家詳細介紹了微信小程序選擇圖片控件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    小雅雅家的小凱凱吖9972022-01-04
  • js教程JavaScript實現切換多張圖片

    JavaScript實現切換多張圖片

    這篇文章主要為大家詳細介紹了JavaScript實現切換多張圖片,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    是M11772022-01-10
  • js教程ES6字符串的擴展實例

    ES6字符串的擴展實例

    這篇文章主要介紹了ES6字符串的擴展實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小...

    知否5592021-12-16
  • js教程JS實現一個秒表計時器

    JS實現一個秒表計時器

    這篇文章主要為大家詳細介紹了JS實現一個秒表計時器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    yiran010100110232022-02-13
  • js教程js實現驗證碼干擾(動態)

    js實現驗證碼干擾(動態)

    這篇文章主要為大家詳細介紹了js實現驗證碼干擾,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    lzh~9752022-01-22
  • js教程一起來了解一下JavaScript的預編譯(小結)

    一起來了解一下JavaScript的預編譯(小結)

    這篇文章主要介紹了一起來了解一下JavaScript的預編譯(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的...

    前端布吉島12002022-01-25
  • js教程微信小程序授權登錄的優雅處理方式

    微信小程序授權登錄的優雅處理方式

    這篇文章主要給大家介紹了關于微信小程序授權登錄的優雅處理方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值...

    FTD止水11572022-02-15
  • js教程JavaScript實現二叉搜索樹

    JavaScript實現二叉搜索樹

    這篇文章主要為大家詳細介紹了JavaScript實現二叉搜索樹,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    希魔王的塔羅牌7232022-02-13
主站蜘蛛池模板: 果冻传媒在线观看的 | 色妞女女女女女bbbb | 亚洲美女啪啪 | 国产亚洲女在线线精品 | 男男gaygays国内 | 国产xx肥老妇视频奂费 | 暖暖 免费 高清 日本 在线 | 激情三级hd中文字幕 | 国产精品色图 | 鞋奴的视频VK | 亚洲国产在线2o20 | 黑人性xxx | 日韩在线视精品在亚洲 | 成人免费观看在线视频 | 继攵催眠女乱h调教 | 动漫人物差差差动漫人物免费观看 | 国产老熟| 动漫美丽妇人1~2在线看 | 精品日韩二区三区精品视频 | 精品无人区麻豆乱码无限制 | 四虎影院精品在线观看 | 免费欧美一级 | 亚洲免费福利视频 | 男gay网站视频免费观看 | 亚洲国产综合久久久无码色伦 | 男人桶女下面60分钟视频 | 视频大全在线观看网址 | 欧美男同videos | 免费看一级毛片 | 欧美视频一区二区三区在线观看 | 99草精品视频 | 亚洲欧美日韩国产综合专区 | 奇米久草 | 我与岳乱短篇小说 | 国产精品99爱免费视频 | 亚洲一区二区三区在线播放 | 精品无码乱码AV | 美女天天操 | 午夜熟女插插XX免费视频 | ass极品美妇pic | 四虎永久在线精品国产 |