Alipayのプロトコル制御回路設計から②】ハードウェア制御アプレット第1用紙全体のネットワーク、スマートアプレットAlipayのハードウェアesp8266の個々の制御、2つのLEDライト輝度調整を設計します。

免責事項:この記事は、オリジナル作品を血液にブロガーと半分の星ハート曲がっノックアウトされ、ご支援をありがとう許さブロガーなく複製してはなりません。https://blog.csdn.net/xh870189248/article/details/90482597

このシリーズは、支払ったプログラミングの宝アプレットインテリジェント制御チップとその他のハードウェアesp8266のアイデアに属し、私たちは私の小指に注意を歓迎半分の星の心を、ブログの記事の多くは乾燥品のリストは、ご質問のコメントエリアメッセージを持って、返信を見るのは初めて!

個人アカウントのプログラム開発中の個人のアリペイのための制御ハードウェアの①申請中[Alipayのアプレット、アリペイ小さなプログラムの枠組みを理解する、インテリジェントな制御が最初のステップを行います!
【Alipayのは②]プロトコル制御回路設計からハードウェア制御アプレット第1用紙全体のネットワーク、スマートアプレットAlipayのハードウェアesp8266の個々の制御は、2つのLEDライト輝度調整を設計します。

ここに画像を挿入説明


I.はじめに;


        スマートホームの現在の時代は、私が作ったとき、マイクロチャネル小さなプログラムの上昇が発生したときにコントロールesp8266記事にマイクロチャネルアプレットをハハ、それらの多くはオンライン後で私のアイデアを参照してください、と私も絵が全く同じで、!それは大丈夫です!

        今日のあなたに持って来られるが、私は小さな実践プロジェクトがあるということです- 個人アリペイアプレット制御インテリジェントハードウェアesp8266を私は現在、ハハBaiduのを見つけることができないので、私は、ネットワーク全体が最初の論文であると確信しています!

        誰もがこのテストとフィールドをやっていないので、私は、心の疲れまだ振り返ってみると、アリペイアプレット通知ピットプロセス上の私の統合MQTT契約の前の章の詳細な記録を持っています。「元」として、私は深くそれは名誉であると感じ!コントロールを実装するだけでなく、あなたにいくつかのメモを与えるために、これを共有することができます!

       最近の発言では、多くの時間は、ブログの書き方をではありません!理解!指定された時間内にいくつかの未実現の夢は、さえ老いので、後悔でいっぱいされます!


第二に、材料の調製;


  • esp8266 nodeMcu、デュポンラインの数、3.3V明るいLEDライト数!
  • アリペイは、小さなプログラムを占めて、自分自身を登録してください!
  • アリペイにかかわらず、携帯電話のソフトウェアの最新バージョンをインストールするにはios、バージョンやAndroidエディション!アプレットをデバッグ!
  • おなじみのプログラミングesp8266のrtos3.0。
  • 次のように設計された回路:

ここに画像を挿入説明


  • 物理的地図:
    ここに画像を挿入説明

第三に、登録済みのAlipayのアカウントアプレット。


3.1登録;


  • :訪問https://docs.alipay.com/mini/developer/getting-startedを、その上のログインボタンAlipayのソフトウェアスキャンを見つけて下さい!
  • 式典後には、脳がそれを作成していないすべての方法!
  • アリペイ小さなプログラム専用のIDE開発ツールの開発をダウンロードし、マイクロチャネルの開発と同様に、のように:https://docs.alipay.com/mini/ide/overview
  • 新しいプロジェクトやアイテムをインポート、次はこのプロジェクトのスクリーンショットで、右上隅のシミュレーションデバッグプレビューはアップロード主な機能:
    • シミュレータ:新しいローカル電話シミュレータ、コードをデバッグするための非実機環境を作成します!我々はデバッギングエミュレータのデバッグMQTTください!
    • 调试:是调试到真机功能,可以在IDE看到真机打印的日志!
    • 预览:也是调试到真机的功能,但是不可以在 IDE记录看到真机打印的日志!只能在本地真机调试!
    • 上传:上传到阿里云服务器,可以给其他用户扫描二维码体验,当然了 ,上传之后,就可以提交审核上架了!

ここに画像を挿入説明


四、通讯原理以及协议;


        实现的控制的原理我之前用微信小程序控制esp8266的思路一致,总结如下:

  • 注意角色:(设备 --> esp8266,设备商云 --> 服务器,微信客户端 --> 支付宝小程序):
  • 先上图,也请认真观看上图,这是我本篇实现的控制过程,也是我想到的控制过程,哈哈!
  • 概述
    • ①:服务器我们采用自己的服务器,上位机就是支付宝客户端,我们是在支付宝的环境下开发的,也就避免不了和微信打交道,避免不了要遵循支付宝开发的规范!所以要有一定的前端开发知识哦!也就是H5+css+javaSrcipt,支付宝小程序开发和这个非常相似!如果想入门支付宝小程序开发,自己可以去琢磨!
    • ②:设备商云也就是我们的服务器,仅仅做一个中转信号处理,不做任何的消息存储和分析哈!
    • ③:通讯过程是 esp8266上报消息到服务器,服务器转发消息到支付宝小程序!反过来,微信小程序控制下发,先发送消息到服务器,然后到esp8266!
    • ④:既然服务器仅仅是一个中转信号处理,那么我们的支付宝小程序和esp8266的通讯协议,自己拟定就好,下面是我拟定的,也是本文项目的协议!

  • 支付宝小程序下发控制的通讯协议
主题 发送端 接收端 消息(JSON格式) 消息含义
/light/devsub 支付宝小程序 esp8266 “{“change”:“power”,“value”:true}” 开灯
“{“change”:“power”,“value”:“false”}” 关灯
“{“change”:“blue”,“value”:50}” 调节蓝灯亮度:value为亮度值 ,范围 [0,100]
“{“change”:“red”,“value”:50}” 调节红灯亮度:value为亮度值 ,范围 [0,100]
“{“change”:“query”,“value”:0}” 支付宝小程序主动请求最新状态
  • esp8266上报同步的通讯协议
主题 发送端 接收端 消息(JSON格式) 消息含义
/light/devpub esp8266 支付宝小程序 “{“power”:“false”,“blue”:50,“red”:50}” power为2个灯的状态,blue是蓝灯亮度值,red是蓝灯亮度值,范围都是 [0,100]


五、mqtt服务器搭建;


        关于mqtt服务器搭建的要求,在支付宝小程序是没要求的,只要支持websocket就可以了,不像微信小程序那样严格必须是443 端口!而是任意端口,而我为了方便,依然是采用之前微信小程序接入的443端口!

        所以,关于mqtt服务器搭建,以及如何反代理端口,请参考我之前的资料:

        如果能力有限搭建失败麻烦,也欢迎加群,有提供免费的mqtt的服务器连接测试!


六、设备端代码部分讲解;


        为了学习,我这里采用的是乐鑫最新的 rtos3.0分支上二次开发,意味要搭建 rtos3.0的环境,请自行搭建可参考我之前的博文:https://blog.csdn.net/xh870189248/article/details/81382279

        而我的mqtt通讯采用的是乐鑫自研的框架esp-mqtt,在工程构建前请手动选择 mqtt组件为esp-mqtt,可以在 make menuconfig设置,否则会报错:fatal error: mqtt_client.h: No such file or directory (GIT8266O-144),请知悉!可以参考下面的 动态图:
ここに画像を挿入説明


        我这里就不采用一键配网模式了,直接把路由器的账户密码写死在本地代码里面:

ここに画像を挿入説明


        下面是连接服务器的配置,请替换为你自己的服务器配置参数!

ここに画像を挿入説明


        下面是mqtt状态回调函数,实现的逻辑主要是如下:

  • 连接成功回调函数下开始订阅主题;
  • 服务器下发函数做自己的业务逻辑,这里的是异步进行的哈!下面的截图可以看到,是解析到了支付宝小程序下发的数据指令!

ここに画像を挿入説明


七、支付宝小程序代码部分讲解;


        布局是必不可少的,这里很简单, 就是三个控件,样式代码就不贴了:
ここに画像を挿入説明


        业务逻辑函数:

  • 其中的 sliderBlueCallBack() 函数是蓝色滑条的滑动回调函数!
  • 其中的 sliderRedCallBack() 函数是蓝色滑条的滑动回调函数!.
  • 工程一开始加载页面后回调函数onLoad()就开始连接服务器!

ここに画像を挿入説明


  • 最后得到的预览效果就是这样啦,还行啦!!

ここに画像を挿入説明


八 、后记;


ここに画像を挿入説明

  • 私はesp8266を制御するための通信プロトコルの裏に統合されたMQTTプロトコルから起動して、セットアッププロトコルとサーバーがManduo時間を費やしているアリペイ小さなプログラムは、最も重要なのは、このブログはハハ、構成および書き込みほぼ4時間を過ごすことであるということです!あなたは、強力な機能の友人が私の考え、何人かの人々がしたいグループを参照することができますBug私のコードを、私は塩辛を入れます。あなたは行くと確認する必要があります!
  • このインタビューの後に私の仕事ですので、次は必要なひいきにします、絶対に安い価格は、ハをスプレーしない好きではありませんハをスプレーしないようにしないでくださいボーエンテクニカルリファレンスまたはことができます!ハハ!塩辛は、APPをスキャンすることができます!Harasserはただ誠実に対処するために、問題をスキャンしないでください!

おすすめ

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