uniapp WIFI上下班打卡-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp WIFI上下班打卡。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大纲

uniapp WIFI上下班打卡,uniapp,uView,uni-app,前端,javascript

🥙 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)

uniapp WIFI上下班打卡,uniapp,uView,uni-app,前端,javascript

代码展示：

<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()