大纲
🥙 uniapp官网:uni-app官网
🥙 WIFI功能模块:
1、下载 wifi 插件 uni-WiFi
2、在 manifest.json 中 App权限配置中 配置权限
1. ACCESS_WIFI_STATE (访问权限状态)
2. CHANGE_WIFI_STATE(更改wifi状态)
3. ACCESS_FINE_LOCATION(访问线路位置)
4. ACCESS_COARSE_LOCATION(访问文件位置)
3、编写方法来获取WiFi的名称
4、后台设定好 wifi 的 mac 名称。前端通过调用获取网络的方法 获取当前连接WIFI的信息从而拿到 mac 进行比对,验证是否是公司WIFI。
需要使用到的一些方法:
1、uni.getConnectedWifi(OBJECT)
2、uni.connectWifi(OBJECT)
代码展示:
<template>
<view class="content">
<u-cell-group>
<u-cell icon="account-fill" title="员工姓名" :value="staffName"></u-cell>
<u-cell icon="calendar-fill" title="打卡日期" :value="$moment().format('YYYY-MM-DD')"></u-cell>
<u-cell icon="clock-fill" title="上班时间" :value="currentTime"></u-cell>
</u-cell-group>
<view>
<view style="margin-top: 16px">网络MAC为:{{mac}}</view>
</view>
<view>
<u-button type="primary" :loading='loadingForm' @click="clockIn">{{currentTime}}上班打卡</u-button>
</view>
</view>
</template>
<script>
import * as api from '@/request';
export default {
data() {
return {
mac: '未获取',
loadingForm: false,
moveClock: '移动打卡',
networkIp: '',
currentTime: '', //当前时间
}
},
onLoad() {
this.mac = options.mac
},
mounted() {
// 在组件挂载时获取当前时间
this.currentTime = this.getCurrentTime()
// 每隔一秒更新当前时间
setInterval(() => {
this.currentTime = this.getCurrentTime()
}, 1000)
},
methods: {
//获取网络状态
getNetworkType() {
let MainActivity = plus.android.runtimeMainActivity();
let Context = plus.android.importClass('android.content.Context');
// 导入WIFI管理 和 WIFI 信息 的class
plus.android.importClass("android.net.wifi.WifiManager");
plus.android.importClass("android.net.wifi.WifiInfo");
plus.android.importClass("android.net.wifi.ScanResult");
plus.android.importClass("java.util.ArrayList");
// 获取 WIFI 管理实例
let wifiManager = MainActivity.getSystemService(Context.WIFI_SERVICE);
//打开wifi,false为关闭
wifiManager.setWifiEnabled(true);
// 获取当前连接WIFI的信息
let info = wifiManager.getConnectionInfo()
// 获取当前 WIFI 连接的 SSID (WIFI 名称)
this.mac = info.getBSSID()
},
//获取当前时间
getCurrentTime() {
const date = new Date()
//获取时间的小时部分,例如当前时间为2023-05-16 10:30:00,则 date.getHours() 的返回值为 10。
const hours = date.getHours().toString().padStart(2, '0')
//.toString() 方法是将获取到的小时数转换成字符串类型的方法
const minutes = date.getMinutes().toString().padStart(2, '0')
const seconds = date.getSeconds().toString().padStart(2, '0')
return `${hours}:${minutes}:${seconds}`
},
//上班打卡
clockIn() {
this.form.moveClock = '移动打卡',
this.form.networkIp = this.mac
this.loadingForm = true
console.log('打卡信息:', this.form)
api.Commuting(this.form).then(res => {
if (res.code == 0) {
uni.showToast({
icon: 'none',
title: res.msg
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 2000);
} else if (res.code == 1) {
uni.showToast({
icon: 'error',
title: res.msg
});
}
}).finally(() => {
this.loadingForm = false
});
},
},
}
</script>
<style>
</style>
以上代码片段是通过 Native API(本地API) 与 Android Wi-Fi (安卓Wi-Fi) 系统服务进行交互的案例。以下是重点代码的详解:
🥪 1、获取主 Activity(活动/窗体) 的引用,这对于访问 Android 系统服务是必需的
let MainActivity = plus.android.runtimeMainActivity();
🥪 2、从 Android 框架导入
Context
类,它提供了访问应用程序特定资源和服务的能力
let Context = plus.android.importClass('android.content.Context');
🥪 3、从 Android 框架导入
WifiManager
类,它允许管理 Wi-Fi 连接
plus.android.importClass("android.net.wifi.WifiManager");
🥪 4、导入其他与 Wi-Fi 操作相关的类
plus.android.importClass("android.net.wifi.WifiInfo");
plus.android.importClass("android.net.wifi.ScanResult");
plus.android.importClass("java.util.ArrayList");
🥪 5、使用主 Activity 的
getSystemService()
方法获取WifiManager
类的实例
let wifiManager = MainActivity.getSystemService(Context.WIFI_SERVICE);
🥪 6、调用
WifiManager
实例的setWifiEnabled()
方法将 Wi-Fi 启用,false为关闭
wifiManager.setWifiEnabled(true);
🥪 7、调用
WifiManager
实例的getConnectionInfo()
方法获取当前连接信息
let info = wifiManager.getConnectionInfo();
获取当前 WIFI 连接的 SSID (WIFI 名称)
this.mac = info.getBSSID()
uni.navigateBack() 函数用于关闭当前页面并返回上一个页面或多个页面 ( 我这边了设置等待1秒钟,再跳转到上一个页面)
setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000);
效果展示: