uniapp WIFI 智能配网

uniapp yekong

虽然我现在也没有明白配网是啥意思,但是功能上确实是满足了客户的需要,所以记录一下。

使用到的插件

WIFI 智能配网 支持 ESPTouch、AirKiss
这是一个收费的插件

功能代码

<template>
	<view class="flex-col container">
		<view class="flex-col group_1">
			<view class="shuruk groups">
				<input class="uinput" type="text" @input="onInput" data-id="name" :value="name" placeholder="WIFI名称" />
				<input class="uinput" type="text" @input="onInput" data-id="pwd" :value="pwd" placeholder="WIFI 密码" />
			</view>
			<view>
				<button @click="getWiFiName">获取WIFI 名称</button>
				<button @click="getNetWorkType">获取网络类型</button>
				<button @click="getBSSID">获取BSSID</button>
				<button @click="linkAirKiss">AirKiss配网</button>
				<button @click="cancelAirKiss">取消AirKiss配网</button>
				<button @click="linkEsptouchM">EspTouch Multicast配网</button>
				<button @click="linkEsptouchB">EspTouch Broadcast配网</button>
				<button @click="cancelEsptouch">取消EspTouch配网</button>
			</view>

			<view class="">
				{{result}}
			</view>
			<!-- 			<view class="center-text-wrapper flex-col items-center text-wrapper">
				<text>开始</text>
			</view> -->

		</view>
	</view>
</template>

<script>
	const gbWiFi = uni.requireNativePlugin('Googbuild-WIFI');
	const {
		inputData
	} = require('@/common/dataTool.js');
	export default {
		data() {
			return {
				result: '',
				pwd: '',
				name: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getLocation()

		},
		mounted() {

		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => { //授权成功后,调用
						console.log(res, '当前位置的经纬度')
						var latitude = res.latitude
						var longitude = res.longitude
						var speed = res.speed
						var accuracy = res.accuracy;
					},
					fail(err) { //授权失败后,调用,可以在这儿调用下面的例子 再次进行授权
						console.log(err, 'eee')
						uni.showToast({
							title: '授权未通过',
							icon: 'none'
						})
					}
				});
			},
			onInput(e) {
				inputData(e, this);
			},
			getWiFiName() {
				this.result = "命令已发送";
				gbWiFi.getWiFiName(callback => {
					this.name = callback.ssid.replace(new RegExp(/"\\/g), '"');
					this.result = JSON.stringify(callback);
				});
			},
			getNetWorkType() {
				this.result = "命令已发送";
				gbWiFi.getNetWorkType(callback => {
					switch (callback.type) {
						case 1:
							callback.type = 'wap网络';
							break;
						case 2:
							callback.type = '2G网络';
							break;
						case 3:
							callback.type = '3G网络';
							break;
						case 4:
							callback.type = '4G网络';
							break;
						case 5:
							callback.type = '5G网络'; // 预留值
							break;
						case 6:
							callback.type = 'WiFi 2.4G网段';
							break;
						case 7:
							callback.type = '5G WiFi';
							break;
						default:
							callback.type = '没有网络';
							break;
					}

					this.result = JSON.stringify(callback);
				});
			},
			getBSSID() {
				this.result = "命令已发送";
				gbWiFi.getBSSID(callback => {
					this.result = JSON.stringify(callback);
				});
			},
			linkAirKiss() {
				this.result = "命令已发送";
				gbWiFi.linkAirKiss({
						ssid: this.name,
						pwd: this.pwd
					},
					callback => {
						// this.result = callback;
						this.result = JSON.stringify(callback);
						console.log(callback)
					});
			},
			cancelAirKiss() {
				this.result = "命令已发送";
				gbWiFi.cancelAirKiss(callback => {
					console.log(callback)
					this.result = JSON.stringify(callback);
				});
			},
			linkEsptouchM() {
				this._linkEsptouch('Multicast');
			},
			linkEsptouchB() {
				this._linkEsptouch('Broadcast');
			},
			_linkEsptouch(mode) {
				this.result = "命令已发送";
				gbWiFi.linkEsptouch({
						ssid: this.name,
						pwd: this.pwd,
						model: mode
					},
					callback => {
						this.result = JSON.stringify(callback);
					});
			},
			cancelEsptouch() {
				this.result = "命令已发送";
				gbWiFi.cancelEsptouch(callback => {
					this.result = JSON.stringify(callback);
				});
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		background-color: rgb(239, 239, 239);
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.tab-bar {
			padding: 24rpx 41rpx 18rpx 47rpx;
			background-color: rgb(255, 255, 255);
			border-left: solid 2rpx rgb(231, 231, 231);
			border-right: solid 2rpx rgb(231, 231, 231);
			border-top: solid 2rpx rgb(231, 231, 231);
			border-bottom: solid 2rpx rgb(231, 231, 231);

			.group_2 {
				color: rgb(0, 172, 167);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 59rpx;
				height: 84rpx;

				.text_5 {
					margin-top: 8rpx;
				}
			}

			.group_3 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 21rpx;
				white-space: nowrap;
				width: 60rpx;
				height: 84rpx;

				.text_6 {
					margin-top: 9rpx;
				}
			}

			.group_4 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 60rpx;
				height: 84rpx;

				.text_7 {
					margin-top: 8rpx;
				}
			}

			.group_5 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 20rpx;
				white-space: nowrap;
				width: 59rpx;
				height: 83rpx;

				.text_8 {
					margin-top: 9rpx;
				}
			}

			.image_1 {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

	.groups {
		background: #fff;
	}

	.wifi {
		width: 730rpx;
		margin: auto;
	}

	.center-text-wrapper {
		padding: 47rpx 0;
		background: #fff;

		.text_3 {
			margin-left: 52rpx;
		}
	}

	.uinput {
		width: 690rpx;
		margin: auto;
		height: 100rpx;
		border-bottom: 1rpx solid #E7E7E8;
	}
</style>

实际使用

实际只用到了EspTouch Broadcast配网一个功能。

<template>
	<view class="flex-col container">
		<view class="flex-col group_1">
			<u-cell-group class="groups">
<!-- 				<u-cell title="请选AP设备" value="" :isLink="true">
				</u-cell> -->
				<u-cell @click="getWiFiName" title="当前wifi" :value="name" :isLink="true">
				</u-cell>
				<div class="wifi">
					<u--input class="uinput" placeholder="请输入WiFi密码" border="surround" v-model="pwd"></u--input>
				</div>
			</u-cell-group>

			<view @click="linkEsptouchB" class="center-text-wrapper flex-col items-center text-wrapper">
				<text>开始</text>
			</view>
			<view class="">
				{{result}}
			</view>
		</view>
	</view>
</template>

<script>
	const gbWiFi = uni.requireNativePlugin('Googbuild-WIFI');
	const {
		inputData
	} = require('@/common/dataTool.js');
	export default {
		data() {
			return {
				result: '',
				pwd: '',
				name: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getLocation()

		},
		mounted() {

		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => { //授权成功后,调用
						console.log(res, '当前位置的经纬度')
						var latitude = res.latitude
						var longitude = res.longitude
						var speed = res.speed
						var accuracy = res.accuracy;
					},
					fail(err) { //授权失败后,调用,可以在这儿调用下面的例子 再次进行授权
						console.log(err, 'eee')
						uni.showToast({
							title: '授权未通过',
							icon: 'none'
						})
					}
				});
			},
			onInput(e) {
				inputData(e, this);
			},
			getWiFiName() {
				this.result = "命令已发送";
				gbWiFi.getWiFiName(callback => {
					this.name = callback.ssid.replace(new RegExp(/"\\/g), '"');
					this.result = JSON.stringify(callback);
				});
			},
			getNetWorkType() {
				this.result = "命令已发送";
				gbWiFi.getNetWorkType(callback => {
					switch (callback.type) {
						case 1:
							callback.type = 'wap网络';
							break;
						case 2:
							callback.type = '2G网络';
							break;
						case 3:
							callback.type = '3G网络';
							break;
						case 4:
							callback.type = '4G网络';
							break;
						case 5:
							callback.type = '5G网络'; // 预留值
							break;
						case 6:
							callback.type = 'WiFi 2.4G网段';
							break;
						case 7:
							callback.type = '5G WiFi';
							break;
						default:
							callback.type = '没有网络';
							break;
					}

					this.result = JSON.stringify(callback);
				});
			},
			getBSSID() {
				this.result = "命令已发送";
				gbWiFi.getBSSID(callback => {
					this.result = JSON.stringify(callback);
				});
			},
			linkAirKiss() {
				this.result = "命令已发送";
				gbWiFi.linkAirKiss({
						ssid: this.name,
						pwd: this.pwd
					},
					callback => {
						// this.result = callback;
						this.result = JSON.stringify(callback);
						console.log(callback)
					});
			},
			cancelAirKiss() {
				this.result = "命令已发送";
				gbWiFi.cancelAirKiss(callback => {
					console.log(callback)
					this.result = JSON.stringify(callback);
				});
			},
			linkEsptouchM() {
				this._linkEsptouch('Multicast');
			},
			linkEsptouchB() {
				this._linkEsptouch('Broadcast');
			},
			_linkEsptouch(mode) {
				this.result = "命令已发送";
				gbWiFi.linkEsptouch({
						ssid: this.name,
						pwd: this.pwd,
						model: mode
					},
					callback => {
						this.result = JSON.stringify(callback);
					});
			},
			cancelEsptouch() {
				this.result = "命令已发送";
				gbWiFi.cancelEsptouch(callback => {
					this.result = JSON.stringify(callback);
				});
			}
		}
	}
</script>



<style scoped lang="scss">
	.container {
		background-color: rgb(239, 239, 239);
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.group_1 {
			padding-bottom: 1255rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.section_1 {
				padding: 47rpx 36rpx 45rpx 52rpx;
				background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/619f91da9eab8900119cd321/16378475921091096906.png');
				background-size: 100% 100%;

				.text_1 {
					color: rgb(34, 34, 34);
					font-size: 24rpx;
					line-height: 25rpx;
					white-space: nowrap;
				}

				.text_2 {
					margin-bottom: 4rpx;
					color: rgb(34, 34, 34);
					font-size: 24rpx;
					line-height: 18rpx;
					white-space: nowrap;
				}
			}

			.view {
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 23rpx;
				white-space: nowrap;
			}

			.text-wrapper {
				margin-top: 10rpx;
				color: rgb(0, 172, 167);
				font-size: 24rpx;
				line-height: 23rpx;
				white-space: nowrap;
			}
		}

		.tab-bar {
			padding: 24rpx 41rpx 18rpx 47rpx;
			background-color: rgb(255, 255, 255);
			border-left: solid 2rpx rgb(231, 231, 231);
			border-right: solid 2rpx rgb(231, 231, 231);
			border-top: solid 2rpx rgb(231, 231, 231);
			border-bottom: solid 2rpx rgb(231, 231, 231);

			.group_2 {
				color: rgb(0, 172, 167);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 59rpx;
				height: 84rpx;

				.text_5 {
					margin-top: 8rpx;
				}
			}

			.group_3 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 21rpx;
				white-space: nowrap;
				width: 60rpx;
				height: 84rpx;

				.text_6 {
					margin-top: 9rpx;
				}
			}

			.group_4 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 60rpx;
				height: 84rpx;

				.text_7 {
					margin-top: 8rpx;
				}
			}

			.group_5 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 20rpx;
				white-space: nowrap;
				width: 59rpx;
				height: 83rpx;

				.text_8 {
					margin-top: 9rpx;
				}
			}

			.image_1 {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

	.groups {
		background: #fff;
	}

	.wifi {
		width: 730rpx;
		margin: auto;
	}

	.center-text-wrapper {
		padding: 47rpx 0;
		background: #fff;

		.text_3 {
			margin-left: 52rpx;
		}
	}
</style>

喜欢