代码收藏家技术教程 2024-10-18

物联网之ESP32与微信小程序实现指示灯、转向灯

ESP32

代码

#include <WiFi.h>
#include <WebServer.h>
#include <ArduinoJson.h>

const char* ssid = "jifu";
const char* pass = "2022xinchan!@#";
const int dateTime = 500;
const int ledPin4 = 4;
const int ledPin5 = 5;
bool isLTS = false;
bool isRTS = false;
bool isDFL = false;

WebServer server(8068);

// 封装响应函数
void sendResponse(int code, const char* status, const char* message, const String& originId, const String& newId) {
  StaticJsonDocument<200> doc;
  doc["code"] = code;
  doc["status"] = status;
  doc["message"] = message;

  JsonObject responseObj = doc.createNestedObject("response");
  responseObj["originId"] = originId;
  responseObj["newId"] = newId;

  String res;
  serializeJson(doc, res);
  server.send(code, "application/json", res);
}

// 封装指示灯错误响应
void fnIndicatorLightSendResponseError(const String& originId, const String& newId) {
  isLTS = false;
  isRTS = false;
  isDFL = false;
  sendResponse(500, "failure", "失败", originId, newId);
}

// 封装指示灯
void fnEncapsula(int pin1, int pin2) {
  if (pin1 != 1) digitalWrite(pin1, HIGH);
  if (pin2 != 1) digitalWrite(pin2, HIGH);
  delay(dateTime);
  if (pin1 != 1) digitalWrite(pin1, LOW);
  if (pin2 != 1) digitalWrite(pin2, LOW);
  delay(dateTime);
}

// 左转灯
void leftTurnSignal() {
  fnEncapsula(ledPin4, 1);
}

// 右转灯
void rightTurnSignal() {
  fnEncapsula(1, ledPin5);
}

// 双闪灯
void doubleFlashingLights() {
  fnEncapsula(ledPin4, ledPin5);
}

// 指示灯
void fnIndicatorLight() {
  String originId = server.arg("originId");
  String newId = server.arg("newId");
  if (originId == "") {
    int id = newId.toInt();

    switch (id) {
      case 1:
        isLTS = true;
        sendResponse(200, "success", "左转灯已开启", originId, newId);
        break;
      case 2:
        isRTS = true;
        sendResponse(200, "success", "右转灯已开启", originId, newId);
        break;
      case 3:
        isDFL = true;
        sendResponse(200, "success", "双闪灯已开启", originId, newId);
        break;
      default:
        fnIndicatorLightSendResponseError(originId, newId);
        break;
    }
  } else if (newId == "") {
    int id = originId.toInt();

    switch (id) {
      case 1:
        isLTS = false;
        sendResponse(200, "success", "左转灯已关闭", originId, newId);
        break;
      case 2:
        isRTS = false;
        sendResponse(200, "success", "右转灯已关闭", originId, newId);
        break;
      case 3:
        isDFL = false;
        sendResponse(200, "success", "双闪灯已关闭", originId, newId);
        break;
      default:
        fnIndicatorLightSendResponseError(originId, newId);
        break;
    }
  } else if (originId != "" && newId != "") {
    if (newId == "1") {
      isLTS = true;
      isRTS = false;
      isDFL = false;
      sendResponse(200, "success", "左转灯已开启", originId, newId);
    } else if (newId == "2") {
      isLTS = false;
      isRTS = true;
      isDFL = false;
      sendResponse(200, "success", "右转灯已开启", originId, newId);
    } else if (newId == "3") {
      isLTS = false;
      isRTS = false;
      isDFL = true;
      sendResponse(200, "success", "双闪灯已开启", originId, newId);
    } else {
      fnIndicatorLightSendResponseError(originId, newId);
    }
  } else {
    fnIndicatorLightSendResponseError(originId, newId);
  }
}

// 初始化WiFi服务
void runInit() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, pass);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("Loading in progress...");
  }
  pinMode(ledPin4, OUTPUT);
  pinMode(ledPin5, OUTPUT);
  Serial.print("\nWiFiIP: ");
  Serial.println(WiFi.localIP());
}

// 主函数
void setup() {
  Serial.begin(9600);
  runInit();
  server.on("/api/apiIndicatorLight", HTTP_GET, fnIndicatorLight);
  server.begin();
}

// 循环函数
void loop() {
  server.handleClient();
  if (isLTS) leftTurnSignal();
  if (isRTS) rightTurnSignal();
  if (isDFL) doubleFlashingLights();
}

解析

敬请期待…

微信小程序

Html

代码

<view class="d_g gtc1_1fr gg_38">
  <view class="h_208 lh_208 fs_58 fw_b ta_c bc_efefef radius_8 {{activa===item.id?'color_409eff':''}}" wx:for="{{list}}" wx:key="id" data-id='{{item.id}}' catchtap='handleTabBar'>
    {{item.title}}
  </view>
</view>

解析
敬请期待…

JavaScript

代码

// components/IndicatorLight/page.js
import {
  indicatorLight
} from '../../api/indicatorLight.js';

const {
  showToast
} = getApp();

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    list: [{
        id: 1,
        title: '左 转'
      },
      {
        id: 2,
        title: '右 转'
      },
      {
        id: 3,
        title: '双 闪'
      }
    ],
    activa: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    async handleTabBar({
      target: {
        dataset: {
          id
        }
      }
    }) {
      const that = this;
      const thatData = that.data;
      let originId = thatData.activa;
      let newId = id;

      newId = originId === id ? '' : id;

      let {
        message
      } = await indicatorLight({
        originId,
        newId
      });

      that.setData({
          activa: newId
        },
        () => showToast(message)
      );
    }
  }
})