设置传感器阈值和数据保存本地缓存

点击传感器出来弹窗

在循环的(wx:for)传感器块上面增加点击事件和属性

<view
  wx:for="{{sensorList}}"
  wx:key="parameter"
  class="system-info"

  bindtap="thresholdSetting"
  data-item="{{item}}"></view>

//缓存数据
data:{
  thresholdDialog: false, //阈值
  thresholdObj: {
    top: "",
    bottom: "",
  },
  tempParameter: "", //某个参数的阈值
  tempIdx: "",
  tempTop: "",
  tempBottom: "",
},

//点击传感器事件
thresholdSetting(e) {
  console.log(e.currentTarget.dataset.item);
  this.setData({ 
    tempTop: e.currentTarget.dataset.item.top 
      ? e.currentTarget.dataset.item.top 
      : e.currentTarget.dataset.item.top == 0
      ? e.currentTarget.dataset.item.top 
      : "", 
    tempBottom: e.currentTarget.dataset.item.bottom 
      ? e.currentTarget.dataset.item.bottom 
      : e.currentTarget.dataset.item.bottom == 0
      ? e.currentTarget.dataset.item.bottom 
      : "", 
    thresholdDialog: true, //打开弹窗
    tempParameter: e.currentTarget.dataset.item.parameter, //某个参数的阈值
    tempIdx: e.currentTarget.dataset.item.idx, 
    "thresholdObj.top": e.currentTarget.dataset.item.top 
      ? e.currentTarget.dataset.item.top 
      : e.currentTarget.dataset.item.top == 0
      ? e.currentTarget.dataset.item.top 
      : "", 
    "thresholdObj.bottom": e.currentTarget.dataset.item.bottom 
      ? e.currentTarget.dataset.item.bottom 
      : e.currentTarget.dataset.item.bottom == 0
      ? e.currentTarget.dataset.item.bottom 
      : "", 
  }); 

  // 上面的是之前的 建议用下面的 虽然功能一样，但是可读性更强
  let { top, buttom } = e.currentTarget.dataset.item; 
  this.setData({ 
    tempTop: top ? top : top == 0 ? top : "", 
    tempBottom: buttom ? buttom : buttom == 0 ? buttom : "", 
    thresholdDialog: true, //打开弹窗
    tempParameter: e.currentTarget.dataset.item.parameter, //某个参数的阈值
    tempIdx: e.currentTarget.dataset.item.idx, 
    "thresholdObj.top": top ? top : top == 0 ? top : "", 
    "thresholdObj.bottom": buttom ? buttom : buttom == 0 ? buttom : "", 
  }); 
},

wxml 部分 输入事件绑定函数 bindinput

<van-dialog
  use-slot
  title="设置安全阈值"
  show="{{ thresholdDialog }}"
  show-cancel-button
  bind:confirm="thresholdClose">
  <van-field
    value="{{thresholdObj.top}}"
    bindinput="getTop"
    type="number"
    clearable
    label="上限"
    placeholder="请输入上限"
    bind:click-icon="onClickIcon" />
  <van-field
    value="{{ thresholdObj.bottom }}"
    bindinput="getBottom"
    type="number"
    clearable
    label="下限"
    placeholder="请输入下限"
    bind:click-icon="onClickIcon" />
</van-dialog>

输入上限和下限事件

getTop(e) {
  this.setData({ tempTop: e.detail });
},
getBottom(e) {
  this.setData({ tempBottom: e.detail });
},

弹窗点击确定事件

thresholdClose() {
  console.log(
    this.data.tempParameter,
    this.data.tempIdx,

    this.data.tempTop,
    this.data.tempBottom
  );
  let index = this.data.tempIdx;
  this.setData({
    ["sensorList[" + index + "].top"]: Number(this.data.tempTop),
    ["sensorList[" + index + "].bottom"]: Number(this.data.tempBottom),
  });
  console.log(this.data.sensorList);
},

连接数据保存本地缓存

这里要用到的三个 api：

wx.getStorageSync("key名"); 读取本地缓存中的某个字段

wx.setStorageSync("key名", 值); 将某个字段存入本地缓存

wx.removeStorageSync(”key名"); 将本地缓存中某个字段删除

我们需要的场景是连接成功的状态下次进来自动连接

//在mtqq连接成功后 我们把连接状态存到本地缓存 以及地址端口号账号密码存到本地缓存 用于在下次进来时候自动带入输入框 并且调用连接函数
let { address, post, username, password } = this.data;
let mqttInfo = { address, post, username, password };
wx.setStorageSync("mqttInfo", mqttInfo);
this.setData({ isConnect: true });
wx.setStorageSync("isConnect", true);

//点击断开连接后  删除本地缓存中是否有地址和登陆信息 有的话删除
this.setData({ isConnect: false, isPush: false, isSubscribe: false });
wx.setStorageSync("isConnect", false);
wx.getStorageSync("subscribeTopic") && wx.removeStorageSync("subscribeTopic");
wx.getStorageSync("pushTopic") && wx.removeStorageSync("pushTopic");
wx.getStorageSync("mqttInfo") && wx.removeStorageSync("mqttInfo");

进入小程序在 onLoad()生命周期中判断本地缓存中是否有数据 有的话带入并连接 MQTT

/*判断本地缓存中的登陆数据和是否连接数据是否存在*/
if (wx.getStorageSync("mqttInfo") && wx.getStorageSync("isConnect")) {
  let mqttInfo = wx.getStorageSync("mqttInfo");
  console.log(mqttInfo);
  this.setData({
    address: mqttInfo.address,
    post: mqttInfo.post,
    username: mqttInfo.username,
    password: mqttInfo.password,
  });
  this.connectMqtt(); //连接MQTT
}
if (
  wx.getStorageSync("mqttInfo") &&
  wx.getStorageSync("isConnect") &&
  wx.getStorageSync("subscribeTopic")
) {
  this.setData({ subscribeTopic: wx.getStorageSync("subscribeTopic") });
  this.toSubscribe(); //添加订阅地址
}
if (
  wx.getStorageSync("mqttInfo") &&
  wx.getStorageSync("isConnect") &&
  wx.getStorageSync("pushTopic")
) {
  this.setData({ pushTopic: wx.getStorageSync("pushTopic") });
  this.toPush(); //添加发布地址
}