13-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案微信小程序篇(网页版MQTT,小试牛刀)...

拼搏现实的明天。 2021-11-16 06:42 252阅读 0赞

[https://www.cnblogs.com/yangfengwu/p/11148976.html][https_www.cnblogs.com_yangfengwu_p_11148976.html]

抱歉哈...最近由于做板子,,教程的进度落下了...

这些天总共做了还几块板子

首先对当前这个教程的这个板子做了修订,调整了下布局,替换换了以前用的Micro USB 接口,开关降压改为MP4462

![819239-20190716055500351-162372391.png][]

STM32+Air720H(全网通GPRS)+以太网+422/485+4-20ma采集    [https://www.cnblogs.com/yangfengwu/category/1472273.html][https_www.cnblogs.com_yangfengwu_category_1472273.html]

后来感觉价格上还是有点高,所以做了另一块板子

STM32+Air202(2G)+以太网+422/485+两路继电器,,实现的功能和上面的一样,主要是学习下W5500,还有就是远程和PLC通信控制

![819239-20190716055229340-1551794564.png][]

我买的PLC已经到了

![819239-20190716061154806-1036172686.png][]

为了安全性,我选择的是24V供电的PLC

然后还有个WiFi单路继电器,10A  和 16A

所有的都是我自己捣鼓的...外壳上面的图是我用PS做的,然后找的厂家激光打印的.

![819239-20190716060412324-1977619572.png][]

![819239-20190716060040081-1880361696.png][]

![819239-20190716060104038-893363809.png][]

最后做了一个  移远的 M26的Mini板

![819239-20190716060523701-1977116903.png][]

不过确实够.....

我做的板子渐渐的靠近直接使用..其实主要还是因为我配的教程都是直接应用型的,,,除了公开的基础的教程

要是还做成学习板的形式,感觉发挥不了更实际的作用....

对了一直没说我的微信小程序篇具体实现什么功能

1,SmartConfig 实现配网 ,小程序负责绑定

2,微信公众号点击按钮跳转网页,网页里面实现控制设备

3,小程序其中一个呢,直接打开网页,,就是和上面一样

4,直接用小程序的API实现MQTT,通信控制

...其实就说这些..

但是讲这些之前,,需要先把所有的基础给大家.....预防看不懂....

打开这个

![819239-20190717011757320-298679301.png][]

![819239-20190717011821912-457320194.png][]

![819239-20190717011905568-709950156.png][]

说一下哈,html和php都提供了实现MQTT的函数,,咱先用html里面的实现

![819239-20190717012208918-1163390918.png][]

![819239-20190717012246486-510433542.png][]

还记得做升级篇的时候,咱用单片机+AT指令实现的MQTT,,当时是去官方下载的封装包

这次咱也是去下载那个包

[https://developer.emqx.io/sdk\_tools?category=MQTT\_Clients][https_developer.emqx.io_sdk_tools_category_MQTT_Clients]

先用这个

![819239-20190717022315169-25353292.png][]

![819239-20190717022437747-284655267.png][]

![819239-20190717022914514-1642624331.png][]

提供了一个完整版的,和一个精简版的

完整版的支持SSL

咱就用完整版的

拷贝到工程目录下

![819239-20190717023031448-556291321.png][]

![819239-20190717023139646-659107723.png][]

其实官方给了例子

![819239-20190717023220591-903321436.png][]

因为咱是写JS实现部分,所以需要写到,其实网页最常用(几乎是必须)的是

html  (咱建的这个工程就是个html)  主要是做一些控件展示给用户看      [https://www.cnblogs.com/yangfengwu/p/10947388.html][https_www.cnblogs.com_yangfengwu_p_10947388.html]

css (负责html控件的布局,属性(颜色什么的))     [https://www.cnblogs.com/yangfengwu/p/10979101.html][https_www.cnblogs.com_yangfengwu_p_10979101.html]

JavaScript   对网页行为进行编程     [http://www.w3school.com.cn/js/js\_shiyong.asp][http_www.w3school.com.cn_js_js_shiyong.asp]

![819239-20190717114811863-1303926487.png][]  ![819239-20190717114918098-298516677.png][]

这三个家伙可以直接放到一个html文件里面,,学习测试可以这样,,一般都是各自建文件,然后在html里面加载

加载 CSS ![819239-20190717115051027-142404545.png][]

加载 JS  ![819239-20190717115124441-1323768042.png][]

![819239-20190717023352299-640589648.png][]

![819239-20190717023923366-1300931399.png][]

这里有API介绍

[https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html][https_www.eclipse.org_paho_files_jsdoc_Paho.MQTT.Client.html]

现在改一下IP和端口号

![819239-20190717024211486-2031706067.png][]

注意哈,走的是MQTT的WebSocket 端口

还要说一下,,不管走的MQTT的什么端口,只要两个设备的订阅和发布的主题对应,那么两个设备就可以通信

![819239-20190717024433042-388979429.png][]

说明是可以的

咱现在用调试助手测试

![819239-20190717024607913-1632152903.png][]

重新启动下网页那个

![819239-20190717024703927-739565378.png][]

现在连接也没填什么用户名和密码...

给的API可以配置用户名和密码

![819239-20190717024839633-701893796.png][]

![819239-20190717025502299-179802390.png][]

client.connect({onSuccess:onConnect,userName:"yang",password:"11223344"});

测试下

![819239-20190717025628751-1878461848.png][]

其实可以这样

![819239-20190717030137389-509471607.png][]

var Options={
                onSuccess : onConnect,
                userName  : "yang",
                password  : "11223344"
            };
    
            client.connect(Options);// connect the client 连接...

忘了说一件事情

var  是js里面定义变量用的,定义变量就用var

var Options={
                onSuccess : onConnect,
                userName  : "yang",
                password  : "11223344"
            };
    
    这个呢...只不过是个语法糖而已,你这样写进去,它里面肯定是判断前面的字符串名字,然后获取 : 号后面的值,然后填写到MQTT打包
    函数里面
    其实很多这样做的,你按照这样的规定写,内部解释器就认你....
    还是那句话,如果你早生几十年,如果你也有幸参与js的工作,或许你有自己的规定
    那天我在群里说类似的这句话,有个人,发了个图片,上面写着:我就静静的看着
    唉,他不明白我说这句话的含义,很多知识是人规定的,很多时候你不要纠结于为什么这样规定,因为很多东西都使用了这么多年了,既然一直
    存在着,就一定有存在的意义.  但是请不要把这句话当作借口,该深入了解的知识,还是需要深入了解.

基础教程的源码都是公开的,可以看博客阅读说明下载
    
    这节先这样,下节接着完善
    https://www.cnblogs.com/yangfengwu/p/11198572.html

转载于:https://www.cnblogs.com/yangfengwu/p/11192639.html

[https_www.cnblogs.com_yangfengwu_p_11148976.html]: https://www.cnblogs.com/yangfengwu/p/11148976.html
[819239-20190716055500351-162372391.png]: /images/20211116/98d3244fd7734de5b4271a6ffd8a6d03.png
[https_www.cnblogs.com_yangfengwu_category_1472273.html]: https://www.cnblogs.com/yangfengwu/category/1472273.html
[819239-20190716055229340-1551794564.png]: /images/20211116/7531138e06f14e9c9e09b5fc7d3aba04.png
[819239-20190716061154806-1036172686.png]: /images/20211116/c890c823320047ff8d64b956c03e6924.png
[819239-20190716060412324-1977619572.png]: /images/20211116/eb53a521b5204beca62d87138974e587.png
[819239-20190716060040081-1880361696.png]: /images/20211116/ec37f09a69634790a0ebcf6f0859fe95.png
[819239-20190716060104038-893363809.png]: /images/20211116/440491c4b4fa42eca25614cabd06eff1.png
[819239-20190716060523701-1977116903.png]: /images/20211116/852304e13d7e477cb05154c06897572a.png
[819239-20190717011757320-298679301.png]: /images/20211116/45a2ba56f3614a4b8d3ad5c3f4090325.png
[819239-20190717011821912-457320194.png]: /images/20211116/b0878ba67db248ee8e4790821e5ab025.png
[819239-20190717011905568-709950156.png]: /images/20211116/0e3baa8fd03a4510a63aca4b3e631aae.png
[819239-20190717012208918-1163390918.png]: /images/20211116/de22ca446af94b4796dd4759c921729a.png
[819239-20190717012246486-510433542.png]: /images/20211116/dd197f4a793d4a66a0131b481c758cfb.png
[https_developer.emqx.io_sdk_tools_category_MQTT_Clients]: https://developer.emqx.io/sdk_tools?category=MQTT_Clients
[819239-20190717022315169-25353292.png]: /images/20211116/544364f7173e43a3b476544f5d673fc5.png
[819239-20190717022437747-284655267.png]: /images/20211116/0c0a7516683745eeb8fc8a31f46f4ff9.png
[819239-20190717022914514-1642624331.png]: /images/20211116/e65398d1f46f4e09b8fbf671a9b3b36a.png
[819239-20190717023031448-556291321.png]: /images/20211116/b2d4055ba2ae45e4869cef8205d5a964.png
[819239-20190717023139646-659107723.png]: /images/20211116/614919abb6a649aea29e5f9843af8605.png
[819239-20190717023220591-903321436.png]: /images/20211116/70805ab83e88415aa399e9d25fe45fcb.png
[https_www.cnblogs.com_yangfengwu_p_10947388.html]: https://www.cnblogs.com/yangfengwu/p/10947388.html
[https_www.cnblogs.com_yangfengwu_p_10979101.html]: https://www.cnblogs.com/yangfengwu/p/10979101.html
[http_www.w3school.com.cn_js_js_shiyong.asp]: http://www.w3school.com.cn/js/js_shiyong.asp
[819239-20190717114811863-1303926487.png]: https://img2018.cnblogs.com/blog/819239/201907/819239-20190717114811863-1303926487.png
[819239-20190717114918098-298516677.png]: /images/20211116/3c6b6f74fa114df6964ecace6600685d.png
[819239-20190717115051027-142404545.png]: /images/20211116/25721f77db53477cbaba0b78298c9650.png
[819239-20190717115124441-1323768042.png]: /images/20211116/2d91c2e3faf14360856ea31362f3927a.png
[819239-20190717023352299-640589648.png]: /images/20211116/42148d0dc44046adb5b3db0ab50410b4.png
[819239-20190717023923366-1300931399.png]: /images/20211116/1ba5a6ff15bd432d9320367ea36ed258.png
[https_www.eclipse.org_paho_files_jsdoc_Paho.MQTT.Client.html]: https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
[819239-20190717024211486-2031706067.png]: /images/20211116/c1cf769527594a18ba3f2a85e4c09f95.png
[819239-20190717024433042-388979429.png]: /images/20211116/0a507af5356444bba2574d00491c2685.png
[819239-20190717024607913-1632152903.png]: /images/20211116/dc5fe11041fa4bc1aa6069617599dd89.png
[819239-20190717024703927-739565378.png]: /images/20211116/9f47fdb67ec242f7bf389e0ed7e7e31d.png
[819239-20190717024839633-701893796.png]: /images/20211116/9105286870b24f72b1681f737cfcb5e1.png
[819239-20190717025502299-179802390.png]: /images/20211116/334ed28ad3f7472a8987b6ae108699e4.png
[819239-20190717025628751-1878461848.png]: /images/20211116/41fe4d5f658044eaaec1bf0ca516de65.png
[819239-20190717030137389-509471607.png]: /images/20211116/94093bb98e9346cead16992b8057e70b.png