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"
    }
  }

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

airtest 微信小程序 小程序 airkiss_uni-app

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

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

有关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
  1. 进入页面,获取当前所连接的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
  1. 点击某个按钮获取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
  1. 开始配网,将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

🍎大功告成