当前位置：首页 > news >正文

uniapp微信小程序：WIFI设备配网之TCP/UDP开发AP配网

news 来源：原创 2025/7/28 10:47:11

一、AP配网技术原理

1.1 配网模式选择

AP配网（SoftAP模式）是IoT设备配网成功率最高的方案之一

1、其核心原理：

设备端：启动AP模式（如SSID格式YC3000_XXXX，默认IP192.168.4.1）
手机端：直连设备热点后建立TCP/UDP通信，传输目标路由器的SSID/Password

1.2 协议交互流程

sequenceDiagram
小程序->>设备AP: 连接热点(SSID:YC3000_XXXX)
小程序->>设备AP: 建立TCP连接(IP:192.168.4.1:8266)
小程序->>设备AP: 发送AT+CJWAP指令
设备AP-->>小程序: 返回"Data Correct"或"Data Error"
小程序->>设备AP: 发送AT+RST指令重启
设备AP->>路由器: 连接目标WiFi

基础描述（大白话）

WiFi设备进入配网状态，实际是进入AP模式，设备开放一个Wifi热点出来。手机通过连接上设备Wifi模块的热点，将路由器名字和密码直接发送给Wifi设备，设备接收成功后，重启设备。

UDP配网逻辑是一样的，如果需要UDP通信，命令参考UDPSocket | 微信开放文档

二、操作过程

2.1 用户长按按钮，触发WiFi设备进入配网模式。设备在此模式下创建wifi热点（单纯AP模式），开启TCP服务（默认 IP 为192.168.4.1，端口为8266），使指示灯闪烁。
2.2 小程序按照提示依次获取 Wi-Fi 列表，输入目标路由器的 SSID/PSW，再选择设备 softAP 热点的 SSID/PSW。
2.3 手机连接设备 softAP 热点成功后，小程序作为 TCP 客户端会连接 Wi-Fi 设备上面的 TCP 服务。
2.4 小程序给设备 TCP 服务，发送目标 Wi-Fi 路由器的 SSID/PSW 。

2.5 设备接收成功后重启，配网成功

三、UniApp开发实现

3.1 开发环境配置

1.manifest.json声明权限：

"mp-weixin" : {"appid" : "******",//微信小程序appid"setting" : {"urlCheck" : false,"minified" : true},"usingComponents" : true,"permission" : {//必要，获取WiFi配置必须申请使用位置权限"scope.userLocation" : {"desc" : "用户使用小程序关联物联设备时，需要获取用户的所在位置区域"}},"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],},

2.设备热点连接（需用户手动操作引导）

uni.connectWifi({SSID: 'YC3000_XXXX', // 设备热点名称password: 'z111111',success: (res) => { console.log("连接成功，开始TCP通信") },fail: (err) => { console.log("连接失败", err) }
});

3.2 TCP核心通信模块

连接建立

    this.tcp = wx.createTCPSocket();console.log('运行')this.tcp.connect({address: '192.168.4.1',//默认 IP 为192.168.4.1port: 8266,//默认端口为8266});

指令发送

this.tcp.write('AT+CJWAP="WIFI账户名","WIFI密码"');

重启设备

this.tcp.write('AT+RST');

四、Demo页面源码

<template lang="html"><view class="sin-home"><view class="">设备配网</view><input v-model="form.name"  type="text" placeholder="网络1名称" placeholder-class="placeholder" ><input v-model="form.pwd"  type="text" placeholder="密码" placeholder-class="placeholder" ><view class="">获取授权</view><button @click="getconfirm()">getconfirm</button><view class="">获取wifi</view><button @click="getWIFI()">getWIFI</button><view class="">测试配网</view><button @click="startWifi()">startWifi</button><button @click="connectWifi()">connectWifi</button><button @click="connectTCP()">connectTCP</button><button @click="sendDataTCP()">sendDataTCP</button><button @click="sendRST()">sendRST</button><view>{{tips}}</view>{{tips2}}</view>
</template><script>export default {name: 'home',data() {return {form: {name: '',result: '',pwd: ''},tips:'暂无数据',tips2:'未连接',tcp:'',}},computed: {},watch: {},onLoad() {},async onReady() {},onShow() {},// 下拉刷新onPullDownRefresh:function(){},onPageScroll(e) {},methods: {getconfirm(){// 获取授权状态uni.getSetting({success: (res) => {const hasLocationAuth = res.authSetting['scope.userLocation']const hasAgreePrivacy = uni.getStorageSync('hasAgreePrivacy')// 如果隐私和位置权限都已授权，直接返回if (hasAgreePrivacy && hasLocationAuth) {resolve(true)return}// 处理隐私协议if (!hasAgreePrivacy) {uni.showModal({title: '位置信息授权',content: '获取WiFi列表需要位置权限，是否前往设置？',confirmText: '去设置',cancelText: '取消',success: (modalRes) => {if (modalRes.confirm) {// 打开设置页面uni.openSetting({success: (settingRes) => {resolve(!!settingRes.authSetting['scope.userLocation'])},fail: () => {resolve(false)}})} else {resolve(false)}},fail: () => {resolve(false)}})} },fail: () => {resolve(false)}})},getWIFI(){wx.getWifiList({success(res) {this.tips = JSON.stringify(res)wx.onGetWifiList(function(res) {console.log("获取wifi列表");console.log(res.wifiList,102); //在这里提取列表数据this.tips = JSON.stringify(res.wifiList)})},fail(res) {console.log(res)//报错的相关处理},})},// 开启wifistartWifi() {console.log('开始wifi接口');wx.startWifi({complete (res) {console.log(res)}})},// 链接wificonnectWifi() {uni.connectWifi({SSID: 'YC3000_XXXX', // 设备热点名称password: '',success: (res) => { console.log("连接成功，开始TCP通信") },fail: (err) => { console.log("连接失败", err) }});return},// 链接TCPconnectTCP() {this.tcp = wx.createTCPSocket();console.log('运行')this.tcp.connect({address: '192.168.4.1',port: 8266,});},// 发送命令-账号密码sendDataTCP() {this.tcp.write('AT+CJWAP="WIFI账户名","WIFI密码"');},// 发送命令-重启sendRST(){this.tcp.write('AT+RST');},}}
</script><style lang="scss">.sin-home{padding: 50px 20px;}
</style>

demo页面展示

五、注意

1、想要获取WiFi列表，必须授权获取位置信息。

2、开发者工具暂时不支持调试，必须使用真机进行开发

3、使用手机手动切换连接设备热点会出问题，请使用connectWifi()链接