uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网

news2025/4/25 20:04:10

一、AP配网技术原理

1.1 配网模式选择

AP配网(SoftAP模式)是IoT设备配网成功率最高的方案之一

1、其核心原理:

  • ​设备端​​:启动AP模式(如SSID格式YC3000_XXXX,默认IP192.168.4.1
  • ​手机端​​:直连设备热点后建立TCP/UDP通信,传输目标路由器的SSID/Password

1.2 协议交互流程

sequenceDiagram
小程序->>设备AP: 连接热点(SSID:YC3000_XXXX)
小程序->>设备AP: 建立TCP连接(IP:192.168.4.1:8266)
小程序->>设备AP: 发送AT+CJWAP指令
设备AP-->>小程序: 返回"Data Correct"或"Data Error"
小程序->>设备AP: 发送AT+RST指令重启
设备AP->>路由器: 连接目标WiFi
基础描述(大白话)

WiFi设备进入配网状态,实际是进入AP模式,设备开放一个Wifi热点出来。手机通过连接上设备Wifi模块的热点,将路由器名字和密码直接发送给Wifi设备,设备接收成功后,重启设备。

        UDP配网逻辑是一样的,如果需要UDP通信,命令参考UDPSocket | 微信开放文档

二、操作过程

2.1 用户长按按钮,触发WiFi设备进入配网模式。设备在此模式下创建wifi热点(单纯AP模式),开启TCP服务(默认 IP 为192.168.4.1,端口为8266),使指示灯闪烁。
2.2 小程序按照提示依次获取 Wi-Fi 列表,输入目标路由器的 SSID/PSW,再选择设备 softAP 热点的 SSID/PSW。
2.3 手机连接设备 softAP 热点成功后,小程序作为 TCP 客户端会连接 Wi-Fi 设备上面的 TCP 服务。
2.4 小程序给设备 TCP 服务,发送目标 Wi-Fi 路由器的 SSID/PSW 。 

2.5 设备接收成功后重启,配网成功 

三、UniApp开发实现

3.1 开发环境配置

        1.​​manifest.json声明权限​​:

"mp-weixin" : {
        "appid" : "******",//微信小程序appid
        "setting" : {
            "urlCheck" : false,
            "minified" : true
        },
        "usingComponents" : true,
        "permission" : {//必要,获取WiFi配置必须申请使用位置权限
            "scope.userLocation" : {
                "desc" : "用户使用小程序关联物联设备时,需要获取用户的所在位置区域"
            }
        },
        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
    },

        2.设备热点连接​​(需用户手动操作引导) 

uni.connectWifi({
    SSID: 'YC3000_XXXX', // 设备热点名称
    password: 'z111111',
    success: (res) => { console.log("连接成功,开始TCP通信") },
    fail: (err) => { console.log("连接失败", err) }
});

3.2 TCP核心通信模块

连接建立
    this.tcp = wx.createTCPSocket();
    console.log('运行')
    this.tcp.connect({
        address: '192.168.4.1',//默认 IP 为192.168.4.1
        port: 8266,//默认端口为8266
    });

指令发送 

this.tcp.write('AT+CJWAP="WIFI账户名","WIFI密码"');

重启设备 

this.tcp.write('AT+RST');

四、Demo页面源码

<template lang="html">
	<view class="sin-home">
		<view class="">
			设备配网
		</view>
		<input v-model="form.name"  type="text" placeholder="网络1名称" placeholder-class="placeholder" >
		<input v-model="form.pwd"  type="text" placeholder="密码" placeholder-class="placeholder" >
		<view class="">
			获取授权
		</view>
		<button @click="getconfirm()">getconfirm</button>
		<view class="">
			获取wifi
		</view>
		<button @click="getWIFI()">getWIFI</button>
		<view class="">
			测试配网
		</view>
		<button @click="startWifi()">startWifi</button>
		<button @click="connectWifi()">connectWifi</button>
		<button @click="connectTCP()">connectTCP</button>
		<button @click="sendDataTCP()">sendDataTCP</button>
		<button @click="sendRST()">sendRST</button>
		
		<view>
			{{tips}}
		</view>
		{{tips2}}
	</view>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				form: {
					name: '',
					result: '',
					pwd: ''
				},
				tips:'暂无数据',
				tips2:'未连接',
				tcp:'',
			}
		},
		computed: {
			
		},
		watch: {
			
		},
		onLoad() {
			
		},
		async onReady() {
			
		},
		onShow() {
			
		},
		// 下拉刷新
		onPullDownRefresh:function(){
			
		},
		onPageScroll(e) {
			
		},
		methods: {
			getconfirm(){
				// 获取授权状态
				uni.getSetting({
					success: (res) => {
						const hasLocationAuth = res.authSetting['scope.userLocation']
						const hasAgreePrivacy = uni.getStorageSync('hasAgreePrivacy')
						// 如果隐私和位置权限都已授权,直接返回
						if (hasAgreePrivacy && hasLocationAuth) {
							resolve(true)
							return
						}
		
						// 处理隐私协议
						if (!hasAgreePrivacy) {
							uni.showModal({
							  title: '位置信息授权',
							  content: '获取WiFi列表需要位置权限,是否前往设置?',
							  confirmText: '去设置',
							  cancelText: '取消',
							  success: (modalRes) => {
							    if (modalRes.confirm) {
							      // 打开设置页面
							      uni.openSetting({
							        success: (settingRes) => {
							          resolve(!!settingRes.authSetting['scope.userLocation'])
							        },
							        fail: () => {
							          resolve(false)
							        }
							      })
							    } else {
							      resolve(false)
							    }
							  },
							  fail: () => {
							    resolve(false)
							  }
							})
						} 
					},
					fail: () => {
						resolve(false)
					}
				})
			},
			getWIFI(){
				wx.getWifiList({
				success(res) {
					this.tips = JSON.stringify(res)
					wx.onGetWifiList(function(res) {
						console.log("获取wifi列表");
						console.log(res.wifiList,102); //在这里提取列表数据
						this.tips = JSON.stringify(res.wifiList)
					})
				},
				fail(res) {
					console.log(res)
					//报错的相关处理
				},
			})
			},
			// 开启wifi
				startWifi() {
					console.log('开始wifi接口');
					wx.startWifi({
						complete (res) {
							console.log(res)
						}
					})
				},
				// 链接wifi
				connectWifi() {
					uni.connectWifi({
					  SSID: 'YC3000_XXXX', // 设备热点名称
					  password: '',
					  success: (res) => { console.log("连接成功,开始TCP通信") },
					  fail: (err) => { console.log("连接失败", err) }
					});
					return
				},
				// 链接TCP
				connectTCP() {
					this.tcp = wx.createTCPSocket();
					console.log('运行')
					this.tcp.connect({
					  address: '192.168.4.1',
					  port: 8266,
					});
				},
				// 发送命令-账号密码
				sendDataTCP() {
					this.tcp.write('AT+CJWAP="WIFI账户名","WIFI密码"');
				},
				// 发送命令-重启
				sendRST(){
					this.tcp.write('AT+RST');
				},

		}
	}
</script>

<style lang="scss">
	.sin-home{
		padding: 50px 20px;
	}
</style>

demo页面展示

                

五、注意

1、想要获取WiFi列表,必须授权获取位置信息。

2、开发者工具暂时不支持 调试,必须使用真机进行开发

3、使用手机手动切换连接设备热点会出问题,请使用connectWifi()链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2342667.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

离线-DataX

基本介绍 DataX 是阿里云 DataWorks数据集成的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台&#xff0c;它是一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源…

第5课:对象与类——JS的“信息收纳盒”

生活从不会亏待每一个努力向上的人&#xff0c;愿你带着满腔热忱&#xff0c;无畏前行&#xff0c;用汗水书写青春的华章&#xff0c;用拼搏铸就人生的辉煌&#xff0c;今日的每一份付出&#xff0c;都将是未来成功的基石&#xff01; 欢迎来到「JavaScript 魔法学院」第 5 课…

xshell 登录验证失败解决

产生原因&#xff1a;检查防火墙、selinux 、网络模式、对外是否能ping外网 systemctl status firewalld cat /etc/selinux/config #disabled ping 223.5.5.5 ping 8.8.8.8 ping www.baidu.com 一、检查网络连接 确认虚拟机是否在线&#xff1a; 首先&#xff0c;确保虚…

AI 赋能 3D 创作!Tripo3D 全功能深度解析与实操教程

大家好&#xff0c;欢迎来到本期科技工具分享&#xff01; 今天要给大家带来一款革命性的 AI 3D 模型生成平台 ——Tripo3D。 无论你是游戏开发者、设计师&#xff0c;还是 3D 建模爱好者&#xff0c;只要想降低创作门槛、提升效率&#xff0c;这款工具都值得深入了解。 接下…

AI书籍大模型微调-基于亮数据获取垂直数据集

大模型的开源&#xff0c;使得每位小伙伴都能获得AI的加持&#xff0c;包括你可以通过AIGC完成工作总结&#xff0c;图片生成等。这种加持是通用性的&#xff0c;并不会对个人的工作带来定制的影响&#xff0c;因此各个行业都出现了垂直领域大模型。 垂直大模型是如何训练出来…

Kafka命令行的使用/Spark-Streaming核心编程(二)

Kafka命令行的使用 创建topic kafka-topics.sh --create --zookeeper node01:2181,node02:2181,node03:2181 --topic test1 --partitions 3 --replication-factor 3 分区数量&#xff0c;副本数量&#xff0c;都是必须的。 数据的形式&#xff1a; 主题名称-分区编号。 在…

2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)

机器学习入门 前言 说实话&#xff0c;机器学习想学好真心不易&#xff0c;很多时候都感觉自己学得云里雾里。以前一段时间自己为了完成毕业设计&#xff0c;在机器学习的理论部分并没有深究&#xff0c;仅仅通过TensorFlow框架力求快速实现模型。现在来看&#xff0c;很多时候…

SQL 时间转换的CONVERT()函数应用说明

目录 1.常用查询使用的几个 2.其他总结 1.常用查询使用的几个 SELECT CONVERT(VARCHAR, GETDATE(), 112) SELECT CONVERT(VARCHAR, GETDATE(), 113)SELECT CONVERT(VARCHAR, GETDATE()-1, 112) SELECT CONVERT(VARCHAR, GETDATE()-1, 113) 2.其他总结 SELECT CONVERT(VARCHA…

SystemWeaver详解:从入门到精通的深度实战指南

SystemWeaver详解&#xff1a;从入门到精通的深度实战指南 文章目录 SystemWeaver详解&#xff1a;从入门到精通的深度实战指南一、SystemWeaver环境搭建与基础配置1.1 多平台安装全流程 二、新手必学的十大核心操作2.1 项目创建全流程2.2 建模工具箱深度解析 三、需求工程与系…

windows中kafka4.0集群搭建

参考文献 Apache Kafka windows启动kafka4.0&#xff08;不再需要zookeeper&#xff09;_kafka压缩包-CSDN博客 Kafka 4.0 KRaft集群部署_kafka4.0集群部署-CSDN博客 正文 注意jdk需要17版本以上的 修改D:\software\kafka_2.13-4.0.0\node1\config\server.properties配置文…

【JavaWeb后端开发04】java操作数据库(JDBC + Mybatis+ yml格式)详解

文章目录 1. 前言2. JDBC2.1 介绍2.2 入门程序2.2.1 DataGrip2.2.2 在IDEA执行sql语句 2.3 查询数据案例2.3.1 需求2.3.2 准备工作2.3.3 AI代码实现2.3.4 代码剖析2.3.4.1 ResultSet2.3.4.2 预编译SQL2.3.4.2.1 SQL注入2.3.4.2.2 SQL注入解决2.3.4.2.3 性能更高 2.4 增删改数据…

postman 删除注销账号

一、删除账号 1.右上角找到 头像&#xff0c;view profile https://123456-6586950.postman.co/settings/me/account 二、找回账号 1.查看日志所在位置 三、postman更新后只剩下history 在 Postman 中&#xff0c;如果你发现更新后只剩下 History&#xff08;历史记录&…

Java发展史及版本详细说明

Java发展史及版本详细说明 1. Java 1.0&#xff08;1996年1月23日&#xff09; 核心功能&#xff1a; 首个正式版本&#xff0c;支持面向对象编程、垃圾回收、网络编程。包含基础类库&#xff08;java.lang、java.io、java.awt&#xff09;。支持Applet&#xff08;浏览器嵌入…

React 5 种组件提取思路与实践

在开发时,经常遇到一些高度重复但略有差异的 UI 模式,此时我们当然会把组件提取出去,但是组件提取的方式有很多,怎么根据不同场景选取合适的方式呢?尤其时在复杂的业务场景中,组件提取的思路影响着着代码的可维护性、可读性以及扩展性。本文将以一个[详情]组件为例,探讨…

[java八股文][Java基础面试篇]I/O

Java怎么实现网络IO高并发编程&#xff1f; 可以用 Java NIO &#xff0c;是一种同步非阻塞的I/O模型&#xff0c;也是I/O多路复用的基础。 传统的BIO里面socket.read()&#xff0c;如果TCP RecvBuffer里没有数据&#xff0c;函数会一直阻塞&#xff0c;直到收到数据&#xf…

数据结构-冒泡排序(Python)

目录 冒泡排序算法思想 冒泡排序算法步骤 冒泡排序代码实现 冒泡排序算法分析 冒泡排序算法思想 冒泡排序&#xff08;Bubble Sort&#xff09;基本思想&#xff1a; 经过多次迭代&#xff0c;通过相邻元素之间的比较与交换&#xff0c;使值较小的元素逐步从后面移到前面…

深入理解React高阶组件(HOC):原理、实现与应用实践

组件复用的艺术 在React应用开发中&#xff0c;随着项目规模的增长&#xff0c;组件逻辑的复用变得越来越重要。传统的组件复用方式如组件组合和props传递在某些复杂场景下显得力不从心。高阶组件&#xff08;Higher-Order Component&#xff0c;简称HOC&#xff09;作为React中…

Neo4j社区版在win下安装教程(非docker环境)

要在 Windows 10 上安装 Neo4j 社区版数据库并且不使用 Docker Desktop&#xff0c;你可以按照以下步骤操作&#xff1a; 1. 安装 Java Development Kit (JDK) Neo4j 需要 Java 运行环境。推荐安装 JDK 17 或 JDK 11&#xff08;请根据你下载的 Neo4j 版本查看具体的兼容性要…

如何在 Odoo 18 中配置自动化动作

如何在 Odoo 18 中配置自动化动作 Odoo是一款多功能的业务管理平台&#xff0c;旨在帮助各种规模的企业更高效地处理日常运营。凭借其涵盖销售、库存、客户关系管理&#xff08;CRM&#xff09;、会计和人力资源等领域的多样化模块&#xff0c;Odoo 简化了业务流程&#xff0c…

node.js 实战——(Http 知识点学习)

HTTP 又称为超文本传输协议 是一种基于TCP/IP的应用层通信协议&#xff1b;这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。协议中主要规定了两个方面的内容&#xff1a; 客户端&#xff1a;用来向服务器发送数据&#xff0c;可以被称之为请求报文服务端&am…