小程序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. 使用流程

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

2. 如何使用

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

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

uniapp中在app.json中添加

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

引入插件

<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.SSIDthis.wifiInfo.bssid = item.BSSIDthis.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. 使用流程

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

获取WIFI列表
选择所要连接WIFI（设备创建的），输入WIFI密码
点击确定按钮，执行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 = thiswx.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.SSIDthis.wifiInfo.bssid = item.BSSIDthis.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，也是研究了很久。希望可以对大家有所帮助。