本系列属于支付宝小程序控制智能硬件 esp8266等芯片的思路编程,欢迎大家点点手指关注我半颗心脏,博客文章列表干货多多,有任何疑问评论区留言,第一时间看到回复!
【支付宝小程序控制硬件①】 申请个人支付宝下程序开发的个人账户,认识支付宝小程序框架结构,做好智能控制第一步!
【支付宝小程序控制硬件②】 全网首篇,个人支付宝小程序控制智能硬件esp8266,从设计电路到设计协议控制两盏LED灯调节亮度。
文章目录
一、前言;二、准备材料;三、注册支付宝小程序账号;3.1 注册;四、通讯原理以及协议;五、mqtt服务器搭建;六、设备端代码部分讲解;七、支付宝小程序代码部分讲解;八 、后记;一、前言;
当微信小程序崛起的时候,遇到了目前智能家居时代的时候,我做了一个微信小程序控制esp8266文章,之后网上很多都参考我思路,乃至图片都是和我一模一样的,哈哈!看来还行!
今天给大家带来的是我小练习项目—个人支付宝小程序控制智能硬件esp8266,我敢肯定是全网首篇的,因为我目前在百度找不到哈哈!
前面章节我已经详细记录了我在支付宝小程序上集成mqtt协议的睬坑过程,现在回想起来依然是心累的,因为至今没有人测试和做这领域。作为“前人”,我深深感觉到是一种荣誉!可实现起来控制,而且还这样分享给大家一些笔记!
最近在备考,很多时间都不怎么写博客了!谅解!!因为有些梦想未在指定的时间内实现,即使老去,也会感慨后悔当初!
二、准备材料;
esp8266 nodeMcu
一个,杜邦线若干,高亮 3.3vLED
灯若干个!支付宝小程序账号一个,请自行注册!手机上安装支付宝软件最新版,不分ios
版还是Android
版!调试小程序!对esp8266 rtos3.0的编程熟悉。电路设计如下:实物图:三、注册支付宝小程序账号;
3.1 注册;
访问:/mini/developer/getting-started,找到登录按钮用支付宝软件扫描就可以了!之后一路无脑式创建就可以了!下载开发 支付宝小程序专门的IDE开发工具,类似微信开发一样:/mini/ide/overview新建项目和导入项目,下面是本工程的截图,右上角有模拟器、调试、预览、上传主要功能:模拟器:本地新建一个手机模拟器,非真机环境,用来调试代码!我们mqtt调试切勿用模拟器调试!调试:是调试到真机功能,可以在IDE看到真机打印的日志!预览:也是调试到真机的功能,但是不可以在 IDE记录看到真机打印的日志!只能在本地真机调试!上传:上传到阿里云服务器,可以给其他用户扫描二维码体验,当然了 ,上传之后,就可以提交审核上架了!四、通讯原理以及协议;
实现的控制的原理我之前用微信小程序控制esp8266的思路一致,总结如下:
注意角色:(设备 --> esp8266,设备商云 --> 服务器,微信客户端 --> 支付宝小程序):先上图,也请认真观看上图,这是我本篇实现的控制过程,也是我想到的控制过程,哈哈!概述: ①:服务器我们采用自己的服务器,上位机就是支付宝客户端,我们是在支付宝的环境下开发的,也就避免不了和微信打交道,避免不了要遵循支付宝开发的规范!所以要有一定的前端开发知识哦!也就是H5+css+javaSrcipt
,支付宝小程序开发和这个非常相似!如果想入门支付宝小程序开发,自己可以去琢磨!②:设备商云也就是我们的服务器,仅仅做一个中转信号处理,不做任何的消息存储和分析哈!③:通讯过程是esp8266上报消息到服务器,服务器转发消息到支付宝小程序!反过来,微信小程序控制下发,先发送消息到服务器,然后到esp8266!④:既然服务器仅仅是一个中转信号处理,那么我们的支付宝小程序和esp8266的通讯协议,自己拟定就好,下面是我拟定的,也是本文项目的协议!支付宝小程序下发控制的通讯协议:esp8266上报同步的通讯协议:
五、mqtt服务器搭建;
关于mqtt服务器搭建的要求,在支付宝小程序是没要求的,只要支持websocket
就可以了,不像微信小程序那样严格必须是443 端口!而是任意端口,而我为了方便,依然是采用之前微信小程序接入的443端口!
所以,关于mqtt服务器搭建,以及如何反代理端口,请参考我之前的资料:
/xh870189248/article/details/84070944/video/av39598869/xh870189248/article/details/84070944
如果能力有限搭建失败麻烦,也欢迎加群,有提供免费的mqtt的服务器连接测试!
六、设备端代码部分讲解;
为了学习,我这里采用的是乐鑫最新的 rtos3.0分支上二次开发,意味要搭建 rtos3.0的环境,请自行搭建可参考我之前的博文:/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扫描即可!骚扰者请不要扫描了啦,只求真诚交易!支付宝小程序控制硬件②】 全网首篇 个人支付宝小程序控制智能硬件esp8266 从设计电路到设计协议控制两盏LED灯调节亮度。