物联网技术（AIR780E cat1-4G模块+小程序+腾讯云MQTT）驱动的智能井盖系统设计(连载03)

目录

一、项目意义和项目简介

二、硬件设计

1.原理图设计

2.PCB设计

3、主要器件

3.1三轴加速度传感器

3.2可燃气体传感器

3.3GPS模块

4、MQTT通信协议设计

三、微信小程序设计

3.1、连接EMQX服务器步骤

3.2、MQTT发布订阅测试

3.3程序界面设计

1）APP主页面：

2）地图界面设计

3）设备信息界面设计

4）设备日志页面设计

三、微信小程序设计

项目使用微信开发者工具进行设计与开发，使用的是JavaStript语言编写小程序代码。地图界面使用的是腾讯地图WebService API进行架构，数据界面使用MQTT通信协议和订阅主题实现数据接收功能，服务器使用的是在腾讯服务器上使用开源EMQX自主搭建的MQTT服务器，登陆界面将用户信息上传在云数据库上。

主要实现的功能：在数据界面通过EMQX服务器将STM32单片机上的可燃气、倾角、震动、报警、水位监测、井盖定位数据用MQTT通信协议和订阅主题进行接收，但是井盖定位数据则是发送到地图界面上，并在腾讯地图中获取实时定位,还有数据页面加上实时时间一一发送到设备日志页面上。

3.1、连接EMQX服务器步骤

• 新建mqtt.js库

先新建文件夹utils，再新建文件mqtt.min.js

• (1) 找到mqtt.min.js库

官网下载地址：https://unpkg.com/mqtt@4.2.0/dist/mqtt.min.js

• (2) 复制

进行ctrl+a复制

(4)粘贴到mqtt.js库

(5)引用mqtt.js库

(6)连接EMQX服务器

const app = getApp()
var mqtt = require('../../utils/mqtt.min.js') //根据自己存放的路径修改
const appInstance = getApp();
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
    temperture:'0',
    humidity:'0',
    displayData1: '0',  
    displayData2: '0',  
    displayData3: '0',
    wl:'0',
    gas:'0',
    longitude:'0',
    latitude:'0',
    scanResult: ''
  },
  onLoad(){
    this.doConnect()
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    this.setData({
        nbTitle: '设备参数',
        nbLoading: false,
        nbFrontColor: '#ffffff',
        nbBackgroundColor: '#D53e37',
      })
  },
   doConnect(){
    //如果你服务器开了连接验证，这里的参数要自己加上username和password等
    const options = {
      keepalive: 60, //60s
      clean: true, //cleanSession不保持持久会话
      protocolVersion: 4 ,//MQTT v3.1.1
      clientId:Math.random().toString(36).substr(2)
    };
    let url = "wx://www.visionexpand.com.cn:8083/mqtt";//这个地址是emq官方的公开免费地址，请换成自己服务器的地址
    const client = mqtt.connect(url,options)
    client.on('connect', function () {
      console.log('连接emqx服务器成功')
      client.subscribe('$thing/up/property/IQMPOB8BI9/temp/humi',{qos:2},function(err){
        if(!err)
            {console.log('订阅成功')}
      })
    })
    //接收消息监听
    client.on('message', (topic, message) => {    
      let msg=message.toString();
      const data=JSON.parse(msg);
      const timestamp = new Date().toISOString().substr(0, 19).replace('T', ' ');  
      console.log('温度：', data.temperture, '湿度：', data.humidity,'纬度：',data.longitude,'经度',data.latitude,'x轴:',data.x,'y轴:',data.y,'z轴:',data.z); 
      let data1=data.x;
      let data2=data.y;
      let data3=data.z;
      let roundedData1=Math.round(data1*1e3)/1e3;
      let roundedData2=Math.round(data2*1e3)/1e3;
      let roundedData3=Math.round(data3*1e3)/1e3;
  // 设置数据
  this.setData({  
    temperture: data.temperture,  
    humidity: data.humidity,
    longitude:data.longitude,
    latitude:data.latitude,
    displayData1: roundedData1,  
    displayData2: roundedData2,  
    displayData3: roundedData3,
  });
  appInstance.globalData.sharedLocation = {  
    latitude: data.latitude,  
    longitude: data.longitude 
  };
  const updatedData = {  
    ...data,  
    timestamp: timestamp  
  };
  app.emitGlobalEvent('mqttDataUpdatedWithTime', updatedData);
  })
},
scanQRCode: function() {  
    const that = this;  
    wx.scanCode({  
      success: function(res) {  
        console.log('扫描结果', res.result);  
        that.setData({  
          scanResult: res.result  
        });  
      },  
      fail: function(err) {  
        console.error('扫描失败', err);  
        wx.showToast({  
          title: '扫描失败',  
          icon: 'none'  
        });  
      }  
    });  
  }
})

点击“编译“

• 查看是否连接上EMQX

可以看到我们的小程序已经连上EMQX服务器了

接下来请见连载4

对本项目感兴趣的同学、朋友，或者需要定制、学术论文使用的都可以扫码联系：

文章标签：#4G#cat1#mqtt#小程序#物联网