uniapp WIFI上下班打卡

本文主要是介绍uniapp WIFI上下班打卡，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大纲

🥙 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.macthis.loadingForm = trueconsole.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()