当前位置: 首页 > news >正文

React实现H5手势密码

在这里插入图片描述

监测应用进入前后台

在JavaScript中,监听H5页面是否在前台或后台运行,主要依赖于Page Visibility API。这个API在大多数现代浏览器中都是支持的,包括苹果的Safari和谷歌的Chrome(也就基本覆盖了Android和iOS平台)。下面是一个简单的示例代码,展示如何使用这个API来判断页面的可见性状态:

// 页面可见性变化时触发的事件处理函数
function handleVisibilityChange() {if (document.visibilityState === 'hidden') {// 当页面进入后台时的操作console.log('页面进入后台');} else if (document.visibilityState === 'visible') {// 当页面从后台回到前台时的操作console.log('页面从后台回到前台');}
}// 给文档添加可见性状态变化的监听器
document.addEventListener('visibilitychange', handleVisibilityChange);// 初始化时检查一次页面状态
handleVisibilityChange();

这段代码首先定义了一个handleVisibilityChange函数,该函数会在页面的visibilityState发生变化时被调用。visibilityState可以是visiblehiddenprerenderunloaded等值,这里我们主要关注visiblehidden两种状态,分别代表页面在前台和后台。

然后,通过document.addEventListener给文档注册了一个监听器,用于监听visibilitychange事件。最后,调用一次handleVisibilityChange函数来初始化检查页面当前的状态。

需要注意的是,虽然大部分现代浏览器支持Page Visibility API,但还是存在一些老旧浏览器可能不支持。因此,在生产环境中使用时,最好进行特性检测以确保兼容性:

if (typeof document.hidden !== "undefined") {// Page Visibility API supported// 你的代码...
} else if (typeof document.msHidden !== "undefined") {// For IE// 你的代码...
} else if (typeof document.webkitHidden !== "undefined") {// For older Chrome and Safari// 你的代码...
} else {console.log("Page Visibility API not supported.");
}

这段额外的检测代码可以帮助你确认当前环境是否支持Page Visibility API,并根据不同的浏览器前缀做适配。

手势生成

html

<div className="page-container"><divid="container"style={{ width: "300px", height: "300px" }}ref={(ref) => { this.container = ref }}/>
</div>

react

import GestureUnlockRenderer, { Anchor } from 'fly-gesture-unlock';container;
gestureUnlockRenderer;
gestureEnd = (selectedAnchors: Anchor<ExtraStatus>[]) => {const anchorIds = selectedAnchors.map(anchor => anchor.id).join('');console.log(anchorIds);
};type ExtraStatus = never;// 借助提供的辅助函数生成锚点
const anchorDefines = GestureUnlockRenderer.AnchorMatrixFactory({canvasSize: { width: this.container.clientWidth, height: this.container.clientHeight },padding: 35,matrix: { row: 3, column: 3 },anchor: { anchorCircleRadius: 30, centerCircleRadius: 10 },
});this.gestureUnlockRenderer = new GestureUnlockRenderer<ExtraStatus>({container: this.container,anchorDefines,anchorStatusStyles: {'not-selected': {// 锚点圆的边框宽、边框颜色、填充颜色anchorCircleBorderWidth: 1,anchorCircleBorderColor: '#3ea1e5',},'selected': {// 锚点圆的边框宽、边框颜色、填充颜色anchorCircleBorderWidth: 1.5,anchorCircleBorderColor: '#128ce8',anchorCircleFillColor: '#ffffff',// 中心圆的边框宽、边框颜色、填充颜色centerCircleFillColor: '#128ce8'},},lineStatusStyles: {'normal': {lineColor: '#128ce8',lineWidth: 1,},},events: {'end': this.gestureEnd,},
});

相关文章:

React实现H5手势密码

监测应用进入前后台 在JavaScript中&#xff0c;监听H5页面是否在前台或后台运行&#xff0c;主要依赖于Page Visibility API。这个API在大多数现代浏览器中都是支持的&#xff0c;包括苹果的Safari和谷歌的Chrome&#xff08;也就基本覆盖了Android和iOS平台&#xff09;。下…...

[leetcode hot 150]第十五题,三数之和

题目&#xff1a; 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复…...

视频AI分析定时任务思路解析

序言&#xff1a; 最近项目中用到视频ai分析&#xff0c;由于sdk涉及保密&#xff0c;不便透露&#xff0c;仅对定时任务分析的思路作出分享&#xff0c;仅供参考。 1、定时任务 由于ai服务器的性能上限&#xff0c;只能同时对64个rtsp流分析一种算法&#xff0c;或者对8个rts…...

tcp 粘包和拆包 及 解决粘包方案

什么是粘包和拆包 .TCP 是面向连接的&#xff0c;面向流的&#xff0c;提供高可靠性服务。收发两端&#xff08;客户端和服务器端&#xff09;都要有一一成对的 socket&#xff0c;因此&#xff0c;发送端为了将多个发给接收端的包&#xff0c;更有效的发给对方&#xff0c;使…...

【2024泰迪杯】B 题:基于多模态特征融合的图像文本检索20页论文及Python代码

【2024泰迪杯】B 题&#xff1a;基于多模态特征融合的图像文本检索20页论文及Python代码 相关链接 【2024泰迪杯】A 题&#xff1a;生产线的故障自动识别与人员配置 Python代码实现 【2024泰迪杯】B 题&#xff1a;基于多模态特征融合的图像文本检索Python代码实现 【2024泰迪…...

华为设备telnet 远程访问配置实验简述

一、实验需求: 1、AR1模拟电脑telnet 访问AR2路由器。 二、实验步骤&#xff1a; 1、AR1和AR2接口配置IP&#xff0c;实现链路通信。 2、AR2配置AAA模式 配置用户及密码 配置用户访问级别 配置用户telnet 访问服务 AR2配置远程服务数量 配置用户远程访问模式为AAA 配置允许登录…...

在HTML中,如何正确使用语义化标签?

在HTML中&#xff0c;使用语义化标签可以使得网页结构更加清晰和易于理解。以下是一些正确使用语义化标签的方法&#xff1a; 使用合适的标题标签&#xff08;h1-h6&#xff09;来标识网页的标题&#xff0c;以及页面中的各个区块的标题。 <h1>网页标题</h1> <…...

WHAT - 高性能和内存安全的 Rust(一)

目录 一、介绍1.1 示例代码1.2 关键特性内存安全零成本抽象&#xff1a;高效性能示例代码&#xff1a;使用迭代器的零成本抽象示例代码&#xff1a;泛型和单态化总结 并发编程&#xff1a;防止数据竞争Rust 并发编程示例Rust 的所有权系统防止数据竞争总结 丰富的类型系统包管理…...

八、C#运算符

C#运算符 晕杜甫是一种告诉编辑器执行特定的数学或逻辑操作的符号。C#有丰富的内置运算符&#xff0c;分类如下&#xff1a; 算术运算符关系运算符逻辑运算符位运算符赋值运算符其他运算符 算术运算符 下表显示了 C# 支持的所有算术运算符。假设变量 A 的值为 10&#xff0c…...

【HiveSQL】join关联on和where的区别及效率对比

测试环境&#xff1a;hive on spark spark版本&#xff1a;3.3.1 一、执行时机二、对结果集的影响三、效率对比1.内连接1&#xff09;on2&#xff09;where 2.外连接1&#xff09;on2&#xff09;where 四、总结PS 一、执行时机 sql连接中&#xff0c;where属于过滤条件&#…...

如何解决windows自动更新,释放C盘更新内存

第一步&#xff1a;首先关闭windows自动更新组件 没有更新windows需求&#xff0c;为了防止windows自动更新&#xff0c;挤占C盘空间&#xff0c;所以我们要采取停止Windows Update服务。按下WinR打开运行对话框&#xff0c;输入services.msc&#xff0c; 然后按Enter。在服务…...

初学51单片机之PWM实例呼吸灯以及遇到的问题(已解答)

PWM全名Pulse Width Modulation中文称呼脉冲宽度调制 如图 这是一个周期10ms、频率是100HZ的波形&#xff0c;但是每个周期内&#xff0c;高低电平宽度各不相同&#xff0c;这就是PWM的本质。 占空比是指高电平占整个周期的比列,上图第一个波形的占空比是40%&#xff0c;第二个…...

手机天线都去哪里了?

在手机的演变历程中&#xff0c;天线的设计和位置一直是工程师们不断探索和创新的领域。你是否好奇&#xff0c;现在的手机为什么看不到那些曾经显眼的天线了呢&#xff1f; 让我们一起揭开这个谜题。 首先&#xff0c;让我们从基础开始&#xff1a;手机是如何发出电磁波的&…...

计算机网络 —— 应用层(电子邮件)

计算机网络 —— 应用层&#xff08;电子邮件&#xff09; 电子邮件发送电子邮件的过程SMTP特性工作流程 电子邮件格式MIME关键组件工作方式 POP/IMAPPOP&#xff08;邮局协议&#xff09;IMAP&#xff08;因特网邮件访问协议&#xff09; 基于万维网的电子邮箱特点优势常见的基…...

Java18新特性(极简)

一、引言 自1995年Java语言首次亮相以来&#xff0c;它已经成为企业级应用、移动应用和游戏开发等领域不可或缺的一部分。随着技术的不断进步&#xff0c;Java也在持续演化&#xff0c;每个新版本都带来了诸多新特性和性能优化&#xff0c;旨在提升开发者的编程效率和应用程序的…...

vscode连接ssh远程服务器

当使用Visual Studio Code (VSCode) 连接SSH远程服务器时&#xff0c;可以遵循以下步骤。这些步骤将帮助你设置并连接到远程服务器&#xff0c;包括免密登录的设置&#xff08;如果需要&#xff09;。 一、安装并配置Remote-SSH插件 下载并安装VSCode&#xff1a;确保你已经下…...

【趣味测试】

编程过程中遇到的趣味知识 1 Cpp 1.1 浮点数计算 if (0.1 0.2 0.3) {std::cout << "0.1 0.2 0.3 true" << std::endl;} else {std::cout << "0.1 0.2 0.3 false" << std::endl;}if (0.1 0.3 0.4) {std::cout << &…...

数据结构经典面试之数组——C#和C++篇

文章目录 1. 数组的基本概念与功能2. C#数组创建数组访问数组元素修改数组元素数组排序 3. C数组创建数组访问数组元素修改数组元素数组排序 4. 数组的实际应用与性能优化5. C#数组示例6. C数组示例总结 数组是编程中常用的数据结构之一&#xff0c;它用于存储一系列相同类型的…...

docker的基本知识

文章目录 前言docker的基本知识1. docker 的底层逻辑2. docker 的核心要素2.1. 镜像的基本概念:2.2. 容器的基本概念:2.3. 仓库的基本概念: 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   …...

React Native性能优化红宝书

一、React Native介绍 React Native 是Facebook在React.js Conf2015 推出的开源框架&#xff0c;使用React和应用平台的原生功能来构建 Android 和 iOS 应用。通过 React Native&#xff0c;可以使用 JavaScript 来访问移动平台的 API&#xff0c;使用 React 组件来描述 UI 的…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...