小程序AP配网和AK配网教程(开源)

这篇具有很好参考价值的文章主要介绍了小程序AP配网和AK配网教程(开源)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序AP配网和AK配网教程(开源)

一、 Airkiss配网的实现方式

​ Airkiss配网我们采用插件的形式,非常简单方便。感谢半颗心脏大佬的开源插件。

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

更多关于关于微信airkiss说明,请查阅官网文档:点击我访问

2. 使用流程

  1. app.js或者app.json中引入插件
  2. 页面中引入插件
  3. 初始化WIFI 这里参考上一篇的微信小程序WIFI点击我访问
    (wx.startWifi,wx.getWifiList,wx.onGetWifiList)
    获取WIFI列表
  4. 选择所要连接WIFI,输入WIFI密码
  5. 点击确定按钮,执行AirKissSubmit()

2. 如何使用

  1. 原生的小程序中在app.js中添加

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

    uniapp中在app.json中添加

    {
        "pages": [],
        "plugins": {
            "airkiss": {
              "version": "1.1.0",
              "provider": "wx610ea582556c983e"
            }
         }
    ]
    
  2. 引入插件

    <script>
    	const airkiss = requirePlugin('airkiss');
    </scirpt>
    

​ 3. 方法使用

<script>
	const airkiss = requirePlugin('airkiss');
	//参考上一篇的博客
	import initWIFI from '@/common/WifiApi.js'
	export default {
		data() {
			return {
				showWIFIList:false,
				toggleDelay:false,
				status:1,
				wifiInfo:{
					ssid:'',
					bssid:'',
					password:'',
					is5G:''
				},
				wifiList:[],
				isIos:wx.getSystemInfoSync().platform == "ios"
			}
		},
		onLoad(){
		},
		onShow(){
			this.initMyWIFI()
			this.initInfo()
			this.initAnimation()
		},
		methods: {
			openWifiDialog(){
				if(this.isIos){
					uni.showToast({
						title: 'IOS请手动输入WIFI名称',
						icon: 'none',
					});
				}else{
					this.showWIFIList=true
				}
			},
			AirKissSubmit(){
				//这里最好加微信小程序判断账号密码是否为空,以及其长度和是否为5G频段
				airkiss.startAirkiss(this.wifiInfo.ssid, this.wifiInfo.password, function (res) {
					uni.hideLoading();
					switch (res.code) {
						case 0:
							uni.showModal({
								title: '初始化失败',
								content: res.result,
								showCancel: false,
								confirmText: "收到"
							});
							break;
						case 1:
							uni.showModal({
								title: '配网成功',
								content: '欢迎继续使用',
								showCancel: false,
								confirmText: "好的"
							});
							break;
						case 2:
							uni.showModal({
								title: '配网失败',
								content: '请检查密码是否正确',
								showCancel: false,
								confirmText: '收到',
							})
							break;
						default:
							break;
					}
				})
			},
			submit(){
				if (this.wifiInfo.ssid == '') {
					uni.showToast({
						title: '请先选择WIFI名字',
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '配网中',
				})
				if(this.status==2){
					this.AirKissSubmit();
				}else{
					this.SoftApSubmit();
				}
			},
			choseWifi(item){
				if(item.frequency> 4900){
					uni.showToast({
						title: '请选择2.4G的WIFI',
						icon: 'none',
					});
					return
				}else{
					this.wifiInfo.ssid = item.SSID
					this.wifiInfo.bssid = item.BSSID
					this.showWIFIList = false
				}
			},
			async initMyWIFI(){
				let res = await initWIFI()
				if(res.ok){
					this.wifiList = res.data
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			},
			
		}
	}
</script>

二、 SoftAP配网

1. softap简介

​ 设备备通过 softAP 方式创建一个 Wi-Fi 热点,手机连接该热点,再通过数据通道例如 TCP/UDP 通讯,将目标 Wi-Fi 路由器的 SSID/PSW 传递该设备,设备获取后,即可连接 Wi-Fi 路由器从而连接互联网。同时,为了对设备进行绑定,手机 App 可以利用该 TCP/UDP 数据通道,将后台提供的配网 Token 发送给设备,并由设备转发至物联网后台,依据 Token 可以进行设备绑定。

2. 使用流程

  1. 初始化WIFI 这里参考上一篇的微信小程序WIFI
    (wx.startWifi,wx.getWifiList,wx.onGetWifiList)

    获取WIFI列表

  2. 选择所要连接WIFI(设备创建的),输入WIFI密码

  3. 点击确定按钮,执行AirKissSubmit()

3. 如何使用

<script>
	const airkiss = requirePlugin('airkiss');
	import initWIFI from '@/common/WifiApi.js'
	export default {
		data() {
			return {
				showWIFIList:false,
				status:1,
				wifiInfo:{
					ssid:'',
					bssid:'',
					password:'',
					is5G:''
				},
				wifiList:[],
				isIos:wx.getSystemInfoSync().platform == "ios"
			}
		},
		onLoad(){
		},
		onShow(){
			this.initMyWIFI()
			this.initInfo()
			this.initAnimation()
		},
		methods: {
			openWifiDialog(){
				if(this.isIos){
					uni.showToast({
						title: 'IOS请手动输入WIFI名称',
						icon: 'none',
					});
				}else{
					this.showWIFIList=true
				}
			},
			initAnimation(){
				this.toggleDelay= true;
				setTimeout(()=>{
					this.toggleDelay= false
				}, 1000)
			},
			SoftApSubmit(){
				let that = this
				wx.connectWifi({
					//设备wifi名称
					SSID: 'www.test.cn',
					forceNewApi: true,
					//设备wifi密码
					password: 'www.test.cn',
					success (res) {
						const udp = wx.createUDPSocket();
						udp.bind();
						const msgData = {
							"ssid": that.wifiInfo.ssid,
							"password": that.wifiInfo.password
						}
						setTimeout(function () {
							udp.send({
								address: '192.168.4.1',
								port: 8266,
								message: JSON.stringify(msgData)
							});
						},500)
						udp.onMessage(function (res){
							//字符串转换,很重要
							let unit8Arr = new Uint8Array(res.message);
							let encodedString = String.fromCharCode.apply(null, unit8Arr);
							let message = decodeURIComponent(escape((encodedString)));
							let msgObj = JSON.parse(message)
							if(msgObj.RES==1){
								uni.hideLoading()
								uni.showModal({
									title: '配网成功',
									content: '欢迎继续使用',
									showCancel: false,
									confirmText: "好的"
								});
							}
						});

					},
					complete (res2) {
					}
				})
			},
			submit(){
				if (this.wifiInfo.ssid == '') {
					uni.showToast({
						title: '请先选择WIFI名字',
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '配网中',
				})
				if(this.status==2){
					this.AirKissSubmit();
				}else{
					this.SoftApSubmit();
				}
			},
			choseWifi(item){
				if(item.frequency> 4900){
					uni.showToast({
						title: '请选择2.4G的WIFI',
						icon: 'none',
					});
					return
				}else{
					this.wifiInfo.ssid = item.SSID
					this.wifiInfo.bssid = item.BSSID
					this.showWIFIList = false
				}
			},
			async initMyWIFI(){
				let res = await initWIFI()
				if(res.ok){
					this.wifiList = res.data
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}
			}
		}
	}
</script>

三、 小程序成品

源码:https://download.csdn.net/download/qq_35921773/87260637

小程序码:

小程序AP配网和AK配网教程(开源)

界面截图:

小程序AP配网和AK配网教程(开源)
小程序AP配网和AK配网教程(开源)
小程序AP配网和AK配网教程(开源)

四、 结束语

​ 持续了三年的疫情终于在这个月放开了,疫情的这三年有过压抑,有过彷徨,有过迷茫也有过感伤,但同时我也收获了许许多多。不知不觉的就看懂了之前百思不得其解的代码,收获了期许已久的爱情,工资也悄悄的上了一阶。

​ 配网这个小程序从去年就做了第一版,借助半颗心脏大神的开源demo。但是Airkiss配网太不稳定,所以最近新增了SoftAP配网。AP配网成功率基本上可以达到100%。非常稳定,因为也是站在巨人的肩膀上,所以项目就开源了。对这种UI风格(拟物风格)感情去的可以看看我的下一篇博客。个人是比较喜欢这种风格的ui,也是研究了很久。希望可以对大家有所帮助。文章来源地址https://www.toymoban.com/news/detail-422220.html

到了这里,关于小程序AP配网和AK配网教程(开源)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • ESP8266入门教程12:自动配网

    下载第三方库WiFiManager到lib文件夹  ​git clone https://github.com/tzapu/WiFiManager.git 第2行:包含WiFiManager库的头文件 第12行:创建WiFiManager对象 第14行:配置自动配网热点名称 1、编译并上传固件,然后使用手机连接名称叫做“ESP8266-Auto”的WIFI热点 2、点击【Configure WiFi】开始配网,

    2024年02月12日
    浏览(50)
  • ESP32系列教程之SmartConfig智能配网

    随着越来越多智能家居设备进入家庭,这些产品大部分都是要连接家庭的WiFi网络的。而WiFi网络的接入需要知道无线路由器的名称(SSID)和密码,绝大多数的智能家居是没有输入接口的,在设备中预先设置WiFi的名称和密码显然是不现实的,这样对于智能家居要连接的无线路由

    2024年02月16日
    浏览(42)
  • ESP8266教程4 — ESP8266 智能配网

            按照前面的教程演示,如果想要给esp8266模块联网,可以使用AT指令加上SSID和密码即可以让模块连接到无线网络上。         但是对于一个投向了市场的产品而言,消费者购买了你的一个可以联网的智能产品,当他们想要使用的时候总不能让消费者也使用AT指令

    2024年02月08日
    浏览(39)
  • 微信小程序Smartconfig配网实现

    基本原理 设备进入 Wi-Fi 混杂模式(promiscuous mode)以监听捕获周围的 Wi-Fi 报文。由于设备暂未联网,且 Wi-Fi 网络的数据帧已通过加密,设备无法获取 payload 的内容,但可以获取报文的某些特征数据,例如每个报文的长度。同时对于某些数据帧,例如 UDP 的广播包或多播包,其

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

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

    2023年04月19日
    浏览(48)
  • 小程序设计模式之状态模式实践-蓝牙配网_小程序 蓝牙状态模式

    */ disconnect() {} /** * 蓝牙连接成功 * @see UnConnectState */ connectSuccess() {} /** * 蓝牙连接失败 * @see UnConnectState */ connectFail() {} /** * 路由数据接收完成 * @see ReceivedState */ received() {} /** * 认证中 * @see AuthenticatingState */ authenticating() {} /** * 认证完成 * @see AuthenticatedState */ authenticated() {} /*

    2024年04月14日
    浏览(31)
  • IoT小程序框架快速体验:ASP-80智显面板设备配网与真机更新

    从环境搭建到程序开发,再到真机更新体验了 IoT小程序框架 的使用流程。其中,略过了程序开发过程,而是直接采用入门案例中的公板案例(模拟器测试)与智能闹钟案例(真机测试:ASP-80智显面板),程序开发主要是基于 Vue 的前端开发工作,因时间原因未能完成与云联动

    2023年04月13日
    浏览(31)
  • 商城小程序源码|开源小程序商城完整源码附视频搭建教程

    商城小程序是基于微信、抖音和头条等第三方平台为基础构建的社区电商购物系统。在本文中我们将讨论小程序商场源码的架构思路和基本方法。 源码及演示:xcxyms.top 商城小程序源码所要提供的功能 1、用户可以下单并购买商品。 2、用户将能够添加购物车。 3、用户便捷的

    2024年02月09日
    浏览(44)
  • 开源微信小程序源码新版及教程

    微信于2017年推出其小程序和小游戏平台。2019年3月,腾讯向全球开发者开放其小游戏平台。 源码合集:y.wxlbyx.icu 微信小程序源码的价值何在? 微信每月拥有超过 10 亿的活跃用户。它是整个国家的主要通信来源,使其成为中国排名第一的应用程序。用户与它保持社交和专业联

    2024年02月11日
    浏览(42)
  • 开源微信小程序源码+小程序游戏代码附搭建框架教程

    在本教程中,我们将使用Kaboom框架来开发一个微信小程序源码框架,类似于Atari 的Breakout和Taito的Arkanoid等经典小程序。 源码:y.wxlbyx.icu 在本教程结束时,您将能够: 使用 Kaboom 框架开发具有多个级别的微信小程序源码框架。 通过添加自己的通电和方块类型来构建基本小程序

    2024年02月06日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包