uniapp 小程序AP配网

一、TCPSocket.js 封装TCP协议

javascript 复制代码
class socket {
  constructor() {
    this.connection = {};
  }
  // 创建一个TCP实例
  establish(monitor) {
    this.connection = wx.createTCPSocket();
    this.connection.connect({ address: "000.000.0.0", port: 6800 });
  }
  // 发送消息
  connect(message) {
    this.connection.onConnect(() => {
      this.connection.write(message);
    });
  }
  // 监听端口函数
  onMessage(success, failure) {
    this.connection.onMessage((res) => {
      success(res)
    });
    this.connection.onError((err) => {
      failure(err);
    });
  }

  // 关闭搜索事件
  TCPclose() {
    setTimeout(() => {
      // 3S后,关闭socket
      this.connection.close(() => {
        console.log("TCP关闭");
      });
    }, 3000);
  }
}
const TCPSocket = new socket();
export default TCPSocket;

二、vue文件中使用TCP

javascript 复制代码
<template>
  <view class="zai-box">
        <view class="container">
          <text class="textName">{{ wifiSSID }}</text>
          <input type="text" placeholder="请输入WLAN密码" v-model="password" />
        </view>
        <button
          class="loginButton"
          :loading="loadingWIfi"
          :disabled="JSON.stringify(password.length) < 8 || loadingWIfi"
          @click="settiing"
        >
          {{ loadingWIfi ? "连接中" : "连接" }}
        </button>
  </view>
</template>

<script>
import TCP from "@/common/util/TCPSocket.js";
export default {
  data() {
    return {
      wifiSSID: "WIFI name",
      password: "",
      isFirst: true,
      wifiCountInterval: null,
      wifiCountDown: 0,
      loadingWIfi: false,
    };
  },
  onHide() {
    this.clearInterval();
  },
  methods: {
    settiing() {
      this.loadingWIfi = true;
      this.onConfirm();
    },
    onConfirm() {
      this.wifiCountDown = 60;
      this.startSMSTimer();
      if (this.isFirst) {
        // TCP实例创建
        // 连接端口
        TCP.establish();
        this.isFirst = false;
      }

      // 请求设备上报状态
      this.udpsend();
      // 开始监听
      TCP.onMessage(
        (res) => {
          if (!res) return;
          // 关闭TCP连接
          TCP.TCPclose();
          console.log(res) // 查看返回数据
          
        },
        (err) => {
          // debug
          console.log(err, "err");
        }
      );
    },
    udpsend() {
      const msgData = {
        event: "network",
        data: {
          ssid: this.wifiSSID,
          password: this.password,
        },
      };
      TCP.connect(JSON.stringify(msgData));
    },
    startSMSTimer() {
      this.wifiCountInterval = setInterval(() => {
        this.wifiCountDown--;
        if (this.wifiCountDown <= 0) {
          clearInterval(this.wifiCountInterval);
          this.wifiCountInterval = null;
          // 响应超过60秒后的操作
          // ........
        }
      }, 1000);
    },
    clearInterval() {
      if (this.wifiCountInterval) {
        clearInterval(this.wifiCountInterval);
        this.wifiCountInterval = null;
      }
    },
  },
};
</script>

<style scoped>
.zai-box {
  padding: 0;
  margin: 0;
}

.container {
  padding: 30rpx;
  margin: 0 0 20rpx;
  font-size: 28rpx;
  color: #20212b;
  background-color: #fff;
  text-align: left;
  font-weight: 400;
}

.loginButton {
  font-size: 36rpx;
  width: 690rpx;
  color: #fff;
  background-color: #00a0e9;
  border-radius: 44rpx;
  margin: 60rpx auto 0;
  border: none;
}

.loginButton[disabled] {
  color: #fff;
  background-color: #dfdfdf;
}

button::after {
  border: none;
}

.textName {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #20212b;
  margin-bottom: 30rpx;
}
</style>
相关推荐
毕设源码-邱学长8 小时前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue8 小时前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长13 小时前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
從南走到北13 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
canglingyue16 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
微三云-轩17 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
D1555408805819 小时前
电竞护航小程序成品搭建三角洲行动护航小程序开发俱乐部点单小程序成品游戏派单小程序定制
游戏·小程序
说私域1 天前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
wmsj05781 天前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序