WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

ここに画像の説明を挿入

まず、

esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqtt を通じてメッセージをサブスクライブします。アプレットがサブスクライブすると、esp8266 によって送信されたメッセージをリアルタイムで受信できます。

2番目は、温度と湿度のテストです

ここに画像の説明を挿入

ここではD4ポートが使用されます。

このデモはArduino IDEを使用して開発されています。Arduino IDEのESP8266環境設定の詳細については、以下を参照してください。環境設定: クリックしてジャンプ

ライブラリのインストール

この例では、ESP8266 で動作する非常にシンプルで使いやすい Simple DHT センサー ライブラリを使用します。ライブラリは、Arduino IDE ライブラリ マネージャーを通じて簡単にインストールできます。
Arduino IDE の上のオプションで、「ツール」>「ライブラリの管理」に移動し、 dht11を直接検索します。以下に示すように、クリックしてライブラリをインストールします。

ここに画像の説明を挿入

テスト手順:

#include <SimpleDHT.h>

// DHT11の場合、 
// VCC: 5V または 3V
// GND: GND
// データ: 2
ピンDHT11 = D4;
シンプルDHT11 dht11(pinDHT11);

void セットアップ() {
 シリアル.begin(115200);
}

void loop() {
 // 作業を開始します...
 Serial.println("=====================================");
 Serial.println("サンプルDHT11...");
 
 // サンプルなしで読み取ります。
 バイト温度 = 0;
 バイト湿度 = 0;
 int err = SimpleDHTErrSuccess;
 if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
 Serial.print("DHT11の読み取りに失敗しました、err="); Serial.println(err);delay(1000);
 戻る;
 }
 
 Serial.print("サンプルOK: ");
 Serial.print((int)温度); Serial.print(" *C, "); 
 Serial.print((int)湿度); Serial.println(" H");
 
 // DHT11 のサンプリング レートは 1HZ です。
 遅延(1500);
}

正常に動作する場合、次の図に示すように、シリアル ポートは正常に出力されます。

ここに画像の説明を挿入

3番目に、温度と湿度をクラウドにプッシュする

前のステップの温度と湿度を読み取って出力できれば、前のバージョンに基づいてデータをクラウドにアップロードできます。

ボタンコントロールが追加され、データが # で囲まれているため、アプリは文字列の切り取りを使用してデータを分離できます。#23#80#on、つまり #温度#湿度#ボタンの状態。ミニプログラムは、# で分割された文字列に従って値を取得し、表示します。

アップロードされたデータが温度と湿度だけではない場合は、# 記号の後に &msg=#23#80#data1#data2#data3#data4#\r\n を追加し続けることができます。アプリが文字列を分割するときは、アップロードされたデータに従って分割する必要があります。

アップグレード版をダウンロード:

クリックしてダウンロードしてください https://cloud.bemfa.com/zip/mqtt/dht11_led.zip

変更が必要な点

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

Bafa MQTT デバイス クラウド コンソールで 2 つの新しいトピックを作成します。トピック名は任意です。たとえば、temp004 は温度と湿度の送信に使用され、led002 は LED の制御に使用されます。この例では、temp004 と led002 を使用します。サンプル コードを使用する場合は、独自のトピック名に変更する必要があります。トピック名は、文字、数字、または文字と数字の組み合わせにすることができます。 UID はユーザーの秘密鍵であり、 Buffa Maker Cloud Consoleに登録してログインすると取得できます。

注: MQTT デバイス クラウドでトピックを作成します。

ログインすると、図に示すように、コンソールに秘密鍵の UID が表示されます。

ここに画像の説明を挿入

WIFI 名はルーターの WIFI 名であり、大文字と小文字が区別されます。間違って入力すると、ネットワークに接続できなくなります。

この例では、データは 3 秒ごとにアップロードされます。

long now = millis(); //現在のタイムスタンプを取得します。 if (now - lastMsg > timeval) { //3秒に達したら、データをアップロードします。 lastMsg = now;
 // サンプルなしで読み取ります。
 バイト温度 = 0;
 バイト湿度 = 0;
 int err = SimpleDHTErrSuccess;
 if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
  Serial.print("DHT11の読み取りに失敗しました、err="); Serial.println(err); delay(1000);
  戻る;
 }
 String msg = "#" + (String)temperature + "#" + (String)humidity + "#" + ledstatus; //データ パッケージ#温度#湿度#スイッチ ステータス#
 client.publish(dhttopic, msg.c_str()); //データのアップロード}

ルーターにネットワーク アクセスがある場合、データは自動的にアップロードされます。アップロードされたデータを確認するには、Bafa MQTT デバイス クラウドの Web ページを更新します。次の図に示すように:

ここに画像の説明を挿入
ここに画像の説明を挿入

データはアップロード時に # でカプセル化されます。27 は温度、24 は湿度、オフはアップロードされたライトの状態です。

4. WeChatアプレットの開発

WeChat パブリック プラットフォームでミニ プログラム アカウントを登録し、ミニ プログラムの appid を取得して、右側の [開発] -> [開発管理] -> [開発設定] ----> [開発者 ID] をクリックします。次のように表示されます: wx34a2063de5cec04b。これは、以下のプロジェクトをインポートするときに使用されます。

右側で、「開発」>「開発管理」>「開発設定」>「サーバー ドメイン名」をクリックします。以下のサーバー ドメイン名で [変更] をクリックし、リクエストの法的ドメイン名とソケットの法的ドメイン名にそれぞれドメイン名 https://api.bemfa.com と wss://bemfa.com を追加して、保存して送信します。下記の通りです。

ここに画像の説明を挿入

Baidu からダウンロードできる WeChat 開発者ツールをダウンロードしてインストールします。

デモプログラムをダウンロードしてください。ダウンロードアドレス: クリックしてダウンロード

WeChat 開発者ツール、ミニプログラム プロジェクトを開き、プロジェクトをインポートします。ディレクトリにダウンロードして解凍したデモ プログラムを選択し、 AppID にミニ プログラムの AppID を入力して、下の [インポート] をクリックします。下記の通りです。

ここに画像の説明を挿入

このサンプルプログラムは非常にシンプルです。 さまざまな機能を開発して追加したり、背景を追加したり、色を最適化したりすることができます。 単純に使用するだけであれば、/pages/index/index.js ファイル内の uid と topic 情報を独自のものに変更するだけで済みます。 ここでの uid と topic は、esp8266 によって入力された uid と topic と同じである必要があります。 ここには、温度と湿度を送信するためのトピックと、LED を制御するためのトピックの 2 つがあります。下記の通りです。

データ: {
 uid:"4d9ec352e0376f2110a0c601a2857225",//BAFAC Cloud Console によって取得されたユーザー キー ledtopic:"led002",//mqtt コンソールによって作成された制御 LED トピック dhttopic:"temp004",//コンソールによって作成された温度と湿度の送信トピック device_status:"offline",//LED がオンラインかどうかを示す文字列、デフォルトはオフライン ledOnOff:"off",
 チェック済み: false, // LED のステータス。デフォルトの LED はオフです。wendu:"", // 温度値、デフォルトは空です。shidu:"", // 湿度値、デフォルトは空です。ledicon:"/utils/img/lightoff.png", // LED アイコンのステータスを表示します。デフォルトではステータスアイコンクライアントを閉じます: null、//mqttクライアント、デフォルトは空です}、

変更が完了したら、Ctrl + S を押して変更を保存します。以下に示すように、左側の画面のボタンをクリックしてデバッグすることができます。

ここに画像の説明を挿入

コンソールではアプレットのデバッグ情報を表示できます。デフォルトでは、esp8266 のステータス情報を確認するために、3 秒ごとにサーバーにデータを自動的に要求します。開くまたは閉じるボタンをクリックして、esp8266 シリアル ポート デバッグ アシスタントを開き、esp8266 がコマンドを受信したかどうかを確認します。最初のステップで esp8266 がインターネットに接続されている場合は、情報を受信できます。

インターフェースやその他の機能が開発されれば。以下に示すように、WeChat 開発者ツールの上にあるアップロード ボタンをクリックできます。

ここに画像の説明を挿入

アップロードが成功したら、登録したWeChatパブリックプラットフォームにログインします。バージョン管理セクションで、アップロードしたミニプログラムを確認できます。レビューに提出します。通常、約1日後に承認されます。合格したら、WeChatパブリックプラットフォームにログインしてリリースに提出します。自分で使う場合は、特定の文字列が正しいかなどを確認するログイン認証機能を追加してください。そうしないと、ミニプログラム起動後に他の人が勝手に制御できてしまいます。

ここに画像の説明を挿入

WeChat アプレット + mqtt、esp8266 温度と湿度の読み取りに関するこの記事はこれで終わりです。WeChat アプレット esp8266 温度と湿度の読み取りに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ESP8266 による JSON データの解析の例

<<:  kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

>>:  MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する

推薦する

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

JavaScriptプロトタイプと例の詳細な説明

目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...

単一のMySQLテーブルを復元する手順

休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

CSS で美しい時計アニメーション効果を実装するためのサンプルコード

仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...

MySQL 8.0 でリモートアクセス権限を設定する方法

前回の記事では、MySQL パスワードをリセットする方法を説明しました。一部の学生から、データベース...

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

HTML 文法百科事典_HTML 言語文法百科事典 (必読)

ボリュームラベル、プロパティ名、説明002 <! - - ... - -> コメント00...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...

MySQLクエリのソートとページング関連

概要通常、データベース内のデータを直接表示することは望ましくないため、最後の 2 つのセクションでは...

Vueはビデオ再生を実装するためにビデオタグを使用します

この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...