小程序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，也是研究了很久。希望可以对大家有所帮助。