前端开发中遇到的小问题以及解决方案记录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 控件…

Android 开发避坑经验第三篇:RecyclerView 高效使用与常见问题解决

RecyclerView 是 Android 应用开发中最常用的 UI 组件之一,通常用于显示大量数据列表。尽管功能强大,但如果使用不当,会导致性能问题、数据错乱或滚动卡顿等问题。在本篇文章中,我们将探讨 RecyclerView 的一些常见坑点,提供解决方案,并附带代码示例。 1. 坑点:ViewHol…

LeetCode:3177. 求出最长好子序列 II 哈希表+动态规划实现N*K时间复杂度

3177. 求出最长好子序列 II 题目链接 题目描述 给你一个整数数组 nums 和一个非负整数k 。如果一个整数序列 seq 满足在下标范围 [0, seq.length - 2] 中 最多只有 k 个下标i满足 seq[i] ! seq[i 1] &#xff0c;那么我们称这个整数序列为好序列。请你返回 nums中好子序列的…

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

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

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

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

python如何读取excel文件内的数据

目录 前言一、安装openpyxl二、读取Excel数据总结前言 在Python中读取Excel数据,最常用的库之一是openpyxl(用于.xlsx格式)和xlrd(尽管xlrd从版本2.0开始不再支持.xlsx,仅支持旧的.xls格式)。然而,对于大多数现代应用来说,openpyxl是一个更好的选择,因为它支持.xlsx格…

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

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

基础学习之——Docker 的基本概念和优势,以及在应用程序开发中的实际应用。

Docker是一种开源的容器化平台&#xff0c;可以将应用程序及其所有依赖项打包在一个容器中&#xff0c;实现跨平台、可移植和可扩展的部署。下面是Docker的基本概念和优势&#xff1a; 容器&#xff1a;Docker使用容器来打包应用程序及其依赖项&#xff0c;容器是一个独立、可执…

COD论文笔记 BiRefNet

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

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

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

[建模已更新]2024数学建模国赛高教社杯A题:“板凳龙” 闹元宵 思路代码文章助攻手把手保姆级

本系列专栏将包括两大块内容 第一块赛前真题和模型教学,包括至少8次真题实战教学,每期教学专栏的最底部会提供完整的资料百度网盘包括:真题、数据、可复现代码以及文章. 第二块包括赛中详细思路建模、代码的参考助攻, 会提供2024年高教社国赛A的全套参考内容(一般36h内更新完毕…

高效实用的网站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中…

高精度计算(代码加解析,洛谷p1601,p1303)除法待更新

目录 高精度加法 高精度减法 高精度乘法 高精度加法 我们知道在c语言中任何数据类型都有一定的表示范围。当两个被加数很大时&#xff0c;正常加法不能得到精确解。在小学&#xff0c;我们做加法都采用竖式方法。那么我们也只需要按照加法进位的方式就能得到最终解。 8 5 6…