【物联网开发】-微信小步伐之MQTT毗连，基于MQTT实现装备-服务器-小步伐的 ...

一、前期知识准备

想要开发微信小步伐，起首要有一些基础知识：html、cs、js、json等，小步伐中要用到的知识框架大体相同，一个页面包括js、json、wxml、wxss格式的文件。
由于本人此前从未接触过小步伐开发，本篇文章将会以新手小白的角度一步步剖析如何使用微信小步伐通过MQTT服务器毗连装备。包括：如何申请MQTT服务器，如何使用微信开发者工具开发小步伐，并让装备与服务器创建MQTT毗连，订阅主题及发布消息，实现消息在装备-服务器-微信小步伐的传输。

二、小步伐开发环境搭建

1、注册微信小步伐

   https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
  

• 打开上面的官方链接，前往注册微信小步伐
  
• 作为登录帐号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱
  
• 邮箱激活
  
• 信息登记
  

完成上述的步骤以后，就可以登录小步伐的后台了。
为什么要注册小步伐账号？

由于后面要真机调试，发布上线，使用微信开发者平台创建项目的时间也必要提供小步伐的AppID，因此这一步很关键，不可或缺。
2、下载开发软件

微信小步伐的开发软件有几种，本人使用的是原生的微信开发者工具，链接如下，下载稳固版即可
   https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  3、创建新项目

项目-新建项目-填写项目名称、项目存放目录、AppID、后端服务-不适用云服务、模板选择-JavaScript，确定创建小步伐。
4、目录结构

刚创建好的小步伐目录结构如下

其中
JS 脚本逻辑文件，通常是用来处理惩罚这个页面和用户的交互，比如数据的定义，功能函数的实现等
JSON配置文件，在小步伐中json扮演的静态配置的角色，最常常用的文件是app.json，用来对全局配置
wxml文件用来描述当前这个页面的结构，比如第一个组件是按钮，第二个组件是文本框等
wxss文件用来描述页面的样式，比如位置大小排版等
具体框架的语法在官方文档可以具体阅读下面的链接
   https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
  创建好项目以后，就可以开展MQTT的配置了
三、配置MQTT服务

1、必要准备的内容

• 在公网IP上搭建了MQTT服务器，且该IP配置了域名，该域名已进行过ICP存案
  
• 能够毗连MQTT服务器的装备
  

看到这里，是不是觉得难度一下拉满了？还要额外学这么多，还得搭建服务器，还要安装操作系统配置一堆东西…别担心，路已经买通，这边有个服务器直接拿来用，免费且可靠！！
2、特殊感谢

在这里特殊感谢一位本心up主能够提供这个免费的MQTT服务器，我最初学小步伐MQTT搭建也是跟着这位up主一步一步做的，路过小同伴的可以给个一键三连支持这位本心博主。

这位博主提供了一个网站：
   http://www.yoyolife.fun/
  

3、注册账号

操作简单一步即可完成注册与登录

4、添加装备

点击项目管理的装备名，进行装备管理
5、管理装备

到这一步，服务器的配置已经完成，装备可以通过外网毗连MQTT服务器，但要怎么毗连，如何观察装备毗连状态呢？本文使用MQTTx客户端软件，作为装备对MQTT服务器订阅主题和发布消息。
现在又多了两个名词：订阅主题、发布消息，作为小白的你是否感到陌生？
订阅主题：就是装备绑定一个指定的主题，服务器在转发这个主题下的内容的时间，会推送到订阅这个主题的全部装备上；
发布消息：就是装备将消息绑定指定的主题，发到服务器，由服务器广播转发出去，只有绑定了（即订阅）该主题的装备才能收到服务器转发的该主题的消息。
普通易懂地讲，装备订阅了一个主题，就能向订阅同样主题的装备发送消息，也能收到订阅了相同主题装备的消息。
四、使用MQTTx客户端创创建备

1、MQTTx下载链接

   https://mqttx.app/zh
  安装完MQTTx后准备对服务器进行毗连
2、配置MQTT装备参数

名称可以任意填，ClientID和用户名必须填上面的装备ID，密码是在杰叔叔捣鼓提供的服务器创创建备ID时的密码，服务器地点和端口都是固定的，按照图片设置即可

3、毗连MQTT服务器

可以看到这里订阅了两个主题，向服务器发送了消息以后，服务器将消息转发给订阅了该主题的装备，包括本装备，分析MQTT毗连成功

我们可以看到，MQTT服务器显示装备在线，也分析MQTT毗连成功

至此，MQTT服务器与单装备（MQTTx）的毗连就调通了。
五、小步伐端

1、修改微信开发者工具配置

详情-本地设置-取消勾选 “将JS编译成ES5”

2、登录小步伐后台

开发管理-开发设置-服务器域名-修改，添加socket合法域名：wss://t.yoyolife.fun:8084
3、修改微信开发者工具代码

index.js文件

1. // index.js
2. // 获取应用实例
3. const app = getApp()
4. var mqtt = require('../../utils/mqtt.min')
6. Page({
7.   data: {
8.   },
9.   onLoad:function(options) {
10.     var that = this
11.     that.connectMqtt()
12.     // this.connectMqtt()
13.   },
14.   connectMqtt:function(){
15.     const options = {
16.       connectTimeout:4000,
17.       clientId:'5ddad3c8554e8f74fd3f96ff959dd894',
18.       port:8084,
19.       username:'5ddad3c8554e8f74fd3f96ff959dd894',
20.       password:'123456'
21.     }
22.     client = mqtt.connect('wxs://t.yoyolife.fun:8084/mqtt',options)
23.     client.on('connect',(e)=>
24.     {
25.       console.log('服务器连接成功')
26.       client.subscribe('/iot/2742/de',
27.       {
28.         qos:0,
29.       },
30.       
31.       function(err)
32.       {
33.         if(!err)
34.         {
35.             console.log('订阅成功')
36.         }
37.       })
38.     })
39.     client.on('message',function(topic,message){
40.       console.log('收到'+message.toString())
41.     })
42.   },
43.   taphere(){
44.       console.log('helloworld');
45.   }
46. })

复制代码

index.wxml

1. <!--index.wxml-->
2. <view class="container">
3.   <button type="primary" bindtap="taphere">helloworld</button>
4. </view>

复制代码

值得注意的是，app.json文件中pages存放的是页面的路径，所以必要将logs文件夹删掉以后再修改app.json并保存
app.json

1. {
2.   "pages":[
3.     "pages/index/index"
4.   ],
5.   "window":{
6.     "backgroundTextStyle":"light",
7.     "navigationBarBackgroundColor": "#2b4b6b",
8.     "navigationBarTitleText": "物联网平台",
9.     "navigationBarTextStyle":"white"
10.   },
11.   "style": "v2",
12.   "sitemapLocation": "sitemap.json"
13. }

复制代码

往utils添加mqtt.min.js文件

将下载链接的文件放进utils文件夹里，最后的目录结构将会是这样

1. 下载链接：
2. https://pan.baidu.com/s/1lS6eDXgW107dA7HyxF8ZkA?pwd=n8jw
3. 提取码：n8jw

复制代码

总结

小步伐内部的clientId和username要相同，这个ID是杰叔叔捣鼓提供的物联网平台申请的ID，填错了将无法访问MQTT服务器，端口固定是8084，密码是申请ID的时间的密码，订阅的主题目前是/iot/2742/de
六、编译小步伐

1、毗连MQTT服务器

点击上方的编译按键，看到调试框显示“服务器毗连成功”及“订阅成功”，表现小步伐与MQTT服务器毗连成功。

2、跨装备发送消息

小步伐可以作为一个装备，MQTTx可以创建一个装备，使用这两个装备订阅同一个主题，发布消息，将会看到MQTTx发布消息后，会在小步伐调试窗口显示收到相应发送的消息，接下来做个演示：

小步伐发布消息的功能还未完善，目前只能实现装备发布消息，小步伐显示消息。后续将会进一步完善。但小步伐作为监测数据的平台，现在这个水平已经可以满足一些基本的应用场景了，只必要实现收到数据后显示在小步伐页面，这个小步伐就可以正式上线发布使用了。
至此，基于MQTT实现装备-服务器-小步伐的消息传输已经实现完毕

码字不易，你的一键三连就是对本人最大的支持~
全部项目代码均开源，欢迎同舟共济的小同伴共同讨论提拔！
文中如有不足之处，欢迎各位前辈批评指正。
本文项目代码下载链接：
   链接：https://pan.baidu.com/s/1nYkcUG25VKTzmguYOAQXKA?pwd=bf95
提取码：bf95

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。