0基础开发手机小程序控制舵机

声明：
1.本文章是根据开发远程控制舵机？只需十步这个链接学习得来的
2.本文章旨在记录学习开发该项目的过程，不做商业用途
3.本人知识有限，文章内容是根据视频总结出来的，出错在所难免，请各位指正

工程框图

根据图中我们需要配置的有阿里云端，微信开发工具，Arduino软件。
下图是我买的ESP8266模块。

配置阿里云

1. 注册阿里云账户 ，百度搜索阿里云，进入后注册。
2. 创建产品先点击产品，再点击创建产品
3. 新建产品接着点击管理设备
4. 批量添加设备
   添加完设备如图
   这里我定义第一个为手机端，第二个为esp8266的。
5. 云产品流转
   
   这里因为版本问题，跟视频不太一样，大家可以跟着我这个来做。
   
6. 关联数据源
   
   7.添加topic
   
   图中的第3步，是定义手机端，在上文的第4个操作有说明，因此在第4步那里选择user/update
   
   同理添加舵机端的topic。最后如下图所示
   
   --------------------------------------------------------------2023年1月14日16点30分--------------------------------------------------------------------
   此时返回设备管理->产品，可以看到我们刚刚定义的产品
   点击上图舵机一行的查看
   
   可以看到定义的topic

微信小程序

1. 搜索微信公众平台，进入后注册。

2. 下载开发者工具
   
   
   根据自己的配置选择下载哪个版本的软件

3. 购买阿里云iot模板
   这里我为了快速开发，直接买了视频up主写的模板，大家可以根据自身能力选择，链接阿里云iot模板

4. 微信开发者工具
   
   打开微信开发者工具，点击小程序，点击导入
   
   这里因为我有打开过这个模板，所以显示红色字，正常是不会的

5. 设置不校验合法域名
   

6. 修改js文件
   
   
   将上图的设备证书复制到代码中对应的位置，接着点击编译，界面显示订阅成功就是正常的
   

7. 测试通信
   
   返回阿里云界面，此时可以看到我们的设备显示在线了，点击右边的查看
   
   点击topic列表，点击发布消息
   
   我们随机输入一串字符，点击确认
   
   可以看到微信开发者工具接收到了aa，说明测试成功。

8. 修改AppDID
   登录微信公众平台，进行小程序界面
   拉到最小面的设置
   
   在设置里面往下拉，找到AppID
   
   将该ID复制粘贴到微信开发者工具里面
   

9. 配置服务器域名
   

将上图画横线的地方，用13行的productKey替换，接着复制21行框住的代码

将复制来的字符串填入socket一行中，**注意：开头的代码复制的时候是wxs，需要修改为wss，最后添加“;”**接着保持并提交。

10. 取消不校验合法域名
    
    做这一步的时候，我一开始是出错的，然后我重新修改了一下AppID后，就可以了，还不清楚问题出在哪里
    
    如果有出现我这个报错的可以尝试我的解决方式

Arduino软件开发

1. 大家可以点击这个链接去下载Arduino IDE下载
2. 配置Arduino软件
   这一步在网上就有很多大佬分享了，我就不拓展了，直接上链接Arduino搭建esp8266
3. 点灯
   我的开发习惯是先搞个led灯，确保程序能正常烧写。烧写前要确保已经安装了ch340的驱动，没有安装的点击CH340串口驱动下载，安装完成后，烧写程序进去即可。
   
   这里有个小插曲，一开始我的usb线是不能传数据的，程序总是烧不进去，设备管理器也没有看到COM口，后来经过原视频UP主提醒我找了跟可以通信的usb线就可以了
   --------------------------------------------------------------2023年1月15日17点30分--------------------------------------------------------------------
4. esp8266连接阿里云
   点击Arduino软件左上角的项目->加载库->管理库
   
   先点击安装，再点击More info
   在弹出的网页中，复制以下内容
   
   接着在Arduino新建工程，将刚才复制的代码粘贴进去
   
   需要修改的内容有这些
   
   上面的PRODUCT_KEY，DEVICE_NAME，DEVICE_SECRET从阿里云得到
   
   WIFI_SSID是你的WiFi名称，WIFI_PASSWD是WiFi密码。这里我踩了个坑，你的WiFi得是2.4GHz的，如果是5G的话阿里云会显示连接不上。
   修改完成后，编译是会报错的，还需要添加几个库，分别是arduinojson，pubsubclient，crypto
   
   
   接着打开这个文件
   
   将下面画框的地方修改为这两个数据
   
   接着修改一下阿里云舵机端的备注名称，以便后续好找，这里我已经编辑过了
   
   同样的，在手机端也备注一下
   接着将esp8266插入电脑，找到对应的端口（如果没有找到端口，查看是否安装驱动，查看数据线是否正常），正常显示设备如下
   

确保Arduino找到正确的端口，然后点击上传，将代码烧写到esp8266

上传完成后，返回阿里云网页，刷新网页，可以看到舵机端设备已经在线。

接着打开以下界面

点开上图查看后

可以看到内容一行中，是esp8266向阿里云发送的数据，对应下图代码

5. esp8266订阅MQTT
定位到下图目录，分别打开两个.cpp文件


将下面这些修改成如图所示

之所以要这样修改，是因为云规则流转只能流转自定义topic

--------------------------------------------------------------2023年1月17日20点30分--------------------------------------------------------------------
修改完后，还需要在下面添加这行代码

上图括号内的内容从下图得到，但要注意${deviceName}换成你的deviceName

修改完后，打开

点击上图功能定义
点击查看

其中，需要注意的有标识符，它对应于下图

如果要改的话，得将Arduino工程里面的标识符全部修改
接着添加以下内容

接着点击发布上线

此时在下图可以看到属性设置

连接esp8266，添加Arduino工程代码如下图

打开以下界面

将Arduino工程代码编译烧写进esp8266，打开软件自带的串口

要确保串口号正确和波特率正确（波特率一般是115200）

接着回到阿里云

先在输入框写个1，再按设置，可以看到发送指令成功提示
此时再串口界面可以看到一长串数据

接着复制下图中框中的数据

将复制的数据粘贴到下图

然后在串口界面打开自动滚屏
接着再点击上图的确认
可以看到下图

从上图可以看出，我们成功用阿里云控制了esp8266。Arduino工程中，我们定义了当接收到1时，打印“aa”，从实验来看，我们的验证是符合预期的。我试了将1改为2，同时在在线调试界面输入2，并设置，将串口得到的字符串粘贴在Topic 列表的发布消息里，也是可以看到esp8266打印了“aa"这个字符串。从这里我们也可以想到，如果在阿里云发布一个角度数据，esp8266执行对应的舵机的角度，那样就可以完成我们的功能了。

6. 小程序和esp8266联合调试
这一节我们要完成微信小程序发布消息并转发到开发板上
将上一节从串口得到的一串字符串

复制粘贴到下图

上图中succeed替换为字符串，变为下图

但上图可以看到出错了，我们想把这个物模型当成字符串发布，但是这些字符串里面有很多双引号，这些双引号和大括号是特殊字符，用它当字符串需要在其前面加“\”，修改为下图

--------------------------------------------------------------2023年1月23日22点50分--------------------------------------------------------------------
接着保存，编译，打开串口界面，可以看到esp8266发送了“aa”字符串

7.微信小程序界面
我们已经完成了用小程序对esp8266进行控制了，但每次都得进行编译，太麻烦了，我们需要对工程进行修改，方便我们操作。