前端开发中遇到的小问题以及解决方案记录2

1、H5中适配屏幕的工具-postcss-px-to-viewport

postcss-px-to-viewport。因为设计稿一般给的都是375px宽度的,所以假如一个字体是16px,那么在开发中不能直接写死为16px,因为各个厂商的手机屏幕大小是不同的,所以要根据屏幕大小去自适应修改px的大小,postcss-px-to-viewport这个工具就能很好地把项目中的px单位自动改为计算后的vw。在不同版本的vue-cli脚手架里可能需要配置的不同,可以参考下这篇文章:Vue使用 postcss-px-to-viewport 适配移动端、PC端布局 px自动转换vw

2、H5开发中用到的一些工具

vconsole:简单理解就是在简单版的浏览器开发者工具,不过功能是比web浏览器的开发者工具少很多的,但是现在最流行的查看网络请求的库大多就是这个,只需要在网上找个vconsole的SDKdownload下来,然后在代码中 new vconsole()就可以了。

adb:实时开发调试H5的工具,在开发web的时候实时修改代码,浏览器就会更新,但是如果想在手机实现这个功能就需要借助工具。adb就是这样一个工具。可以参考这篇文章下载使用:ADB安装及使用详解(非常详细)从零基础入门到精通,看完这一篇就够了

3、时间选择器设置本月最后一天

在一次开发中,需要为时间选择器设置快捷选项(这个后面单独写一篇把所有快捷选项及代码列出来),有一个快捷选项为“本月”,那么每个月可能最后一天的日期不同,可能为28 29 30 31等等。当时脑子里也没有这个小知识点,解决就是:date.setMonth(date.getMonth() + 1, 0); 将日期设置为下个月的第0天,在时间选择器中默认就对应本月的最后一天。

4、解决相邻div的border重叠

开发过程中可能会遇到多个带有border的div并排,但是此时div的边距就会和相邻的div的border重叠。一个简单的解决方法是将除了第一个div的所有div都设置margin-left: -1px; 然后如果需要点击某个div的话,就将点击的这个div的z-index设为1;可以参考这篇文章:多个相邻元素切换效果出现边框重叠问题的解决方法

重叠

不重叠

5、try catch不能捕获异步的错误只能捕获同步错误

try catch不能捕获异步的错误,只能捕获同步的错误,这个点其实一直知道,但是脑子没形成这个体系,第一次看见这句话的时候还犹豫了一下,所以在这里记录下。之前学习了async await的实现后知道了其实await后的函数返回的其实也是个promise,所以简单的解决方法就是直接const res = await testFun().catch(err () => console.log(err)); 直接在这个函数后接catch。但是这样每个函数都得这样写一遍,有个库是专门处理异步错误的,叫await-to-js。关于处理异步错误的方法掘金上有很多,大家可以去参考下。

6、Date.parse返回是准确到秒

Date.parse()返回的时间戳是只返回到s数,后面的毫秒数全是0;

7、antd的分页组件中的英文转换为中文

不知道为什么antd的分页组件复制下来是英文的字,需要加如下操作才能显示为中文。

import zh_CN from 'antd/es/locale/zh_CN';
import {ConfigProvider} from 'antd';<ConfigProvider locale={zh_CN}><Pagination></Pagination>
</ConfigProvider>

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

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

相关文章

【人工智能学习笔记】1_人工智能基础

本系列是个人学习《阿里云人工智能工程师ACA认证免费课程&#xff08;2023版&#xff09;》的笔记&#xff0c;仅为个人学习记录&#xff0c;欢迎交流&#xff0c;感谢批评指正 人工智能概述 智能的三大能力&#xff1a;感知、记忆与思维、学习与适应能力人工智能的定义 明斯基…

正规表达式例题

解析&#xff1a;从题意可知&#xff0c;a可以有零个或多个&#xff0c;b有1个或多个 选项A&#xff1a;这里a至少有1个&#xff0c;不符合题意 选项B&#xff1a;a^*bb^*&#xff0c;a是0个或多个&#xff0c;b可以是1个或多个&#xff0c;符合题意 选项C和选项D&#xff0…

Camunda调用子流程案例

调用子流程 调用子流程是指子流程在主流程的外面。子流程一般是多个流程可重用的流程&#xff0c;也可以独立调用子流程。 可以对比编程中的方法抽取。子流程运行时&#xff0c;主流程也是等待状态。子流程结束&#xff0c;主流程继续。 立即体验&#xff0c;请访问JeecgFlow …

AWTK HTML View 控件更新

AWTK HTML View 控件基于 Lite HTML 实现&#xff0c;从最初的版本开始&#xff0c;3 年多过去了&#xff0c;Lite HTML 做了大量的更新&#xff0c;最近抽空将 AWTK HTML View 控件适配到最新版本的 Lite HTML&#xff0c;欢迎大家使用。 AWTK HTML View 控件。HTML View 控件…

玩转Python Turtle库,实现满屏飘字的魔法!

前言 本文将教你如何使用Python的Turtle库&#xff0c;通过简单的编程实现满屏飘字的炫酷效果。无需复杂的编程知识&#xff0c;跟着我们的步骤&#xff0c;你也可以成为编程小达人&#xff01; 效果展示 开发过程 一、准备工作 首先&#xff0c;确保你的电脑上已经安装了Py…

12. GIS地图制图工程师岗位职责、技术要求和常见面试题

本系列文章目录&#xff1a; 1. GIS开发工程师岗位职责、技术要求和常见面试题 2. GIS数据工程师岗位职责、技术要求和常见面试题 3. GIS后端工程师岗位职责、技术要求和常见面试题 4. GIS前端工程师岗位职责、技术要求和常见面试题 5. GIS工程师岗位职责、技术要求和常见面试…

2. GIS数据工程师岗位职责、技术要求和常见面试题

本系列文章目录&#xff1a; 1. GIS开发工程师岗位职责、技术要求和常见面试题 2. GIS数据工程师岗位职责、技术要求和常见面试题 3. GIS后端工程师岗位职责、技术要求和常见面试题 4. GIS前端工程师岗位职责、技术要求和常见面试题 5. GIS工程师岗位职责、技术要求和常见面试…

COD论文笔记 BiRefNet

本质还是一个 U 型编码器解码器结构的分割模型。 我可以考虑将©和(d)结合&#xff0c;即对解码器的输入不进行 patchify,同时在各个阶段引入梯度参考信息 最近的相关工作&#xff0c;中间监督、额外先验(频率&#xff0c;梯度&#xff0c;边缘等)取得不错效果 作者观察到…

Post-Training有多重要?一文带你了解全部细节

1. 简介 随着LLM学界和工业界日新月异的发展&#xff0c;不仅预训练所用的算力和数据正在疯狂内卷&#xff0c;后训练&#xff08;post-training&#xff09;的对齐和微调方法也在不断更新。InstructGPT、WebGPT等较早发布的模型使用标准RLHF方法&#xff0c;其中的数据管理风…

高效实用的网站ICP备案查询接口

随着互联网的日益发展&#xff0c;对于网站的监管变得越来越重要。为了更好地管理和监督互联网上的网站&#xff0c;官方要求所有在中国境内的网站都需要进行ICP备案。因此&#xff0c;ICP备案不仅是法律要求&#xff0c;也是衡量一个网站是否正规的重要标志之一。为了便于开发…

【Redis】Redis 集群搭建与管理: 原理、实现与操作

目录 集群 (Cluster)基本概念数据分片算法哈希求余⼀致性哈希算法哈希槽分区算法 (Redis 使⽤) 集群搭建 (基于 docker)第⼀步: 创建⽬录和配置第⼆步: 编写 docker-compose.yml第三步: 启动容器第四步: 构建集群 主节点宕机演⽰效果处理流程1)故障判定2)故障迁移 集群扩容第⼀…

IP/TCP/UDP协议的关键知识点

导语&#xff1a;网络协议是理解网络情况的基础&#xff0c;当遇到网络问题时&#xff0c;首先可以从网络协议入手&#xff0c;熟悉的网络协议可以有效帮助小伙伴们排查或者说定位大概的问题方面。本文整理了目前最常用的网络通信协议&#xff0c;相信对小伙伴们肯定都有帮助。…

el-table使用type=“expand”根据数据条件隐藏展开按钮

一&#xff1a;添加className <el-table :data"tableData" border :loading"loading" :row-class-name"getRowClass" expand-change"expandchange"><el-table-column type"expand"><template #default"…

python学习11-Pytorch张量与数据处理1

ndarray 首先&#xff0c;我们介绍n维数组&#xff0c;也称为张量&#xff08;tensor&#xff09;。 使用过Python中NumPy计算包的读者会对本部分很熟悉。 无论使用哪个深度学习框架&#xff0c;它的张量类&#xff08;在MXNet中为ndarray&#xff0c; 在PyTorch和TensorFlow中…

华为eNSP:NAT Server(端口映射)

一、拓扑图 二、配置过程 此处省略设备地址以及路由配置过程 1、服务器开启ftp服务 2、路由器配置nat server [r4]int g0/0/2#进入流量出接口 [r4-GigabitEthernet0/0/2]nat server protocol tcp global 192.168.3.11 ftp inside 192.168.2.1 ftp# …

SnapGene 5.3.1下载安装教程百度网盘分享链接地址

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 SnapGene介绍 SnapGene 5.3.1下载安装教程百度网盘分享链接地址&#xff0c;SnapGene 是一款由美国公司开发&#xff08;后被收购&#xff09;的分子生物学软件&#xff0c;…

基于YOLO8的图片实例分割系统

文章目录 在线体验快速开始一、项目介绍篇1.1 YOLO81.2 ultralytics1.3 模块介绍1.3.1 scan_task1.3.2 scan_taskflow.py1.3.3 segment_app.py 二、核心代码介绍篇2.1 segment_app.py2.2 scan_taskflow.py 三、结语 代码资源&#xff1a;计算机视觉领域YOLO8技术的图片实例分割…

Java中Json、String、jsonObject、jsonArray格式之间的互相转换 (Fastjson、Gson、String字符串分隔)

1.org中jackson转换json,springboot中内置jackson ObjectMapper onew ObjectMapper();List<>listnew ArrayList();String jonso.writeAsValueString(list); 一、Fastion 使用阿里的fastjson <dependency><groupId>com.alibaba</groupId><artifactId…

使用 JAXB 将内嵌的JAVA对象转换为 xml文件

使用 JAXB 将内嵌的JAVA对象转换为 xml文件 1. 需求2. 实现&#xff08;1&#xff09;FileDesc类&#xff08;2&#xff09;MetaFileXml类&#xff08;3&#xff09;生成对应的xml文件 1. 需求 获取一个目录下所有文件的元数据信息&#xff08;文件名、大小、后缀等&#xff0…

1.2CubeMAX创建FREERTOS入门示例

1.CUBEMAX快速配置 V2改为V1否则编译会报错 2.Freertos各配置选项卡解释 Events &#xff1a;事件相关的创建 Task and Queues &#xff1a; 任务与队列的创建 Timers and Semaphores &#xff1a; 定时器和信号量的创建 Mutexes &#xff1a; 互斥量的创建 FreeRTOS Heap…