配网小程序(Airkiss配网和SoftAP配网)源码

# 小程序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说明，请查阅官网文档：[点击我访问](https://iot.weixin.qq.com/wiki/new/index.html?page=4-1-1) ### 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(); }el