uniapp WIFI上下班打卡

news2024/11/25 3:36:49

大纲


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

效果展示:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/794830.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

13.Netty源码之Netty中的类与API

highlight: arduino-light ServerBootstrap Bootstrap 意思是引导&#xff0c;一个 Netty 应用通常由一个 Bootstrap 开始&#xff0c;主要作用是配置整个 Netty 程序&#xff0c;串联各个组件&#xff0c;Netty 中ServerBootstrap 是服务端启动引导类。 java //泛型 AbstractB…

VMware上安装Ubuntu64

D:\VMware\Virtual Machines\Ubuntu64 D:\VMware\Virtual Machines\Ubuntu64\Ubuntu64.vmdk 继续

【ESP32】调试UART功能

1.创建示例项目uart_echo&#xff1a;VSCODE中->“查看”->”命令面板“->输入&#xff1a;Show Examples projects->选择Use current ESP-IDF(C:\Espressif\frameworks\esp-idf-v5.1)->弹出示例ESP-IDF Examples&#xff0c;选择peripherals->uart->uart…

泰晓科技发布 Linux Lab v1.2 正式版

导读近日消息&#xff0c;Linux Lab 是一套用于 Linux 内核学习、开发和测试的即时实验室&#xff0c;官方称其“可以极速搭建和使用&#xff0c;功能强大&#xff0c;用法简单”。 自去年 12 月份发布 Linux Lab v1.1 后&#xff0c;v1.2 正式版目前已经发布于 GitHub 及 Gite…

Tensorflow(二)

一、过拟合 过拟合现象:机器对于数据的学习过于自负(想要将误差减到最小)。 解决方法:利用正规化方法 二、卷积神经网络(CNN) 卷积神经网络是近些年来逐渐兴起的人工神经网络&#xff0c;主要用于图像分类、计算机视觉等。 卷积:例如对图片每一小块像素区域的处理&#xff…

微服务体系<1>

我们的微服务架构 我们的微服务架构和单体架构的区别 什么是微服务架构 微服务就是吧我们传统的单体服务分成 订单模块 库存模块 账户模块单体模块 是本地调用 从订单模块 调用到库存模块 再到账户模块 这三个模块都是调用的同一个数据库 这就是我们的单体架构微服务 就是…

RTaW-Pegase实时通信网络架构的建模,仿真和自动配置

RTaW-Pegase 用于构建和优化使用在汽车领域、航空航天领域以及工业领域的通信网络&#xff1a;时间敏感网络&#xff08;TSN&#xff09;、CAN &#xff08;FD&#xff0c;XL&#xff09;、LIN、Arinc、 NoC车载网络&#xff0c; 以及车外通信的无线网络。除了精确定时的仿真外…

F5 LTM 知识点和实验 2-负载均衡基础概念

第二章&#xff1a;负载均衡基础概念 目标&#xff1a; 使用网页和TMSH配置virtual servers&#xff0c;pools&#xff0c;monitors&#xff0c;profiles和persistence等。查看统计信息 基础概念&#xff1a; Node一个IP地址。是创建pool池的基础。可以手工创建也可以自动创…

7.26总结

继承和实现的区别&#xff1a; 1.修饰符不同: 继承修饰符extends&#xff0c;实现修饰符implements 2.单继承&#xff0c;多实现&#xff0c;Java允许一个类仅能继承一个其他类&#xff0c;即一个类只能有一个父类&#xff0c;这个限制被称为单继承性&#xff0c;而接口允许…

测试开源C#人脸识别模块ViewFaceCore(4:口罩检测、性别预测、年龄预测)

ViewFaceCore模块中的MaskDetector类支持识别人脸是否戴了口罩或有遮挡&#xff0c;主要调用PlotMask函数执行口罩检测操作&#xff0c;其函数原型如下所示&#xff1a; PlotMaskResult PlotMask<T>(T image, FaceInfo info)public class PlotMaskResult{//// 摘要:// …

Docker容器命令(有点详细)

文章目录 Docker 容器容器运行背后启停命令run交互模式需不需要接/bin/bash createexecattachpstoplogscprmcommitexportimportsystem对比export、saveimport、loadcommit、exportimport Docker 容器 Docker 容器是 Docker 平台中的一个基本概念&#xff0c;它是 Docker 技术的…

SpringCloud学习路线(12)——分布式搜索ElasticSeach数据聚合、自动补全、数据同步

一、数据聚合 聚合&#xff08;aggregations&#xff09;&#xff1a; 实现对文档数据的统计、分析、运算。 &#xff08;一&#xff09;聚合的常见种类 桶&#xff08;Bucket&#xff09;聚合&#xff1a; 用来做文档分组。 TermAggregation&#xff1a; 按照文档字段值分组…

【计算机网络】2.1——物理层(编码波形、奈氏准则和香农公式计算)

物理层 基本概念 概念 物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流 为数据链路层屏蔽了各种传输媒体的差异 数据链路层只需要考虑如何完成本层的协议和服务&#xff0c;而不必考虑网络具体的传输媒体是什么 物理层协议主要任务 机械特性 指明接口所…

区块链学习笔记

区块链技术与应用 数组 列表 二叉树 哈希函数 BTC中的密码学原理 cryptographic hash function collsion resistance(碰撞抵抗) 碰撞指的是找到两个不同的输入值&#xff0c;使得它们的哈希值相同。也就是说&#xff0c;如果存在任意两个输入x和y&#xff0c;满足x ≠ y…

利用Stable diffusion Ai 制作艺术二维码超详细参数和教程

大家有没有发现最近这段时间网上出现了各种各样的AI艺术二维码&#xff0c;这种二维码的出现&#xff0c;简直是对二维码的“颠覆式创新”&#xff0c;直接把传统的二维码提升了一个维度&#xff01;作为设计师的我们怎么可以不会呢&#xff1f; 今天就教大家怎么制作这种超有艺…

Python基于PyTorch实现卷积神经网络回归模型(CNN回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 卷积神经网络&#xff0c;简称为卷积网络&#xff0c;与普通神经网络的区别是它的卷积层内的神经元只覆…

使用EasyPoi实现Excel的按模板样式导出

1&#xff0c;横向遍历 #fe 使用#fe命令可以实现集合数据的横向拓展&#xff0c;比如模板代码是 {{#fe:maths t.score}}导出的excel里面就会显示会自当前列&#xff0c;向右拓展&#xff0c;效果可参见下面的导出文件截图 2&#xff0c;横向遍历值 v_fe 使用v_fe命令可以实现…

vue3+ts+elementui-plus二次封装弹框

一、弹框组件BaseDialog <template><div classmain><el-dialog v-model"visible" :title"title" :width"dialogWidth" :before-close"handleClose"><!-- 内容插槽 --><slot></slot><template…

分布式理论:CAP理论 BASE理论

文章目录 1. CAP定理1.1 一致性1.2 可用性1.3 分区容错1.4 矛盾 2. BASE理论3. 解决分布式事务的思路4. 扩展 解决分布式事务问题&#xff0c;需要一些分布式系统的基础知识作为理论指导。 1. CAP定理 Consistency(一致性): 用户访问分布式系统中的任意节点&#xff0c;得到的…

【LeetCode】1143.最长公共子序列(闫氏dp可视化无分析)

class Solution { public:int longestCommonSubsequence(string text1, string text2) {int len1 text1.size(), len2 text2.size();text1 " " text1;text2 " " text2; //以上三行代码需要注意&#xff0c; //第一行是求string长度的方法 //第二行是…