程序员经验分享-hwhale

小程序AP配网和AK配网教程（开源）

2023-11-09

小程序AP配网和AK配网教程（开源）

一、 Airkiss配网的实现方式

​ Airkiss配网我们采用插件的形式，非常简单方便。感谢半颗心脏大佬的开源插件。

1. Airkiss 简介

AirKiss是微信硬件平台为Wi-Fi设备提供的微信配网、局域网发现和局域网通讯的技术。开发者若要实现通过微信客户端对Wi-Fi设备配网、通过微信客户端在局域网发现Wi-Fi设备，或者把微信客户端内的音乐、图片、文件等消息通过局域网发送至Wi-Fi设备。

设备进入 Wi-Fi 混杂模式（promiscuous mode）以监听捕获周围的 Wi-Fi 报文。由于设备暂未联网，且 Wi-Fi 网络的数据帧已通过加密，设备无法获取 payload 的内容，但可以获取报文的某些特征数据，例如每个报文的长度，同时对于某些数据帧；例如 UDP 的广播包或多播包，其报文的帧头结构比较固定，较容易识别。

此时在手机 App 或者小程序侧，即可通过发送 UDP 的广播包或多播包，并利用报文的特征，例如长度变化进行编码。

将目标 Wi-Fi 路由器的 SSID/PSW 字符以约定的编码方式发送出去，设备端在捕获到 UDP 报文后，按约定的方式进行解码，即可得到目标 Wi-Fi 路由器的相关信息并进行联网。

更多关于关于微信airkiss说明，请查阅官网文档：点击我访问

2. 使用流程

  1. app.js或者app.json中引入插件
  2. 页面中引入插件
  3. 初始化WIFI 这里参考上一篇的微信小程序WIFI点击我访问
    （wx.startWifi,wx.getWifiList,wx.onGetWifiList）
    获取WIFI列表
  4. 选择所要连接WIFI，输入WIFI密码
  5. 点击确定按钮，执行AirKissSubmit()

2. 如何使用

  1. 原生的小程序中在app.js中添加

    "plugins": {
    "airkiss": {
      "version": "1.1.0",
      "provider": "wx610ea582556c983e"
    }
  }

    uniapp中在app.json中添加

    {
    "pages": [],
    "plugins": {
        "airkiss": {
          "version": "1.1.0",
          "provider": "wx610ea582556c983e"
        }
     }
]

  2. 引入插件

    <script>
	const airkiss = requirePlugin('airkiss');
</scirpt>

​ 3. 方法使用

<script>
	const airkiss = requirePlugin('airkiss');
	//参考上一篇的博客
	import initWIFI from '@/common/WifiApi.js'
	export default {
		data() {
			return {
				showWIFIList:false,
				toggleDelay:false,
				status:1,
				wifiInfo:{
					ssid:'',
					bssid:'',
					password:'',
					is5G:''
				},
				wifiList:[],
				isIos:wx.getSystemInfoSync().platform == "ios"
			}
		},
		onLoad(){
		},
		onShow(){
			this.initMyWIFI()
			this.initInfo()
			this.initAnimation()
		},
		methods: {
			openWifiDialog(){
				if(this.isIos){
					uni.showToast({
						title: 'IOS请手动输入WIFI名称',
						icon: 'none',
					});
				}else{
					this.showWIFIList=true
				}
			},
			AirKissSubmit(){
				//这里最好加微信小程序判断账号密码是否为空，以及其长度和是否为5G频段
				airkiss.startAirkiss(this.wifiInfo.ssid, this.wifiInfo.password, function (res) {
					uni.hideLoading();
					switch (res.code) {
						case 0:
							uni.showModal({
								title: '初始化失败',
								content: res.result,
								showCancel: false,
								confirmText: "收到"
							});
							break;
						case 1:
							uni.showModal({
								title: '配网成功',
								content: '欢迎继续使用',
								showCancel: false,
								confirmText: "好的"
							});
							break;
						case 2:
							uni.showModal({
								title: '配网失败',
								content: '请检查密码是否正确',
								showCancel: false,
								confirmText: '收到',
							})
							break;
						default:
							break;
					}
				})
			},
			submit(){
				if (this.wifiInfo.ssid == '') {
					uni.showToast({
						title: '请先选择WIFI名字',
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '配网中',
				})
				if(this.status==2){
					this.AirKissSubmit();
				}else{
					this.SoftApSubmit();
				}
			},
			choseWifi(item){
				if(item.frequency> 4900){
					uni.showToast({
						title: '请选择2.4G的WIFI',
						icon: 'none',
					});
					return
				}else{
					this.wifiInfo.ssid = item.SSID
					this.wifiInfo.bssid = item.BSSID
					this.showWIFIList = false
				}
			},
			async initMyWIFI(){
				let res = await initWIFI()
				if(res.ok){
					this.wifiList = res.data
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			},
			
		}
	}
</script>

二、 SoftAP配网

1. softap简介

​ 设备备通过 softAP 方式创建一个 Wi-Fi 热点，手机连接该热点，再通过数据通道例如 TCP/UDP 通讯，将目标 Wi-Fi 路由器的 SSID/PSW 传递该设备，设备获取后，即可连接 Wi-Fi 路由器从而连接互联网。同时，为了对设备进行绑定，手机 App 可以利用该 TCP/UDP 数据通道，将后台提供的配网 Token 发送给设备，并由设备转发至物联网后台，依据 Token 可以进行设备绑定。

2. 使用流程

  1. 初始化WIFI 这里参考上一篇的微信小程序WIFI
    （wx.startWifi,wx.getWifiList,wx.onGetWifiList）

    获取WIFI列表

  2. 选择所要连接WIFI（设备创建的），输入WIFI密码

  3. 点击确定按钮，执行AirKissSubmit()

3. 如何使用

<script>
	const airkiss = requirePlugin('airkiss');
	import initWIFI from '@/common/WifiApi.js'
	export default {
		data() {
			return {
				showWIFIList:false,
				status:1,
				wifiInfo:{
					ssid:'',
					bssid:'',
					password:'',
					is5G:''
				},
				wifiList:[],
				isIos:wx.getSystemInfoSync().platform == "ios"
			}
		},
		onLoad(){
		},
		onShow(){
			this.initMyWIFI()
			this.initInfo()
			this.initAnimation()
		},
		methods: {
			openWifiDialog(){
				if(this.isIos){
					uni.showToast({
						title: 'IOS请手动输入WIFI名称',
						icon: 'none',
					});
				}else{
					this.showWIFIList=true
				}
			},
			initAnimation(){
				this.toggleDelay= true;
				setTimeout(()=>{
					this.toggleDelay= false
				}, 1000)
			},
			SoftApSubmit(){
				let that = this
				wx.connectWifi({
					//设备wifi名称
					SSID: 'www.test.cn',
					forceNewApi: true,
					//设备wifi密码
					password: 'www.test.cn',
					success (res) {
						const udp = wx.createUDPSocket();
						udp.bind();
						const msgData = {
							"ssid": that.wifiInfo.ssid,
							"password": that.wifiInfo.password
						}
						setTimeout(function () {
							udp.send({
								address: '192.168.4.1',
								port: 8266,
								message: JSON.stringify(msgData)
							});
						},500)
						udp.onMessage(function (res){
							//字符串转换，很重要
							let unit8Arr = new Uint8Array(res.message);
							let encodedString = String.fromCharCode.apply(null, unit8Arr);
							let message = decodeURIComponent(escape((encodedString)));
							let msgObj = JSON.parse(message)
							if(msgObj.RES==1){
								uni.hideLoading()
								uni.showModal({
									title: '配网成功',
									content: '欢迎继续使用',
									showCancel: false,
									confirmText: "好的"
								});
							}
						});

					},
					complete (res2) {
					}
				})
			},
			submit(){
				if (this.wifiInfo.ssid == '') {
					uni.showToast({
						title: '请先选择WIFI名字',
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '配网中',
				})
				if(this.status==2){
					this.AirKissSubmit();
				}else{
					this.SoftApSubmit();
				}
			},
			choseWifi(item){
				if(item.frequency> 4900){
					uni.showToast({
						title: '请选择2.4G的WIFI',
						icon: 'none',
					});
					return
				}else{
					this.wifiInfo.ssid = item.SSID
					this.wifiInfo.bssid = item.BSSID
					this.showWIFIList = false
				}
			},
			async initMyWIFI(){
				let res = await initWIFI()
				if(res.ok){
					this.wifiList = res.data
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			}
		}
	}
</script>

三、 小程序成品

源码：https://download.csdn.net/download/qq_35921773/87260637

小程序码：

在这里插入图片描述

界面截图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、 结束语

​ 持续了三年的疫情终于在这个月放开了，疫情的这三年有过压抑，有过彷徨，有过迷茫也有过感伤，但同时我也收获了许许多多。不知不觉的就看懂了之前百思不得其解的代码，收获了期许已久的爱情，工资也悄悄的上了一阶。

​ 配网这个小程序从去年就做了第一版，借助半颗心脏大神的开源demo。但是Airkiss配网太不稳定，所以最近新增了SoftAP配网。AP配网成功率基本上可以达到100%。非常稳定，因为也是站在巨人的肩膀上，所以项目就开源了。对这种UI风格（拟物风格）感情去的可以看看我的下一篇博客。个人是比较喜欢这种风格的ui，也是研究了很久。希望可以对大家有所帮助。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信配网

Airkiss配网源码

SoftAP配网源码

拟物小程序开源

配网小程序开源

小程序AP配网和AK配网教程（开源） 的相关文章

随机推荐

  • msrcr图像增强算法 matlab,图像处理之Retinex增强算法(SSR、MSR、MSRCR)

    视网膜 大脑皮层 Retinex 理论认为世界是无色的 人眼看到的世界是光与物质相互作用的结果 也就是说 映射到人眼中的图像和光的长波 R 中波 G 短波 B 以及物体的反射性质有关 其中I是人眼中看到的图像 R是物体的反射分量 L是环境光

  • BugkuCTF-MISC题粗心的佳佳

    下载得到3个文件 预期解法应该是根据图片写出脚本 把混淆过的二维码恢复 我发现照着password png也能看出原本的二维码大概长啥样 手动修复得到一张二维码 扫码得到IXE1VDYmMjk base64解码得到压缩包密码 q5T6 29

  • GUI Guider设计UI界面移植到STM32

    GUI Guider设计UI界面移植到STM32 一 什么是GUI Guider 什么是 GUI Guider GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具 可以通过拖放控件的方式设计 LVGL GUI 页面

  • java热部署

    Class forName和ClassLoader loadClass 简书 Eclipse安装热部署热加载插件JRebel 免费版 idea也可用 that summer CSDN博客 Eclipse中使用JRebel实现项目热部署 Ma

  • 【自定义表单】自定义表单设计

    1 后端设计1 diy field pool 字段池 我们定义好的字段类型 diy form 表单表 记录用户自定义的表单 diy form field 表单字段表 记录某张表单中有哪些字段 diy form entity 表单实例表 记录

  • XP下VMware模拟Ubuntu不能使用共享文件夹问题解决vmhgfs

    目前XP下使用VMware workstation 6 0 2虚拟ubuntu后 即使安装了VMware Tools并设置了共享文件夹后 虽然可以看到 mnt hgfs 但仍旧不能访问共享目录的解决方案 问题 主要问题是在安装vmware

  • 向较长的字符串中的指定位置添加指定元素

    今天抓取数据的时候获取到多个url中的翻页数据 但是单个url又需要进行翻页的操作 因此就需要在url中指定的位置添加新的参数用于数据的翻页 如何在指定位置添加指定的参数呢 下面通过一个例子来说明 url https list tmall

  • Qt线程之间通过signal和slot传递数据

    Qt线程之间通过signal和slot传递数据 这种方法主要是为了设置自己定义的数据类型 在不同的线程之间进行通信 如果自己定义的数据类型未经处理之间传递会报如下错误 QObject connect Cannot queue argumen

  • OpenSea进阶之路：成立4年估值超百亿美元

    来源 Odaily星球日报 作者 Jeff Kauflin 2022 新年伊始 加密行业迎来的第一个好消息就是 Opensea 这个 NFT市场的王者在 1 月 5 日宣布完成了一笔高达 3 亿美元的 C 轮融资 估值更是飙升到 130 亿

  • python网页爬虫xpath应用

    一 认识xpath和xml数据 lxml是Python基于xpath做数据解析的工具 from lxml import etree 1 xpath数据解析 通过提供标签路径来获取标签 xpath指的就是标签的路径 1 xpath基本感念 树

  • gin 四.响应数据

    响应数据 一 响应数据 二 c Writer Header Set处理响应头 一 响应数据 在gin中请求接口响应时 实际可以响应会html text plain json和xml等 比如前面gin基础示例中 接口响应时可以使用 gin C

  • 关键字 package、import的使用

    一 package 关键字的使用 为了更好的实现项目中类型的管理 提供了包的概念 使用package声明类或接口所属的包 声明在源文件的首行 包 术语标识符 遵循标识符的命名规则 规范 xxxyyyzzz 见名知意 每 一次 就代表一层文件

  • 安卓页面去掉顶部标题

    我的个人博客 逐步前行STEP 将AndroidManifest xml文件中的

  • 【Visual Studio 2015】安全开发生命周期（SDL）检查

    有的时候写的代码明明没有什么问题就是编译不过 我就觉得奇怪了 我是编译通过的代码 怎么就有问题呢 在VS2015运行 还真是有问题 看错误提示 是VS将这个函数的使用当做错误对待了 在以前的VS版本中 检测并不严格 对于很多警告 我们程序员

  • 微信小程序 view内英文数字不换行

    view标签英文不换行 最近遇到一个bug 在一个text标签内 如果纯粹的中文字符那是可以换行的 如果text标签内出现了英文或者数字的组合 这个标签换行bug了 溢出了 OMG 我的天啊 赶紧去翻翻html5中遇到这样的问题怎么解决 果

  • cobaltstrike流量特征

    cobaltstrike流量特征 cobaltstrike是红队攻防中常用的工具 用以连接目标和cobaltstrike服务器 方便红队进一步对目标渗透 在双方通信过程中cobaltstrike流量具有很明显的特征 1 http 请求 ht

  • winre drv分区干嘛用的_用U盘PE做传统启动方式的系统！

    U盘做系统教程 1 需要一个空闲U盘一个容量最少8G的 然后需要下载一个系统的镜像 可以去网上查找 2 下载U盘PE系统 链接 http download itiankong net data 3 easyu EasyU 3 5 2019

  • weblogic日志路径

    weblogic日志路径 C bea user projects domains base domain servers AdminServer logs 访问日志请求 access log 管理日志 AdminServer log 域日志

  • dataframe在最后新增一行_padans给Dataframe插入新增列、行

    import pandas as pd df1 pd DataFrame Snow M 22 Tyrion M 32 Sansa F 18 Arya F 14 columns name gender age 新增一列相同的数据 df1 ad

  • 小程序AP配网和AK配网教程（开源）

    小程序AP配网和AK配网教程 开源 一 Airkiss配网的实现方式 Airkiss配网我们采用插件的形式 非常简单方便 感谢半颗心脏大佬的开源插件 1 Airkiss 简介 AirKiss是微信硬件平台为Wi Fi设备提供的微信配网 局域

热门标签