uni-app 微信小程序端-AirKiss一键配网

uni-app 微信小程序端-AirKiss一键配网

发现网上很多关于微信小程序配网的文章都是微信小程序原生开发，uni-app少之又少。这篇文章就介绍一下怎么在HBuilder X使用airkiss配网插件。

一.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 路由器的相关信息并进行联网。

二.对项目进行配置

在微信开发者工具中需要使用到配网功能时🍊

新建项目之后，在app.js文件中添加下面代码

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

​ 而在uni-app开发中，如果我们在微信开发者工具中进行了配置，那本次配置的内容会在HBuilder X重新编译之后消失。

​ 所以我们需要在HBuilder X中进行相关配置。

​ 在进入项目之后，打开项目的manifest.json文件，在小程序特有相关中添加下面代码

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

在运行到微信开发者工具后，在控制台会提示你添加插件，然后按提示添加即可。

进行配网的代码就很简单，建议在小程序的条件编译中编写代码

三.配网页面代码常规流程

有关WIFI功能都需要用户打开GPS😆

​ 注意：请自行处理是否为2.4G频段路由器

1. 打开WIFI模块

   			// #ifdef MP-WEIXIN
   			wx.startWifi({
   				success(res) {
   					console.log(res)
   				},
   				fail(res) {
   					console.log(res)
   					uni.showToast({
   						title: '请打开WIFI',
   						icon: 'none',
   						duration: 1000
   					});
   
   				},
   			})
   			// #endif
   

2. 进入页面,获取当前所连接的WIFI

   				// #ifdef MP-WEIXIN
   				var that = this
   				wx.getConnectedWifi({
   					success(res) {
   						console.log(res)
   						that.BSSID = res.wifi.BSSID
   						that.WIFIName = res.wifi.SSID
   					},
   					fail(res) {
   						console.log(res)
   						//报错的相关处理
   					},
   				})
   				// #endif
   

3. 点击某个按钮获取WIFI列表

   				// #ifdef MP-WEIXIN
   				var that = this
   				wx.getWifiList({
   					success(res) {
   						console.log(res)
   						wx.onGetWifiList(function(res) {
   							console.log("获取wifi列表");
   							console.log(res.wifiList); //在这里提取列表数据
                               //通过遍历将WIFI名字存入集合，以便下卡框等组件使用
   							for (var i = 0; i < res.wifiList.length; i++) {
   								that.wifiList.push(res.wifiList[i].SSID)
   							}
   						})
   					},
   					fail(res) {
   						console.log(res)
   						//报错的相关处理
   					},
   				})
   				// #endif
   

4. 开始配网，将WIFI名字和WIFI密码传输给硬件

   				// #ifdef MP-WEIXIN
   				const airkiss = requirePlugin('airkiss');
   				if (this.wifiList.length == 0) {
   					this.SSID = this.WIFIName
   				} else {
   					this.SSID = this.wifiList[this.value]
   				}
   				if (this.SSID != '' && this.password != '') {
   					console.log(airkiss)
   					uni.showLoading({
   						title: '配网中请稍后..'
   					});
   					airkiss.startAirkiss(this.SSID, this.password, function(res) {
   						console.log(res)
   						switch (res.code) {
   							case 0:
   								uni.hideLoading();
   								uni.showModal({
   									title: '初始化失败',
   									content: res.result,
   									showCancel: false,
   									confirmText: '收到',
   								})
   								break;
   							case 1:
   								uni.hideLoading();
   								uni.showModal({
   									title: '配网成功',
   									content: '设备IP：' + res.ip + '\r\n 设备Mac：' + res.bssid,
   									showCancel: false,
   									confirmText: '好的',
   								})
   								break;
   							case 2:
   								uni.hideLoading();
   								uni.showModal({
   									title: '配网失败',
   									content: '请检查密码是否正确',
   									showCancel: false,
   									confirmText: '收到',
   								})
   								break;
   
   							default:
   								uni.hideLoading();
   								break;
   						}
   
   					})
   				} else {
   					uni.showToast({
   						title: '请选择WIFI并输入密码',
   						icon: 'none',
   						duration: 1000
   					});
   				}
   				// #endif
   

   🍎大功告成

   偷偷地说：有问题都是硬件开发的问题，哈哈哈