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

这篇具有很好参考价值的文章主要介绍了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"
    }
  }

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

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

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

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

有关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
    

    🍎大功告成

    偷偷地说:有问题都是硬件开发的问题,哈哈哈文章来源地址https://www.toymoban.com/news/detail-478052.html

到了这里,关于uni-app 微信小程序端-AirKiss一键配网的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app的优缺点;uniapp进行条件编译的两种方法;小程序端和H5的代表值

    目录 uni-app的优缺点 优点: 1.跨平台开发: 2.统一的开发语言: 3.高效的性能: 4.丰富的生态圈: 缺点: 1.平台差异性: 2.性能限制: 3.对新特性支持滞后: Uni-app条件编译 process.env.UNI_PLATFORM 变量: 使用 process.env.NODE_ENV 变量: Uni-app中的代表值 Uni-app 是一个跨平台的开发框架

    2024年02月08日
    浏览(138)
  • uni-app启动小程序篇(字节,微信)

    uni-app启动小程序篇 uni-app在字节工具小程序启动 1.1 在Hbuild X点击运行, 进入运行设置 1.2 进入运行设置后,设置字节小程序的运行位置   1.3 以上配置完成后,点击运行到小程序   1.4 启动成功后 复制该地址   1.5 打开字节小程序,选小程序,点击新建   1.6 进入后点击导入项目,将刚

    2024年02月11日
    浏览(46)
  • 图文手把手教程--ESP32 一键配网(Smartconfig、Airkiss)

    1)使用smart_config例程,使用乐鑫ESPTouch APP或者微信公众号配网。 2)修改smart_config例程,使ESP32复位后,如果已配过网,则不再进行配网,而是直接连接路由器上网,使贴近实际项目开发。 图文手把手教程(史上最强):windows下ESP32集成开发环境搭建和HelloWorld显示(乐鑫官方

    2023年04月19日
    浏览(55)
  • uni-app中使用微信一键登录

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 一、微信一键登录是什么? 二、使用步骤 1.在onLoad获取用户登录信息code 2.编写页面button按钮          3.根据pen-type=\\\"getPhoneNumber\\\"获取的用户信息传值给后端 总结 在uni-app中使用微信一键登录分析和

    2024年02月09日
    浏览(60)
  • 微信小程序开发学习笔记《17》uni-app框架-tabBar

    博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 运行如下的命令,基于master分支在本地创建tabBar子分支,用来开发和tabBar相关的功能: 在 pages目录中,创建首页(home)、分类(cate)、购物车(cart)、我的(my)这4个

    2024年02月20日
    浏览(72)
  • 1个月uni-app微信小程序开发上线实战专栏介绍

    《uni-app开发微信小程序1个月上线实战》,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍 :国服第二切图仔——资深前端开发工程师,具有六年以上的前端开发经验,曾在多家知名企业任职,CSDN、阿里云、华为云等平台优质创作者,擅长前端性能优化,

    2023年04月16日
    浏览(57)
  • 【uni-app】微信小程序开发 node_modules 模块丢失问题

     解决问题 重要的问题说三遍!!! 解决 HBuilderX 打包 uni-app 项目到微信小程序时,node_modules 文件夹丢失问题。 解决 HBuilderX 打包 uni-app 项目到微信小程序时,node_modules 文件夹丢失问题。 解决 HBuilderX 打包 uni-app 项目到微信小程序时,node_modules 文件夹丢失问题。 一、uni-a

    2024年02月11日
    浏览(56)
  • uni-app微信小程序开发自定义select下拉多选内容篇

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 技术框架公司的选型:uni-app + uni-ui + vue3 + vite4 + ts 需求分析:微信小程序-uni-ui内容 1、创建一个自定义的下拉,支持多个内容的同时多选 2、定义好出入参数,支持回显内容等 3、绑定

    2024年02月13日
    浏览(47)
  • uni-app+vue3+vite+微信小程序开发的问题点

    目录名称不能为api,否则会出现 ├F10: PM┤ [vite] getaddrinfo ENOTFOUND rivtrust.jz-xxx.xyz ,修改为_api; vue3的全局变量挂载 或者 全局变量的引入: 或者 axios在微信小程序上使用的问题: 安装模块 出现adapter is not a function的解决方法 需要axios自定义适配器配置 整体代码request.js: un

    2024年02月13日
    浏览(80)
  • 微信小程序一键登录功能,使用uni-app和springboot(JWT鉴权)

    目录 概述 微信登录接口说明  关于获取微信用户的信息 前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml  配置文件:Pom.xml  类:WeChatModel    类:WeChatSessionModel  类:UserInfoController 业务层实现类:UserInfoServiceImpl 工具类:JWTUtils 拦截器配置-自定义拦截器

    2024年02月09日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包