小程序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.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. 使用流程
初始化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 = 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，也是研究了很久。希望可以对大家有所帮助。
