admin管理员组文章数量:1530909
1. 介绍
传统的一键配网指的是smartconfig、airkiss这些通过已经连接的无线路由器发送广播给设备，在使用过程中兼容性差、不稳定，
- 很多路由器不支持udp广播
- 如果广播通过5G频段广播，设备无法收到
- 路由器名称冲突会导致连接错误路由器等问题
- 这两个协议都封装的比较多，不便于自己控制
根据微信官方提供API能力中的WiFi、UDP能力，可以用来开发Soft AP配网。加上良好的设计，可以实现一键配网的体验。同时成功率、适配率大大提升。
demo仓库地址：https://gitee/azeal/wifi-config-dev-board-user
2. 基础描述
WiFi设备进入配网状态，实际是进入AP模式，设备开放一个Wifi热点出来。手机通过连接上设备Wifi模块的热点，将路由器名字和密码直接发送给Wifi设备，同时从Wifi设备那边拿到MAC地址，然后与云端校验。
2.1. 各端交互流程图
此图来自腾讯云
3. 操作过程
- 用户长按按钮，触发WiFi设备进入配网模式。设备在此模式下创建wifi热点（单纯AP模式），开启UDP服务（默认 IP 为192.168.4.1，端口为8266），使指示灯闪烁
- 小程序按照提示依次获取 Wi-Fi 列表，输入家里目标路由器的 SSID/PSW，再选择设备 softAP 热点的 SSID/PSW。
- 手机连接设备 softAP 热点成功后，小程序作为 UDP 客户端会连接 Wi-Fi 设备上面的 UDP 服务。
- 小程序给设备 UDP 服务，发送目标 Wi-Fi 路由器的 SSID/PSW 以及配网 Token，JSON 格式为：
{
"cmdType":1,
"ssid":"Home-WiFi",
"password":"abcd1234"
}
| 属性名 | 属性描述 | 类型 |
|---|---|---|
| cmdType | 消息类型，手机向设备发送为1 | 整数 |
| ssid | Wi-Fi 的 SSID | 字符串 |
| password | Wi-Fi 的 密码 | 字符串 |
发送完成后，等待设备 UDP 回复设备信息及配网协议版本号：
{
"cmdType":2,
"mac":"xxxxxxxx",
"protoVersion":"2.0"
}
| 属性名 | 属性描述 | 类型 |
|---|---|---|
| cmdType | 消息类型，设备手机发送正常响应为2 | 整数 |
| mac | 设备的mac，无分隔符 | 字符串 |
| 固件版本 | 固件的版本 | 字符串 |
如果配网过程中出错，需要退出配网操作，那么响应
{
"cmdType":3,
"log":"错误描述"
}
| 属性名 | 属性描述 | 类型 |
|---|---|---|
| cmdType | 消息类型，设备手机发送异常响应为3 | 整数 |
| log | 错误描述 | 字符串 |
-
如果2秒之内，未收到设备回复，则重复步骤4，UDP 客户端重复发送目标 Wi-Fi 路由器的 SSID/PSW 。（如果重复发送5次，都没有收到回复，则认为配网失败，Wi-Fi 设备有异常）
-
如果步骤4收到设备回复，则说明设备端已收到 Wi-Fi 路由器的 SSID/PSW，正在连接 Wi-Fi 路由器，并连接物联网平台。此时小程序会提示手机也将连接 Wi-Fi 路由器，并轮询物联网后台，来确认配网及设备绑定上线成功。
-
设备端在成功连接 Wi-Fi 路由器后，通过 MQTT 连接物联网后台。如果连接不上，那么重新进入配网模式，指示灯再次闪烁
4. 设备热点信息规范
| 项 | 描述 |
|---|---|
| SSID | 前缀"z_"加mac地址，如z_483FDA5319D0 |
| 密码 | 固定为z111111 |
设备端可以记录配网日志，如果配网或连接失败，可以在下次连接时向手机端反馈
{
"cmdType":31,
"log":"错误描述"
}
| 属性名 | 属性描述 | 类型 |
|---|---|---|
| cmdType | 消息类型，设备手机发送异常响，前一次日志类型为31 | 整数 |
| log | 错误描述 | 字符串 |
5. 实现过程
第一步，先分按钮验证
startWifi() {
console.log('开始wifi接口');
wx.startWifi({
complete (res) {
console.log(res)
}
})
},
connectWifi() {
// 连接wifi
wx.connectWifi({
SSID: 'TEST',
forceNewApi: true,
password: 'test1234',
complete (res2) {
console.log(res2)
}
})
},
connectUDP() {
// 建立udp连接
debugger
this.udp = wx.createUDPSocket()
if(this.udp === null){
console.log('暂不支持')
return ;
}
this.udp.connect({
address: '192.168.4.1',
port: 8266
})
this.udp.bind()
this.udp.onListening(function(res4){
console.log('4监听中...')
console.log(res4)
})
this.udp.onMessage(res3 => {
console.log('3监听中...')
console.log(res3);
})
},
sendDataUDP() {
const msgData = {
"cmdType":1,
"ssid":"31",
"password":"fff316"
}
this.udp.send({
address: '192.168.4.1',
port: 8266,
message: JSON.stringify(msgData)
})
},
- 测试按钮
<u-button @click="startWifi()">1</u-button>
<u-button @click="connectWifi()">2</u-button>
<u-button @click="connectUDP()">3</u-button>
<u-button @click="sendDataUDP()">4</u-button>
5. 加入业务实现
这里设计至少三个页面
- 设备状态确认页
- 家庭wifi信息输入页
- 配网过程页
版权声明：本文标题：WIFI设备配网之uniapp微信小程序UDP开发AP配网 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726809143a1085329.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论