stm32连接服务器端
本章所用到的器件如下：
. R3 g4 h- b/ Z  ^) u, y; rSTM32F103ZET6最小系统板
ESP8266-01S模块
- Q  Q4 P! q% o/ PUSB转microUSB数据线
四根杜邦线
* s* Q& ]. u) S' J9 {9 Y- e7 }8 A连接如下：
32板3.3v----------->ESP8266的3.3v
32板GND---------->ESP8266的GND
" P# k  v2 S6 f- p4 g32板的PC10-------->ESP8266的RX
32板的PC11-------->ESP8266的TX

& M/ K& L8 Q2 D, x; i8 D2 L, l0 M  在这里说明一下，由于本项目是用在其他项目上的，所以在编写此项目时，是基于另一个项目还未被使用到的串口资源进行设计的，所以我这里用了串口4。各位需根据自己硬件已有的串口资源，自行手动修改串口4初始化的函数。
! {) v7 M" i0 y2 ~
  ​本项目程序是参考onenet平台上的源码进行二次开发的，onenet平台上源码的位置如下：进入onenet官网后，登录账号，在上方有一个社区->论坛，里面就有源码，点进去后就有一个链接是百度网盘的，这里我用的是OneNET标准板中的裸机基础教程->EDP例程。

9 K8 p7 H: \, ~' B4 ]2 O" ~1 R( c$ [

( s5 \- L, h. @: {5 w, l

$ g4 P/ U6 `7 S/ b; X2 k8 M
​  既然用到了MQTT协议，少不了要用到cJSON格式的一个文件，将cJSON.c和cJSON.h文件导入到stm32程序所在的文件夹下，接着在程序中onenet.c文件里面包含头文件cJSON.h，方便我们下面对接收到的cJSON格式的数据进行解析。

: t3 ^! |( |* K8 R8 d% W# D​  接下来，我们需要修改的是esp8266.c文件中的ESP8266_WIFI_INFO及ESP8266_ONENET_INFO，他们分别表示的是ESP8266需要连接的WIFI及服务器地址(修改成自己的WIFI名称、密码和服务器地址、端口号)，本项目中给出了五个MQTT服务器地址，其中EMQX服务器是公有服务器，可以直接连接，至于其他三个服务器是自己在其他平台创建的私有服务器，需要用到onenet.c文件中的设备ID和密码。EMQX服务器连接的时候不需要用到设备ID和密码，所以设备ID和密码可以随便写。

+ Q* O  z& x& r% O% p# T1 D/ x  X
​  最后，需要设置一下主题的发布和订阅，对于公有服务器来说，是没有主题前缀的，而对于私有服务器来说，他有平台自带的主题前缀。 此项目中连接的是EMQX的服务器，是不需要主题前缀的，所以这里我随便写了一个发布主题和订阅主题(同时这两个主题也可用于我创建的私有服务器的设备相对应的主题)。
+ F. c( Q. p% m& G. H

' W) I+ e" h+ K3 o! v1 c0 }​  至此，stm32部分的程序已经搞好了，接下来进行小程序部分的制作。
, v2 t0 F7 X4 V: O( ^5 o* m
小程序连接服务器
5 w; e8 p/ [, u" M​  先上小程序的效果展示图

! G4 D4 p' f6 b5 {  |3 t
6 q9 p7 ]( n; |; |
7 y& v1 T! t2 d6 [" b0 `​  此项目的小程序我没有用过任何框架，都是使用微信原生框架进行开发，其中首页涉及到天气数据的获取，这里请求的天气数据API接口采用的是和风天气开发平台上的Web API接口，其链接如下：和风天气开发平台
! |' C% \! [$ @0 k+ a! [6 ]​​  要请求该平台上面的API接口，需要在该平台上登录账号，然后进入控制台，在上面创建一个应用(目的是获取到一个KEY)，如下所示：
6 E# o) o& A* |6 {, x2 H

* T' P9 P  u7 }! x& l. y
​  接着到该平台的开发文档->天气数据Web API开发文档中去找对应的请求地址，上面清楚的写了该地址的格式及请求的参数等信息，下面是小程序端的获取天气数据的自定义函数：
/ n4 O% z. r. j* j- @2 O

1. weahterdata:function(){
   7 @; Z5 x; q9 Z' u+ R
2.     var that=this
   8 A. [2 Z" E, |
3.     wx.getLocation({//获取位置(经纬度)API
   
4.       type: 'wgs84',
   6 ^8 M! a" p  L
5.       success (res) {
   
6.         const latitude = res.latitude
   
7.         const longitude = res.longitude
   
8.         const key="432a8840589546338cae4c5a825f47db"//和风天气开发平台上控制台创建的应用得到的KEY，只有得到这个，才能获取各种数据
   
9.         wx.request({//网络请求API
   ( v5 L+ N5 _' J  y" z  S9 U
10.           //下面使用模板字符串
    
11.           //获取天气数据的API接口地址
    
12.           url: `<a href="https://devapi.qweather.com/v7/weather/now?location=" target="_blank">https://devapi.qweather.com/v7/weather/now?location=</a>${longitude},${latitude}&key=${key}`,
    
13.           success (res) {
    
14.             const weather_data=res.data.now
      O& i( C$ f4 P) H) a# {
15.             const weather=weather_data.text //解构赋值
    
16.             that.setData({
    ) F, K1 t, q" W6 n& s( N/ q
17.               weather
    ; P1 t6 E. a1 d+ c4 F# r
18.             })
    
19.           }
    
20.         })
    ) D- k9 y( d& G1 y  o
21.         wx.request({
    ' K4 V9 s* r2 L6 j
22.           //获取地点的API接口地址
    
23.           url: ,
    $ V. ~; k- t4 {* {0 a: P* b6 [
24.           success (res) {
    
25.             const location=res.data.location[0]  
    4 Q8 Q* l3 [9 h# O1 i
26.             const {adm2, name}=location     //解构赋值
    5 N$ M" O, L+ [) O# W
27.             that.setData({
    3 X1 ~6 E/ `  }: q8 j
28.               city:adm2,
    
29.               area:name
    8 c: e/ c( c. z7 b% k/ t$ f; M
30.             })
    0 u/ P0 O9 _) j0 m& J/ D
31.           }
    + U" M: q0 N& L  d- Y) s' N' ^
32.         })
    9 R8 Q. i  }8 v& G" g! f8 T
33.         wx.request({
    
34.           //获取空气质量的API接口地址
    
35.           url: `<a href="https://devapi.qweather.com/v7/air/now?location=" target="_blank">https://devapi.qweather.com/v7/air/now?location=</a>${longitude},${latitude}&key=${key}`,
    
36.           success (res) {
    
37.             const air=res.data.now  
    ( l8 x9 u" s- o: a! Q8 m( ^
38.             const {aqi, category}=air       //解构赋值
    ( ?+ e' F, v* w( g4 U6 c/ }( H6 ~
39.             that.setData({
    $ C( _5 {; T# _1 o, }
40.               aqi,
    0 X% L1 s! s- i8 l
41.               airText:category
    9 T# b$ N/ B: p* h. Y
42.             })
    
43.           }
    - x' Z% x. @  f) W  c( W% b0 ~- i
44.         })
    
45. 
      r7 d9 m' o& e2 p2 x! n
46.         wx.request({
    , D" ~7 g+ P1 W! W' N# k
47.           //获取生活质量的API接口地址
    
48.           url:<a href="https://devapi.qweather.com/v7/indices/1d?type=3&location=" target="_blank">type=3&location=</a>${longitude},${latitude}&key=${key}`,
    . I6 z4 \8 S9 }  L9 Y0 y6 V
49.           success (res) {
    
50.             const {text}=res.data.daily[0]  //解构赋值
    / V& a0 Z+ ?. Q. b
51.             that.setData({
    1 g5 @. g# e7 s+ n1 s* j: S  Q. {( O- w) R
52.               weatherAdvice:text
      t& ^9 ~6 q+ F% j& G6 F2 c$ C9 r
53.             })
    
54.           }
    
55.         })
    - [! P5 D, S4 n" x
56.       }
    " D% b! j! ~4 f4 i' f5 a
57.      })
    
58.   }

复制代码

​  接下来是小程序端的MQTT连接部分，首先需要导入一个连接服务器的库，这个库叫mqtt.min.js。该库的地址如下：mqtt.min.js文件
​  下载后，直接在小程序中建一个文件夹存放解压出来的文件，其中有两个文件分别为mqtt.js、mqtt.min.js，在小程序的js文件中只需引用mqtt.min.js文件即可，详细的引用代码及具体的自定义函数如下所示：(如果连接的是私有服务器需要多修改设备ID和密码，否则只需修改连接的服务器地址及端口号)：

1. var mqtt=require("../../utils/mqtt.min.js")
   " A9 [) i: D3 [3 H2 L3 J
2. var client=null
   
3. Page({
   
4.   /**
   
5.    * 页面的初始数据
   5 ?1 Z$ R9 @1 T- C4 g
6.    */
   
7.   data: {
   
8. 
   
9.   },
   ' B, s# n* K3 n4 H& _& O
10. 
    
11.   onLoad(){
    7 }% I* b' [  d4 b# _4 r6 W5 f' q
12.     this.connectmqtt()
    
13.   },
    
14. 
    1 \7 z. `. B! J
15.   connectmqtt:function(){
    
16.     var that=this;//this是指外层的对象，如果在这里进行提取，后面进入函数后，他的this就是connectmqtt函数的对象
    
17.     /*杰叔叔、EMQX专用*/
    
18.     const options={
    " g: Q6 m4 S, E8 T/ a( }4 Q
19.       connectTimeout:4000,
    
20.       clientId:"zsd", //此变量随便写
    
21.       port:8084,
    
22.       //杰叔叔的服务器是私有，所以需要账号和密码，而EMQX的免费服务器不需要账号密码
    
23.       username:"f6d61178afa1003ac5d41dc9ae10f0c6",
    * e9 @% _' T- n* b* Q& `
24.       password:"123123"
    
25.     }
    0 E6 v) o: \) k6 b  B
26.     /*腾讯云MQTT服务器专用*/
    
27.     /*  const options={
    
28.       connectTimeout:4000,
    
29.       clientId:"zsd", //此变量随便写
    
30.       port:80,
    $ M# W$ \, s+ g" B4 U7 O% U
31.       username:"S2ME0J3F8Xtest1;12010126;bee9c;1656302400000",
    
32.       password:"d58ce11e6725c4de9549c61d564f8bc0c7211707642ae92c63dd94b27943f85e;hmacsha256"
    
33.     }*/
    ( l( t, _% `% J. O& G4 ?
34.     /*百度云MQTT服务器专用*/
    
35.     /*  const options={
    2 |: w6 A; Q( J% G# U2 U) o0 z
36.       connectTimeout:4000,
    
37.       clientId:"zsd", //此变量随便写
    
38.       port:443,
    
39.       username:"thingidp@acwbepc|test2|0|SHA256",
    . n2 r8 t" n# a) O$ l1 S  U; E
40.       password:"6fac92df9ce9cb5839cf95da0c0d8f60e3d5d333fff8b7d85bcaf5b5e71d8517"
    1 i9 B8 H9 P7 t" @& q5 L
41.     }*/
    ' T+ ~/ u! u$ I" e
42.           /*小程序连接远程服务器时，用wxs(wss)加密连接出去，其他客户端工具，
    
43.                   例如emqx在线测试工具可以使用wss协议连接服务器一；mqttbox软件也可以使用mqtt/tcp协议连接服务器一
    
44.                   原因是因为服务器支持这些协议，本质上wss、mqtt都是基于tcp进行封装的
    - O0 `. C6 G3 M* _, e
45.                   实际上下面借助wxs协议连接服务器一，而其他工具也是借助服务器支持的协议进行连接，然后就可以进行数据的传输
    
46.             如果连接的协议是ws或wss，需要在服务器地址后面加上/mqtt,如果不是前面这两个协议的地址，则直接连接服务器地址即可*/
    + F0 u/ D4 O) M
47.     //client=mqtt.connect("wxs://t.yoyolife.fun/mqtt", options)杰叔叔的服务器地址(wss协议需加上mqtt路径)
    
48.     client=mqtt.connect("wxs://broker-cn.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
    " e) U0 }6 o2 C4 p, g' b# }
49.     //client=mqtt.connect("wxs://broker.emqx.io/mqtt", options)//EMQX的服务器地址(wss协议需加上mqtt路径)
    
50.     //client=mqtt.connect("wxs://S2ME0J3F8X.ap-guangzhou.iothub.tencentdevices.com/mqtt", options)//腾讯云服务器地址(wss协议需加上mqtt路径)
    
51.     //client=mqtt.connect("wxs://acwbepc.iot.gz.baidubce.com/mqtt", options)//百度云服务器地址(wss协议需加上mqtt路径)
    4 g% O. r5 E4 z
52.     client.on("connect",(e)=>{
    
53.       console.log("服务器连接成功");
    * e) P3 q' S- \5 T8 a
54.       client.subscribe("/iot/1009/zsd2", {qos:0}, function(err){//杰叔叔的服务器需要主题前缀、EMQX服务器不需要主题前缀
    
55.         if(!err){
    2 f) d# u0 s4 _: Q- n
56.           console.log("订阅成功");
    
57.         }
    7 V, s/ C( p% K3 H, p
58.       })
    / u3 r6 U) d2 K% k  O, ^1 B* \
59.     /*  client.subscribe("S2ME0J3F8X/test1/data", {qos:0}, function(err){//腾讯云服务器需要主题前缀
    
60.         if(!err){
    3 }# f  s3 p2 C' l. T7 _0 l
61.           console.log("订阅成功");
    ' ~# m; v$ _* ]! Z$ m' N* C, L
62.         }
    & D0 E/ z8 C* s) q
63.       })*/
    
64.     /*  client.subscribe("$iot/test2/user/test2", {qos:0}, function(err){//百度云服务器需要主题前缀
    
65.         if(!err){
    , |3 w  _1 q. u- @) i3 u8 J. n" q: ^
66.           console.log("订阅成功");
    ' t  T  C! x, d+ K/ O% m: ~
67.         }
    
68.       })*/
    ) U, i' b- L+ J- z- {
69.     })
    
70.     //信息监听事件
    
71.     client.on("message", function(topic, message){
    . i& U9 o) I( l- h/ V) p- ~  I
72.       let tem=JSON.parse(message)
    ! n8 c/ z  O+ D3 H0 f! T
73.       console.log(tem);
    
74.       that.setData({
    
75.         temp:tem.a,
    
76.         humi:tem.b
    * m5 Q* C6 G5 p; d% F/ l( Q
77.       })
    
78.       console.log("收到"+message.toString());
    
79.     })
    % g. U9 O% s" B
80.     //发送reconnect类型给服务器，一旦连接中断，就会触发重新连接
    
81.     client.on("reconnect", (err)=>{
    
82.       console.log("正在重新连接",err);
    
83.     })
    : V1 u# G! d6 [0 w5 A
84.     client.on("error", (err)=>{
    
85.       console.log("连接失败",err);
    
86.     })
    
87.   }
    
88. 
    & e. J& L% f# @. K. j* k
89. })
    

复制代码

5 E9 o6 v5 Q- H' Q& C. m+ |: ?​  至此，小程序部分的天气数据获取和MQTT连接已经基本完成，至于界面的优化，那就需要各位去学习小程序的界面优化啦。
————————————————
版权声明：i土豆
( y: p, a1 t" F' [

3 d0 x: Z( r: v: o# D+ ~- L$ i% j