WIFI设备配网之微信小程序开发AP配网

这篇具有很好参考价值的文章主要介绍了WIFI设备配网之微信小程序开发AP配网。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 介绍

传统的一键配网指的是smartconfig、airkiss这些通过已经连接的无线路由器发送广播给设备,在使用过程中兼容性差、不稳定,

  • 很多路由器不支持udp广播
  • 如果广播通过5G频段广播,设备无法收到
  • 路由器名称冲突会导致连接错误路由器等问题
  • 这两个协议都封装的比较多,不便于自己控制

根据微信官方提供API能力中的WiFi、UDP能力,可以用来开发Soft AP配网。加上良好的设计,可以实现一键配网的体验。同时成功率、适配率大大提升。

首先约定协议

2. 基础描述

WiFi设备进入配网状态,实际是进入AP模式,设备开放一个Wifi热点出来。手机通过连接上设备Wifi模块的热点,将路由器名字和密码直接发送给Wifi设备,同时从Wifi设备那边拿到MAC地址,然后与云端校验。

2.1. 各端交互流程图

此图来自腾讯云
WIFI设备配网之微信小程序开发AP配网

3. 操作过程

  1. 用户长按按钮,触发WiFi设备进入配网模式。设备在此模式下创建wifi热点(单纯AP模式),开启UDP服务(默认 IP 为192.168.4.1,端口为8266),使指示灯闪烁
  2. 小程序按照提示依次获取 Wi-Fi 列表,输入家里目标路由器的 SSID/PSW,再选择设备 softAP 热点的 SSID/PSW。
  3. 手机连接设备 softAP 热点成功后,小程序作为 UDP 客户端会连接 Wi-Fi 设备上面的 UDP 服务。
  4. 小程序给设备 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 错误描述 字符串
  1. 如果2秒之内,未收到设备回复,则重复步骤4,UDP 客户端重复发送目标 Wi-Fi 路由器的 SSID/PSW 。(如果重复发送5次,都没有收到回复,则认为配网失败,Wi-Fi 设备有异常)

  2. 如果步骤4收到设备回复,则说明设备端已收到 Wi-Fi 路由器的 SSID/PSW,正在连接 Wi-Fi 路由器,并连接物联网平台。此时小程序会提示手机也将连接 Wi-Fi 路由器,并轮询物联网后台,来确认配网及设备绑定上线成功。

  3. 设备端在成功连接 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. 加入业务实现

这里设计至少三个页面文章来源地址https://www.toymoban.com/news/detail-488608.html

  • 设备状态确认页
  • 家庭wifi信息输入页
  • 配网过程页

到了这里,关于WIFI设备配网之微信小程序开发AP配网的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序AP配网和AK配网教程(开源)

    ​ Airkiss配网我们采用插件的形式,非常简单方便。感谢半颗心脏大佬的开源插件。 1. Airkiss 简介 设备进入 Wi-Fi 混杂模式(promiscuous mode)以监听捕获周围的 Wi-Fi 报文。由于设备暂未联网,且 Wi-Fi 网络的数据帧已通过加密,设备无法获取 payload 的内容,但可以获取报文的某些

    2023年04月23日
    浏览(30)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(64)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(62)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(62)
  • 微信小程序开发入门与实战 ①(初始微信小程序)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 微信小程序专栏🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 🔗: 阅读文章 👉 微信小程序 (🔥)

    2024年02月09日
    浏览(111)
  • uniapp 小程序AP配网

    一、TCPSocket.js 封装TCP协议  二、vue文件中使用TCP

    2024年03月11日
    浏览(35)
  • 微信小程序Smartconfig配网实现

    基本原理 设备进入 Wi-Fi 混杂模式(promiscuous mode)以监听捕获周围的 Wi-Fi 报文。由于设备暂未联网,且 Wi-Fi 网络的数据帧已通过加密,设备无法获取 payload 的内容,但可以获取报文的某些特征数据,例如每个报文的长度。同时对于某些数据帧,例如 UDP 的广播包或多播包,其

    2024年02月09日
    浏览(35)
  • 微信小程序开发教程:项目一微信小程序入门 课后习题

    《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简述微信开发者工具中调试器功能。 2.请简述微信小程序开发环境的搭建过程。 六、编程题 1.请创建一个空白项目,在页面中输出Hello W

    2024年02月11日
    浏览(57)
  • 基于微信小程序的新闻资讯的小程序开发

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,新闻资讯被用户普遍使用,为方便用户能够可以随时进行新闻资讯的数据信息管理,特开发了基于新闻资讯的

    2024年02月03日
    浏览(52)
  • 微信小程序实战:智能水印相机小程序开发附源码

    一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。 主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取

    2024年02月09日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包