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

吃橘子的季节呢

已于 2023-01-02 14:23:03 修改

阅读量3.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签：微信小程序 uni-app 小程序

于 2023-01-02 10:19:56 首次发布

本文链接：https://blog.youkuaiyun.com/w_Eternal/article/details/128518561

uni-app 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在HBuilderX中使用uni-app配合AirKiss插件进行微信小程序的Wi-Fi设备一键配网，详细阐述了AirKiss技术的工作原理，并提供了在uni-app中配置和编写配网页面代码的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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频段路由器

打开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

进入页面,获取当前所连接的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

点击某个按钮获取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

开始配网，将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