基于EMQX云服务器的环境调节系统(微信小程序篇)

前面我们已经完成了服务器的部署以及硬件数据上云，现在是应用程序篇，微信小程序连接EMQX，我这个是根据官网给的demo进行改造升级的 在微信小程序中打造mqtt连接测试工具

根据这篇文章说微信小程序如果要应用于实际，就得搞个TLS/SSL和域名配置。目前我是有在阿里云买了域名以及配置好相关的ssl证书，但是由于我的服务器只有使用了两个星期，不能达到阿里云服务器要使用三个月及之上才可以ICP备案，我被卡得死死的，后面了解到选择服务器的地方是香港或者国外就可以直接ICP备案。所以我下面的代码都是基于微信开发者工具，如果有哪个大哥搞好ICP这些，下面代码也就改改url应该就能用。

1、界面设计

官方给的界面demo是这样的

这是我设计的，原理大概差不多，组件变化了而已

2、连接域名操作

官方是两个按钮来连接和断开，我这里用个开关来代替，给开关添加点击事件，checked是用来判断设备相对应状态

    <image class="flex_image" src="../../images/wei.png">image>
    <input class="flex_input" bindinput="setHost" value="{{ host }}" placeholder="连接地址(域名)"  />
    <switch class="flex_btn" checked="{{hostSwitch}}" bindchange="btn_host"/>

这里根据开关事件，可直接根据e.detail.value 判断开关的true or false . connect和disconnect我都是拿官方demo的，基本不用改，相对应的数据在页面测试数据改就可以

 btn_host:function(e){
   if(e.detail.value ==true){
        this.connect();
   }
   else{
        this.disconnect();

   }

 },

/**
   * 页面的初始数据
   */
  data: {
     temp:27,
     humi:46,
     guang:226,
     client: null,
    host: "47.120.7.159",
    pubTopic: "/mynodemcu/smarthome/pub", //订阅
    subTopic: "/mynodemcu/smarthome/sub", //发布
    pubMsg: "1",
    receivedMsg: "",
    mqttOptions: {
      username: "",
      password: "",
      reconnectPeriod: 1000, // 1000毫秒，设置为 0 禁用自动重连，两次重新连接之间的间隔时间
      connectTimeout: 30 * 1000, // 30秒，连接超时时间
      // 更多参数请参阅 MQTT.js 官网文档：https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
      // 更多 EMQ 相关 MQTT 使用教程可在 EMQ 官方博客中进行搜索：https://www.emqx.com/zh/blog
    }  
  },

3、订阅主题

跟上面的操作一样

//订阅主题
 btn_pubSwitch:function(e){
  if (this.data.client) {
      if(e.detail.value ==true){
        this.pubscribe();
      }
      else{
        this.unpubscribe();
      }
  }
  else{
    wx.showToast({
      title: "请先点击连接服务器",
      icon: "error",
    }); 
  }
 },

4、发布主题

这里我设置了获取input输入信息，因为控制命令我设置在上面那个开关，这里只是获取发布命令信息而已

    <image class="flex_image" src="../../images/sub1.png">image>
    <input class="flex_input" bindinput="setHost" value="{{ subTopic }}" placeholder="发布主题"  />

下面以灯状态为例

 <view class="data_title">灯状态view>
            <switch class="data_value" checked="{{ledSwitch}}" bindchange="btn_led">switch>

//需要修改的也只是字符串命令那里
btn_led:function(e){
    if(e.detail.value ==true){
      if (this.data.client) {
        this.data.client.publish(this.data.subTopic,"1"); //'1'是我发送控制灯开的指令
        return;
      }
      wx.showToast({
        title: "请先点击连接",
        icon: "error",
      });
 }
 else{
    if (this.data.client) {
      this.data.client.publish(this.data.subTopic,"0");  //'0'灯关的指令，这些跟设备接收指令的字符串相对应
      return;
    }
    wx.showToast({
      title: "请先点击连接",
      icon: "error",
    });

 }

5、数据获取

我们前面订阅主题获取过来的只是字符串数据，只需要使用json.parse就可以把字符串转换为json数据，方便我们调用。修改的地方是在connect函数中的this.data.client.on(“message”, (topic, payload) 这个地方，换成我的这些就可以

this.data.client.on("message", (topic, payload) => {
         
          const currMsg = this.data.receivedMsg ? `
${payload}` : payload;
          var json=this.data.receivedMsg.concat(currMsg)
          var data = JSON.parse(json)
          that.setData({
            temp:data.temp,
            humi:data.humi,
            guang:data.guang,
            led:data.led,
            feng:data.feng,
            doji:data.doji, 
          })
          console.log(data)
        
        });

6、设备状态更新

//判断设备状态从而控制开关状态
  pduan(){
    var sele =getCurrentPages();  //获取当前页面的数据
    var feng =sele[sele.length-1].data.feng;  
    var led =sele[sele.length-1].data.led;
    var doji =sele[sele.length-1].data.doji;
    var that= this
    if(feng==1){
      that.setData({fengSwitch:true})
    }
    else{
      that.setData({fengSwitch:false})
    }
    if(led ==1){
      that.setData({ledSwitch:true})
    }
    else{
      that.setData({ledSwitch:false})
    }
    if(doji ==1){
      that.setData({dojiSwitch:true})
    }
    else{
      that.setData({dojiSwitch:false})
    }
  },

onLoad: function (options) {
    var that=this
    setInterval(function(){
      that.pduan();
    },8000
    )  
  },

这样微信小程序大概操作就这样完成了。下一篇是微信小程序连接mysql+数据可视化