uniapp WIFI上下班打卡

news/2024/10/23 9:33:36/

大纲


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

    uni.navigateBack() 函数用于关闭当前页面并返回上一个页面或多个页面 ( 我这边了设置等待1秒钟,再跳转到上一个页面)

    setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000);

效果展示:

 

 


http://www.ppmy.cn/news/982070.html

相关文章

慕课网Go——1.go语言基础

3. 变量 3.1 定义变量 package mainimport "fmt"// 全局变量可以不使用 var flg boolfunc main() {//局部变量定义后必须使用&#xff0c;默认零值var name int 1fmt.Println(name)age : 1fmt.Println(age)//多变量定义&#xff0c;可以不同类型var s1, s2 "…

RL 实践(5)—— 二维滚球环境【REINFORCE Actor-Critic】

本文介绍如何用 REINFORCE 和 Actor-Critic 这两个策略梯度方法解二维滚球问题参考&#xff1a;《动手学强化学习》完整代码下载&#xff1a;6_[Gym Custom] RollingBall (REINFORCE and Actor-Critic) 文章目录 1. 二维滚球环境2. 策略梯度方法2.1 策略学习目标2.2 策略梯度定…

IIS部署安装.NET CORE6.0应用程序,成功解决http error 503.the service is unavailable错误

一、下载安装.NET CORE 运行环境包 网址&#xff1a;Download .NET Core 3.1 (Linux, macOS, and Windows).NET Core 3.1 downloads for Linux, macOS, and Windows. .NET is a free, cross-platform, open-source developer platform for building many different types of ap…

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

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

vue指令-v-on事件对象

vue指令-v-on事件对象 1、目的2、语法 1、目的 vue事件处理函数中&#xff0c;拿到事件对象 2、语法 无传参数&#xff0c;通过形参直接接收 <template><div id"app"><a click"one" href"http://www.baidu.com">百度</…

IDEA插件YapiUpload配置YApi

前后端分离开发项目&#xff0c;后端提供接口文档&#xff0c;这次使用的是YApi&#xff0c;不想一个个接口添加&#xff0c;所以用插件批量导入。 YApi 是高效、易用、功能强大的 api 管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发…

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

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

sd卡为什么突然要格式化?sd卡显示格式化怎么恢复数据

SD卡作为我们日常生活中的常用品&#xff0c;无论是相机、手机还是平板&#xff0c;都能看到它的身影。但是&#xff0c;当你将SD卡插入相机后却被告知需要格式化&#xff0c;或者将SD卡连接到电脑的时候显示需要格式化&#xff0c;这时候你应该怎么处理呢&#xff1f;SD卡显示…