[WeChat アプレット制御ハードウェア 17] Anxinke TB/PB Bluetooth モジュールと ESP32/C3/S3 モジュールの制御をサポートする Tencent IoT プラットフォーム上の Tencent Lianlian アプレット Bluetooth デバイス H5 カスタム パネルによって開発されたピットを共有します。(ソースコード付き)

WeChat IoT エコロジーは、主にWeChat ハードウェア開発プラットフォームTencent IoT 開発プラットフォーム      に分けられます.前者はメンテナンスを停止しましたが、依然として大きな学習価値があり、後者はメイン プラットフォームとして、多くの機能を統合しています。 WeChat アプレット 制御するネットワーク。

      より多くの友人と私自身の研究ノートの世話をするために、私はこの特別なメモを更新し続けます. CSDN半分の心に注意を払い、フロンティア分野にあなたを連れて行き、フロンティア技術を学びましょう!

自作の WeChat サーバー && WeChat ハードウェア開発プラットフォーム

[ WeChat アプレット制御ハードウェアパート 1 ] ネットワーク全体での最初のリリースで、emq メッセージ サーバーの助けを借りて、WeChat アプレット用の mqtt サーバーを構築し、スマート ハードウェアを簡単に制御する方法を示します。
WeChatアプレット制御ハードウェアその2 】WeChatアプレットの旅を始め、アプレットMqttクライアントのソースコードをインポートし、簡単な検証とサーバーとの通信を実現!
WeChatアプレット制御ハードウェアその3 】WeChatアプレット制御esp8266プロジェクトをソフトウェアからハードウェアまで構築し、通信プロトコルをカスタマイズし、面接ポジションやコンペのポイントを追加!
[ WeChat ミニ プログラム制御ハードウェアパート 4 ] WeChat パブリック アカウント配信ネットワーク Airkiss の原理とプロセスの詳細な分析、esp8266 が WeChat へのコールバック パラメータをカスタマイズする方法、およびバインド デバイスの最初のステップを実現する方法!
WeChatアプレット制御ハードウェアその5 】次に踏むべきアーキテクチャの考え方を明確にし、JavaScriptのオブザーバーモードを学び、WeChatアプレットの複数ページでデバイスプッシュイベントを同時に受信!
[ WeChat Mini プログラム制御ハードウェアパート 6 ] サーバーはどのように Qiniu クラウド ストレージ SDK を統合し、ユーザー定義のデバイス画像をサードパーティ サーバーに保存しますか!
WeChatアプレット制御ハードウェアその7 】WeChatアプレットMqttプロトコル制御のインテリジェントハードウェアフレームワークを作って、フルスタックエンジニアの夢を胸に秘めよう!!
[ WeChat Mini プログラム制御ハードウェア第 8 章 】WeChat アプレットは websockets を使用して、Alibaba Cloud IOT プラットフォームの mqtt サーバーに接続します。これは、パッケージ化と使用が非常に簡単です!
WeChatアプレット制御ハードウェアその9】アリババクラウドIoTプラットフォームの無料接続を巧みに利用することで、WeChatアプレットからの色収集・制御esp8266でカラフルな光を出力できます 中秋節の生放送はいかがですか?!
WeChat パブリックアカウント制御ハードウェアその10 】 WeChat パブリックアカウントのWebページでmqttサーバーへの接続方法チュートリアル!!
WeChatアプレット制御ハードウェアその11 】 全ネットワーク初のリリースとなるWeChatアプレットble bluetooth制御esp32は、ネットワークレスで明るさスイッチの制御が可能。
[ WeChat アプレット制御ハードウェアPart 12 ] WeChat アプレット Bluetooth 制御ハードウェアの開発方法は? WeChat アプレット Bluetooth API の使用を包括的に分析します。
[ WeChat アプレット制御ハードウェアその13 ] [AT 章] ハードウェア プラットフォームとは関係ありません。WeChat アプレット AP 配布ネットワーク Anxinke Wi-Fi モジュール ネットワーク アクセスの例です。

Tencent IoT 開発プラットフォーム

Tencent Lianlian - Tencent IoT Development Platform Part 1】Tencentの公式Jingjijiがリリースした「Tencent Lianlian」がついに登場! 公式チュートリアルに従って、ネットワークの構成方法とWeChatアプレットでESP8266を制御する方法を学びましょう!
[ Tencent Lianlian-Tencent IoT 開発プラットフォーム パート 2 ] WeChat アプレット smartconfig 配信ネットワーク原理の詳細な分析により、Anxin は Tencent IoT 開発プラットフォームを ESP-12S に直接接続できます! !
Tencent Lianlian-Tencent IoT Development Platform Part 3】Anxinke IoT WeChatアプレットは完全オープンソースで、アプレットはワンクリックでネットワーク設定+制御+バインディングを実現!
[ Tencent Lianlian-Tencent IoT Development Platform Part 4 ] Tencent IoT Development Platform に接続された ESP8266 RTOS C SDK の 2 次開発に関するノート共有!
Tencent Lianlian - Tencent IoT Development Platform Part 5】ワイヤレス IoT の配信ネットワーク プロトコルを再理解して、Tencent IoT の Bluetooth プロトコル LLSync SDK を理解し、Tencent Lianlian アプレットを Bluetooth 配信にも使用できます。
[ Tencent Lianlian-Tencent IoT 開発プラットフォーム パート 6 ] Anxinke ESP32-S 開発ボードは、Tencent IoT 開発プラットフォーム Bluetooth llsync プロトコルの移植を実現し、ワンキー Bluetooth 高速ネットワーク配信 + リモート コントロールを実現します。
[ Tencent Lianlian-Tencent IoT 開発プラットフォーム パート 7 ] Tencent Lianlian WeChat アプレット Bluetooth デバイス H5 カスタム パネルが開発したピットは、Anxinke TB/PB Bluetooth モジュールと ESP32/C3/S3 モジュールの制御をサポートし、迂回を回避できます。

ここに画像の説明を挿入

I.はじめに

    最近の状態では、特に嬉しいこともなく、維持したい関係もなく、特に欲しいものもないのですが、生活の中で苦労しており、すべてがごく普通のことです。少しの損失。この世界は良くない、偏った見方でいっぱいです。

    最近、私はプロジェクトに取り組んでいます. 今日は、プロジェクトを評価する際に考慮すべき技術ポイントでもある次の技術ポイントを確認します. Tencent Lianlian WeChatアプレットでBluetoothデバイスのH5カスタムパネルを開発する方法, おそらく組み込み開発とフロントエンド開発. 友人, 大きな助け.

    弾丸をかじって、2日も経たないうちに、ようやく原理を理解し、それをみんなと共有しました. やはりガチョウ工場は参入障壁が高いですね

    Tencent IoT によって開かれた SDK アドレス、Tencent Lianlian カスタム H5 パネル SDK アドレスを直接投稿しました: github.com/tencentyun/iotexplorer-h5-panel-demo、これは Tencent Lianlian WeChat アプレットのカスタム コントロール パネルの SDK に基づいています。および関連する入門チュートリアル。

    結局のところ、始めるには実際にいくつかの障壁があります. 信じられない場合は、これらの実際のコメントを見てください.
ここに画像の説明を挿入

ここに画像の説明を挿入

2. Tencent Lianlian を知る

    前回の記事で、Tencent IoT 開発プラットフォームのプロトコルとはどのようなものかを説明しましたが、LLSyncわからない場合はもう一度参照してみましょう。

     記事リンク: ワイヤレス IoT のネットワーク配信プロトコルを再認識し、Tencent IoT Bluetooth プロトコルの LLSync SDK を理解し、Tencent Lianlian アプレットも Bluetooth ネットワーク配信に使用できます。
     記事リンク: Anxinke ESP32-S 開発ボードは、Tencent IoT 開発プラットフォームの Bluetooth llsync プロトコルの移植を実装し、ワンボタンの Bluetooth 高速ネットワーク配信 + リモート コントロールを実現します。

    Tencent Lianlian H5カスタム開発とは、「Tencent Lianlian」アプレットを通じてインテリジェント製品を統一的に管理および制御する機器メーカーおよびソリューションプロバイダーを指し、Tencent Lianlian H5に従ってメーカーのパーソナライズされたデバイスコントロールパネルのインタラクティブな開発のみを実行する必要がありますカスタム開発仕様により、「Tencent Lianlian」が提供するすべての機能を直接使用できるため、ユーザーが完全に独立したアプリケーションを開発するための開発コストを削減できます。

    WeChat ミニプログラムはダウンロード不要で、スキャンするだけですぐに使用でき、消費者がスマート製品を使用する敷居を下げることができます. Tencent Cloud IoT は、消費者がデバイスの相互接続と相互運用性を実現できるようにする公式ミニプログラム「Tencent Lianlian」を提供します. Tencent Lianlianエコシステムをパーソナライズして共有するメーカーのニーズを満たすために、さまざまなブランド、カテゴリ、および通信方法の。

    Tencent IoT 開発プラットフォームの Tencent Lianlian は制御ホスト コンピューターの 1 つに過ぎず、APP バージョンもあります。Tencent Lianlian はクロスプラットフォームの特性を持つ WeChat アプレットであるため、多くのメーカーがこのホスト コンピューター制御を使用することをいとわないため、今日はそれを元にカスタムパネル開発の入門チュートリアルのやり方を紹介します。

    もちろん、Tencent IoT 開発プラットフォームに接続するための小さなプログラムを作成するゼロ開発もサポートしています.Tencent IoT 開発プラットフォームは、対応する SDK も提供しています.この記事を参照してください:

     記事リンク: Anxinke IoT WeChat アプレットは完全にオープン ソースであり、アプレットはワンクリックのネットワーク構成 + コントロール + バインディングを実現します!


3. 開発統合ステップ

     これを最初に行い、その原理を説明します。

3.1 準備

     node.js と npm 環境をインストールします。以下が私の環境バージョンです。

D:\iotexplorer-h5-panel-demo>npm -v
6.14.4

D:\iotexplorer-h5-panel-demo>node -v
v12.16.2

     WeChat 開発者ツールの安定版をダウンロードします: developers.weixin.qq.com/miniprogram/dev/devtools

     SDK ソースコードをダウンロード: github.com/tencentyun/iotexplorer-h5-panel-demo


3.2 スタート

  1. デモ プロジェクトのソース コードを取得する
   git clone https://github.com/tencentyun/iotexplorer-h5-panel-demo.git
  1. 依存関係をインストールする
   cd iotexplorer-h5-panel-demo
   npm install
  1. whistle のインストールと設定 whistle とは何かというと、代理ツールです。

  2. whistle をインストールするには、次のコマンドを実行します。

   npm install -g whistle
  1. whistle を開始し、次のコマンドを実行します。
   w2 start

whistle が正常に開始されると、コマンド ラインに次の出力が表示されます。

   [i] [email protected] started
   [i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
   ...(其后输出省略)
  1. ブラウザーでそれを開いてhttp://127.0.0.1:8899/、ホイッスルのユーザー インターフェイスに入ります。
  2. [ルール] > [デフォルト]を選択して、ルール構成ページに入ります。入力ボックスに次のプロキシ ルールを入力します。
developing.script/developing.js https://127.0.0.1:9000/index.js
developing.style/developing.css https://127.0.0.1:9000/index.css

     [保存]をクリックして変更を保存します。
ここに画像の説明を挿入

  1. メニュー バーの [ HTTPS ] をクリックして、HTTPS 構成ページに入ります。スキャンした QR コード情報に注意を払う必要はありません。Capture TUNNEL CONNECTsを直接確認し、 Download RootCAをクリックして、ルート証明書をローカルにダウンロードします。

  2. ルート証明書をローカル コンピュータにインストールします。詳細については、「ルート証明書のインストール

3.3 デモ プロジェクトのリアルタイム コンパイルの開始

Demo プロジェクト ディレクトリで、次のコマンドを実行します。

npm run dev

コンパイルが成功すると、コマンド ラインに次の出力が表示されます。

i 「wds」: Project is running at https://localhost:9000/
...(中间输出省略)
i 「wdm」: Compiled successfully.

3.4 WeChat 開発者ツールの構成

  1. WeChat 開発者ツールを開き、メニュー バーで [設定] > [プロキシ] > [プロキシ設定]を選択します。
  2. プロキシを手動で設定することを選択し、プロキシ アドレス127.0.0.1とポートを入力します8899
    WeChat 開発者ツール - プロキシ設定

3.5: WeChat 開発者ツールが H5 パネルを開く

  1. WeChat 開発者ツールを開き、新しいプロジェクト ページで公式アカウント ページをクリックして、公式アカウント デバッグ ページに入ります。
    WeChat 開発者ツール - パブリック アカウントのデバッグ
  2. H5 パネル JS ファイルにアクセスできることを確認します。
    アドレス バーに入力し、https://developing.script/developing.jsEnter キーを押します。JSファイルのコードをエミュレータに読み込んで表示できれば、H5パネルのJSファイルにアクセスできるということです。
  3. アドレス バーにローカルデバッグURL を入力し、Enter キーを押すと、エミュレーターが Tencent Cloud コンソールのログイン ページにジャンプします。
  4. エミュレーター メニューで[モデル] > [Windows (480×800 | Dpr:2) ] を選択します。

エミュレータが携帯電話環境をシミュレートしている場合、WeChat や QQ に正常にログインすることはできません. ここでは、まず Windows モデルに変更し、ログインが完了した後に元のモデル設定に戻すことができます.
WeChat 開発者ツール - モデル設定

  1. H5 パネルでアプレットの Bluetooth インターフェイスを直接呼び出すことはできません。H5 パネルとアプレット間の Bluetooth プロトコル通信メカニズムは、H5 SDK にカプセル化されています。H5 パネルで Bluetooth 通信機能を使用するには、H5 SDK によって提供される Bluetooth モジュールを使用する必要があります。Bluetooth デバイスの H5 パネル開発については、Bluetooth デバイスのドキュメントを参照してください。

4. Bluetooth デバイス H5 の開発

     以下のコードを説明しましょう. 全体のアーキテクチャはReact + TypeJavaScriptアーキテクチャです. Bluetooth デバイスが H5 に接続されている場合, 2 つのページを実装する必要があります:

  1. デバイス検索ページ
  2. デバイス パネル ページ

ページ紹介

     現在、これら 2 つのページは JS ファイルを共有しており、メーカーはルートに従って JS でレンダリングされたページを処理する必要があります。

デバッグ モード、つまりローカル デバッグ モード:

  1. 検索ページ:/h5panel/developing/live/bluetooth-search
  2. パネルページ:/h5panel/developing/live

本番環境、つまり CSS/JS ファイルがバックグラウンドにアップロードされています。

  1. 検索ページ:/h5panel/bluetooth-search
  2. パネルページ:/h5panel

     詳細については、デモのルーティングの実装app.jsxを。

1. デバイス検索ページ

     Bluetooth 検索の処理、メーカー独自のデバイスの除外、およびユーザーの自宅へのバインド機能の追加を担当します。プロトコルが LLsync の場合、このロジックを移動する必要はありません。

     Bluetooth デバイスごとにプロトコルや放送内容が異なるため、アプレットが検索したデバイス一覧からメーカー独自のデバイスを見つけるロジックを実装する必要があります (詳しくはBluetoothDemo/SearchPageのページを参照してください)。

2.デバイスパネルページ

     通常の H5 パネルと同様に、メーカーは独自のデバイスのデバイス パネル ページをカスタマイズできます. 唯一の違いは、デバイス パネル ページが sdk を介した Bluetooth デバイスの検索と接続などのロジックを処理する必要があることです.

開発プロセス

1. 検索ページ

PS: (LLSync プロトコルの場合は、この手順をスキップしてください)

  1. 開発モードに入ります。下の図を参照してください。
  2. デバイスの追加ページを開き、Bluetooth デバイスの検索エリアを長押しし、ポップアップ ウィンドウで [H5 Bluetooth 検索ページのデバッグ アドレスを生成する] を選択します。
  3. リンクを WeChat またはその他の手段でコンピューターに送信し、コンピューターのブラウザーからデバッグ リンクにアクセスします。リンクの形式は次のとおりで、開発者はリンクに開発する製品の ID を入力する必要があります。
https://iot.cloud.tencent.com/h5panel/developing/live/bluetooth-search?h5PanelDevId=2f2c9228c2904920976e2d356baf3fd4&productId=
  1. H5 パネルのデバッグと同様に、//developing.script/developing.jsデフォルト//developing.style/developing.cssで検索ページが読み込まれ、ファイルが読み込まれます。これら 2 つのアドレスをローカルで開発された JS/CSS に転送するようにプロキシ転送を構成する必要があります。

2.パネルページ

  1. まず、検索ページの開発を完了する必要があります。つまり、デバイスが正常にホームにバインドされた後、H5 パネル ページの開発を実行できます。
  2. 次に、アプレットをデバッグ モードにします。操作は次のとおりです。Tencent Lianlian アプレットを開き、[My] > [About Us] を選択し、[About Us] ページに入ります。Tencent Lianlian ロゴを長押しし、ポップアップ メニューで開発モードに入ることを選択します。このページでは、開発モードに正常に入ることが求められます

ここに画像の説明を挿入
3. Tencent Lianlian Mini Program のホームページに戻り、デバイス リストでデバッグするデバイスを長押しし、ポップアップ メニューで [Generate H5 panel debugging address] を選択すると、デバッグ アドレスがコピーされます。クリップボード。このリンクをコピーして WeChat 開発者ツールのアドレス バーに貼り付けると、デバッグ ページが表示されます。
ここに画像の説明を挿入


5. よくある質問

  1. アーキテクチャ全体はどのように開発されていますか? Bluetooth 検索ページ インターフェイスと制御ページのロジックはどこにありますか?

アーキテクチャ全体はReact + TypeJavaScriptアーキテクチャであり、Bluetooth 検索ページの対応するコードはBluetoothDemo/SearchPageにあり、Bluetooth 制御ページと WiFi 制御ページのロジックは同じページ、つまりsrc/DevicePanelにあります。

  1. このホイッスルは何のためですか?

これは実際にはプロキシ ツールです. WeChat 開発者ツールを使用してコントロール ページをデバッグするときに、プロキシを設定したので、ホイッスルはここで方向転換し、元のデバッグ用リモート インターフェイスをローカルにプロキシします。したがって、ローカル インターフェイスをデバッグするたびに、このホイッスルを開始する必要があります。

  1. 公式の JS および CSS パッケージをバックグラウンドで生成する方法は?

これを実行すると、アップロードする公式ファイルを含む新しいnpm run releaseフォルダーが表示されます。dist

  1. ブロガーは実機でデバッグしていますか?

はい、標準の LLSync プロトコルを統合した Anxinke PB-02 モジュールを使用しているため、デバッグがより効率的になります。

  1. 実機をデバッグする場合、WeChat 開発者ツールのデバッグ検索インターフェースとコントロールパネルインターフェースで実機を操作するにはどうすればよいですか?

この問題は私も長い間悩まされてきました.実際の電話のWeChat Lianlianアプレットを同時に開き、コントロールページとWeChat開発者ツールに入って、リモートのWeChat開発者ツールに同期する必要があります. WeChat 開発者ツールで成功します デバイスを検索し、デバイスを操作します。

  1. 実際のデバイスをデバッグすると、デバイスが接続できないというプロンプトが表示され続け、weapp タイプの websocket が見つかりませんか?

最後の1つは、実際の電話のWeChat Lianlianアプレットを同時に開き、コントロールページとWeChat開発者ツールに入る必要があります.さらに、リンクを使用して最新のH5コントロールパネルを入手してデバッグします.

6. オープン ソースの WeChat IoT コントロール リスト

オープンソース プロジェクト 住所 オープンソースの時間
WeChat アプレットは mqtt サーバーに接続して esp8266 スマート ハードウェアを制御します https://github.com/xuhongv/WeChatMiniEsp8266 2018.11
esp8266 rtos3.1 での WeChat パブリック アカウント エアキス ネットワーク配信と近接場発見の実装 https://github.com/xuhongv/xLibEsp8266Rtos3.1AirKiss 2019.3
esp32 esp-idf での WeChat パブリック アカウント airkiss ネットワーク配信と近接場発見の実装 https://github.com/xuhongv/xLibEsp32IdfAirKiss 2019.9
WeChat アプレットは esp8266 を制御して、カラフルな効果プロジェクトのソース コードを実現します。 https://github.com/xuhongv/WCMiniColorSetForEsp8266 2019.9
Anxinke Ca-01 に基づく Wechat アプレット位置追跡表示プロジェクト https://github.com/xuhongv/Cat.1TracerWcMini 2019.9
WeChat アプレット bluetooth 配信ネットワーク blufi 実装 esp32 ソース コード https://github.com/xuhongv/BlufiEsp32WeChat 2019.11
WeChat アプレット ブルートゥース ble コントロール esp32 カラフルな光の効果 https://blog.csdn.net/xh870189248/article/details/101849759 2019.10
コマーシャル イベント配信用の WeChat アプレット mqtt 切断再接続フレームワーク https://blog.csdn.net/xh870189248/article/details/88718302 2019.2
WeChat アプレットは websocket を使用して Alibaba Cloud IOT プラットフォームの mqtt サーバーに接続します https://blog.csdn.net/xh870189248/article/details/91490697 2019.6
Wechat パブリック アカウントの Web ページが mqtt サーバーへの接続を実現 https://blog.csdn.net/xh870189248/article/details/100738444 2019.9
WeChat アプレット AP 配布ネットワーク Anxinke Wi-Fi モジュール ネットワーク アクセスの例 https://github.com/Ai-Thinker-Open/Ai-Thinker-Open_WeChatMiniAP2Net 2020.5
Anxinke IoT WeChat アプレットは完全にオープン ソースであり、ワンクリックのネットワーク配信 + コントロール + バインディングをアプレット上で実現 https://blog.csdn.net/xh870189248/article/details/107140464 2020.8
WeChat アプレット Bluetooth + WiFi コントロール Anxinke ESP32-S/C3S モジュール アプリケーション https://github.com/xuhongv/ESP32WiFiBleControlProject 2021.6
Anxinke ESP32-S モジュールは、Tencent IoT 開発プラットフォーム llsync Bluetooth 配信ネットワーク + MQTT リモート コントロールに適合しています。 https://github.com/xuhongv/qcloud-esp32-llsync-mqtt 2021.7

また、私のブログを学習の基準と考えないでください、私のブログは単なるメモであり、怠慢であるとは限りません. もしあれば、それらを指摘してください, メッセージを残すことを歓迎します!

  • esp8266あなたと遊んだり、グループに参加QQしたり、それが気に入らない友達はスプレーしたり追加したりしないでください:434878850
  • 個人の電子メール: [email protected] 24 時間オンライン、すべての電子メールが返信されます!
  • esp8266 ソース コード学習の概要 (継続的に更新、スターへようこそ): https://github.com/xuhongv/StudyInEsp8266
  • esp32 ソース コード学習の概要 (継続的に更新、スターへようこそ): https://github.com/xuhongv/StudyInEsp32
  • 以下のWeChatパブリックアカウントのQRコードに注意してください。乾物がたくさんあります。できるだけ早くプッシュします。

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/xh870189248/article/details/120282326