This series belongs to the idea of paid programming treasure applet intelligent control chip and other hardware esp8266, we welcome the attention to my little finger a half stars heart , a lot of blog posts a list of dry goods, have any questions comments area message, the first time to see the reply!
[Alipay applet in Control hardware ① Applicants for personal Alipay under the personal account program development, understanding Alipay small program framework, intelligent control do the first step!
[Alipay ②] Hardware control applet first paper entire network, individual control of the smart applet Alipay hardware esp8266, from the protocol control circuit design to design two LED light brightness adjustment.
Article Directory
I. Introduction;
When the rise of micro-channel small program encountered when the current era of smart home, I made a micro-channel applet in Control esp8266 articles , many of them online later refer to my ideas, and I even pictures are exactly the same, ha ha! It seems okay!
Brought to you today is that I have a small practice project - a personal Alipay applet control intelligent hardware esp8266 , I'm sure the whole network is the first paper, because I currently can not find Baidu ha ha!
I have a detailed record of the previous chapters of my integration mqtt agreement on Alipay applet notice pit process, in retrospect still the heart tired, because no one has done this test and field. As a "former", I deeply feel that is an honor! Can implement control, but also share this to give you some notes!
In recent remarks, a lot of time is not how to write a blog! understanding! ! Because some unrealized dream within a specified time, even grow old, will be filled with regret!
Second, the preparation of materials;
esp8266 nodeMcuA, a number of Dupont line, 3.3v brightLEDlights number!- Alipay account a small program, please register yourself!
- Alipay to install the latest version of the software, regardless of the mobile phone
iosversion orAndroidedition! Debugging applets! - Programming esp8266 rtos3.0 familiar.
- Circuit designed as follows:
- Physical map:
Third, the registered Alipay account applets;
3.1 Registration;
- Visit: https://docs.alipay.com/mini/developer/getting-started , find the login button Alipay software scan on it!
- After the ceremony all the way no brain create it!
- Download the development of Alipay small program dedicated IDE development tools, similar to the micro-channel development, like: https://docs.alipay.com/mini/ide/overview
- New projects and import the items, the following is a screenshot of this project, the upper right corner simulator , debugging , preview , upload main functions:
- Simulator : create a new local phone simulator, a non-real machine environment for debugging the code! Do we mqtt debugging debugging emulator!
- 调试：是调试到真机功能，可以在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服务器搭建，以及如何反代理端口，请参考我之前的资料：
- https://blog.csdn.net/xh870189248/article/details/84070944
- https://www.bilibili.com/video/av39598869
- https://blog.csdn.net/xh870189248/article/details/84070944
如果能力有限搭建失败麻烦，也欢迎加群，有提供免费的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()就开始连接服务器!
- 最后得到的预览效果就是这样啦，还行啦！！
八 、后记；
- Alipay small program that I start from the integrated mqtt protocol to the back of the communication protocol to control esp8266, and the protocol and server set up is spent Manduo time, the most important is that this blog is to spend almost four hours composing and writing, ha ha ! You strong capability friends can refer to my thinking, the group where some people want
Bugmy code, so I will put the salted fish. You need to go and see! - Because this is my work after the interview, the next will patronize needed, absolutely cheap price, do not like do not spray Ha ! Do not like do not spray Ha ! Bowen technical reference or can! Haha! ! Salted fish can scan APP! Harasser Please do not scan the matter, just to sincerely deal!
