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进行控制了，但每次都得进行编译，太麻烦了，我们需要对工程进行修改，方便我们操作。

• 添加单独事件

件

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎