uniapp 小程序AP配网

一、TCPSocket.js 封装TCP协议

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后，关闭socketthis.connection.close(() => {console.log("TCP关闭");});}, 3000);}
}
const TCPSocket = new socket();
export default TCPSocket;

 二、vue文件中使用TCP

<template><view class="zai-box"><view class="container"><text class="textName">{{ wifiSSID }}</text><input type="text" placeholder="请输入WLAN密码" v-model="password" /></view><buttonclass="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) => {// debugconsole.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>