本系列属于支付宝小程序控制智能硬件 esp8266等芯片的思路编程，欢迎大家点点手指关注我半颗心脏，博客文章列表干货多多，有任何疑问评论区留言，第一时间看到回复！
【支付宝小程序控制硬件①】 申请个人支付宝下程序开发的个人账户，认识支付宝小程序框架结构，做好智能控制第一步！
【支付宝小程序控制硬件②】 全网首篇，个人支付宝小程序控制智能硬件esp8266，从设计电路到设计协议控制两盏LED灯调节亮度。
文章目录
一、前言；
当微信小程序崛起的时候，遇到了目前智能家居时代的时候，我做了一个微信小程序控制esp8266文章，之后网上很多都参考我思路，乃至图片都是和我一模一样的，哈哈！看来还行！
今天给大家带来的是我小练习项目— 个人支付宝小程序控制智能硬件esp8266，我敢肯定是全网首篇的，因为我目前在百度找不到哈哈！
前面章节我已经详细记录了我在支付宝小程序上集成mqtt协议的睬坑过程，现在回想起来依然是心累的，因为至今没有人测试和做这领域。作为“前人”，我深深感觉到是一种荣誉！可实现起来控制，而且还这样分享给大家一些笔记！
最近在备考，很多时间都不怎么写博客了！谅解！！因为有些梦想未在指定的时间内实现，即使老去，也会感慨后悔当初！
二、准备材料；
esp8266 nodeMcu一个，杜邦线若干，高亮 3.3vLED灯若干个！- 支付宝小程序账号一个，请自行注册！
- 手机上安装支付宝软件最新版，不分
ios版还是Android版！调试小程序！ - 对esp8266 rtos3.0的编程熟悉。
- 电路设计如下：
- 实物图：
三、注册支付宝小程序账号；
3.1 注册；
- 访问：https://docs.alipay.com/mini/developer/getting-started，找到登录按钮用支付宝软件扫描就可以了！
- 之后一路无脑式创建就可以了！
- 下载开发 支付宝小程序专门的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服务器搭建，以及如何反代理端口，请参考我之前的资料：
- 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()就开始连接服务器!
- 最后得到的预览效果就是这样啦，还行啦！！
八 、后记；
- 支付宝小程序是本人从集成mqtt协议开始到后面的通讯协议到控制esp8266的，而且协议和服务器搭建是花费蛮多时间的，最重要的是，这博文是花费几乎四个小时排版和编写，哈哈！各位能力强的朋友就参考我思路可以了，群里有些人要
Bug我的代码，所以，我也就放在咸鱼了。需要的去看看吧！ - 因为这个是我以后的面试作品，需要的就光顾下，价格绝对地便宜，不喜勿喷哈！不喜勿喷哈！博文技术参考还是可以的！哈哈！！咸鱼APP扫描即可！骚扰者请不要扫描了啦，只求真诚交易！
