虽然我现在也没有明白配网是啥意思,但是功能上确实是满足了客户的需要,所以记录一下。
使用到的插件
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>