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
🍎大功告成文章来源:https://www.toymoban.com/news/detail-478052.html
偷偷地说:有问题都是硬件开发的问题,哈哈哈文章来源地址https://www.toymoban.com/news/detail-478052.html
到了这里,关于uni-app 微信小程序端-AirKiss一键配网的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!