![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
问题&&解决
文章平均质量分 75
记录一些遇到的问题和解决方案
LYFlied
这个作者很懒,什么都没留下…
展开
-
前端页面填加水印方案及实现
文章目录一、背景二、实现1.利用canvas绘制水印信息2.页面展示水印三、完整代码四、调用五、验证一、背景最近有个项目需要在页面上加上水印。这里尝试了一个实现方案。二、实现1.利用canvas绘制水印信息 var can = document.createElement('canvas'); can.width = 250; can.height = 150; var cans = can.getContext('2d'); cans.rotate(-20 *原创 2021-04-06 15:28:04 · 1661 阅读 · 8 评论 -
H5项目兼容PC端和移动端的方案(持续跟新)
H5项目兼容PC端和移动端的方案(持续跟新)一、利用CSS媒体查询维护两套样式二、移动端1像素线问题原创 2021-04-05 18:07:14 · 7161 阅读 · 9 评论 -
ios跳转页面回退不刷新问题&&解决方案
文章目录问题分析解决方案问题用react开发的H5项目在移动端中遇到了兼容性的问题:在页面a,点击提交按钮后,按钮状态置灰,并跳转到页面b,再从b页面退回到a页面,在Android手机中没有问题,a页面正常显示。在IOS手机中,a页面的提交按钮仍然是置灰状态,不可点击。分析Android:跳转路由再回来后触发了页面刷新,触发componentDidMount等生命周期,按钮状态刷新,重新变为了可点击状态。ios:跳转路由再回来,不会触发页面刷新,也不会触发componentDidMoun原创 2021-06-17 15:19:07 · 2641 阅读 · 8 评论 -
前端项目(React)接入eslint静态代码检查及一些问题解决方案
Using this.refs is deprecatedUsing string literals in ref attributes is deprecated‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used解决方案eslint安装配置初始化检验代码原创 2021-03-29 10:19:58 · 4126 阅读 · 15 评论 -
产品同学成为了我学习Git命令的动力
有多个需求,本来说的是一起上线的,所以我就把它们全放在一个分支开发了,按需求分别提交的commit,结果,产品说其中的某个需求A需要改动一个,并且延后上线(按捺住想打他的冲动)。所以我需要把这个需求A从当前分支分离出来,并放到一个新的分支上,继续开发。git 把当前分支的某次commit分离出来到另一个分支,并删除当前分支上的commit原创 2021-04-25 11:08:56 · 217 阅读 · 4 评论 -
H5项目适配系统深色模式方案总结
文章目录一、背景二、问题三、H5项目适配深色模式方案1.声明 color-scheme1.1meta1.2CSS2.通过 CSS 媒体查询3.图片适配4. JavaScript中判断当前模式&监听模式变化4.1matchMedia4.2addListener()JavaScript监听判断一、背景随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减原创 2021-04-13 17:51:20 · 3328 阅读 · 23 评论 -
前端setInterval和setTimeout计时误差问题分析&&解决方案
setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每 100ms 执行一次,每次执行需要 5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。原创 2021-04-02 15:16:26 · 7553 阅读 · 14 评论 -
一个因Git大小写不敏感引发的血案
记录一个因Git大小写不敏感引发的问题关键词:gitlab,git,打包,大小写敏感原创 2021-03-31 20:00:24 · 1267 阅读 · 13 评论 -
React合成事件(阻止冒泡stopImmediatePropagation)
- React组件类似onClick的事件是合成事件,本质上所有绑定是代理到document上的,所有绑定都会冒泡到document层去执行二、React 合成事件1.执行顺序2.合成事件阻止冒泡2.1e.stopPropagation2.2 e.nativeEvent.stopImmediatePropagation3.this指向问题解决4.传参5. 事件池(React 17 不再使用事件池)原创 2021-03-31 14:21:10 · 3492 阅读 · 3 评论 -
多页面项目优化webpack打包降低上线风险
目前的问题项目中有多个入口,某些入口会提供出去给其他项目使用。这就要求项目的稳定性要高,如果出了问题可能会导致其他的相关联项目也无法正常使用。(要背锅)由于目前整个项目的打包文件用的同一套版本号,导致当对某个组件进行了修改,进行打包后,所有模块的版本号都会更新,缓存将不能使用,所有模块都将更新,这会给项目上线带来一些风险。不得不每次上线之后都去对所有的服务进行验证,哪怕是不涉及改动的,由于版本号更新了,也需要再去线上验证一下有没有问题。目标优化webpack打包配置,不同入口所打包出来的文件使用独原创 2021-02-07 17:54:33 · 939 阅读 · 3 评论 -
升级webpack5过程中遇到的坑
将项目的weback从3升到了5,遇到了一系列的问题,这里记录两个:extract-text-webpack-plugin兼容问题webpack-dev-server兼容问题1.extract-text-webpack-plugin兼容问题升到webpack5后,运行打包直接报错,如下:原因是:webpack4以上的版本不再使用“extract-text-webpack-plugin”,应该改成用“mini-css-extract-plugin”解决原代码:const ExtractT原创 2021-02-04 19:49:39 · 2533 阅读 · 2 评论 -
vsCode在切换tab的时候CUP占用率极高的解决办法
我使用vscode的时候,打开了多个文件,在文件之间切换的时候,感觉很卡,打开任务管理器一看,CPU占用都红了。如图,Git for Windows 占用CPU挺高的;vscode会在你切换文件的时候自动开启git进程。解决办法:一般情况下,我们都会独立安装git,所以在这里我就关闭了vscode自带的git功能(不影响git的使用);在setting.json中加入以下代码,关闭vscode自带的git功能。(可通过ctrl+p快捷键搜索setting.json文件) .原创 2020-09-15 14:55:06 · 853 阅读 · 0 评论 -
vue中子组件的created、mounted钩子中获取不到props中的值问题
1.问题描述:写了一个侧边栏导航组件,接收父组件传过来的对象数据,然后渲染导航栏以及所导航的内容。siderValue是左边导航栏的数据selectItems是右边需要显示的数据props: { siderValue: Array, selectItems: Object}, created() { this.selectItemsDate = this.selectIt...原创 2020-05-26 18:15:47 · 6071 阅读 · 3 评论 -
Chrome浏览器console.log()是异步的?
问题在Chrome控制台执行以下代码,发现,打印出来的a的值都为3。???为何会这样?难道console.log()是异步执行的?let arr = [];let obj = {a:1};arr.push(obj);console.log(arr);obj.a=2;console.log(arr);let obj1 = obj;obj1.a=3;console.log(arr);//[{"a":3}]//[{"a":3}]//[{"a":3}]在node环境执行同样的代码,原创 2021-03-09 15:59:55 · 1219 阅读 · 2 评论 -
解决DevTools failed to load SourceMap: Could not load content for ***.js.map: HTTP error: code 404 问题
问题DevTools failed to load SourceMap: Could not load content for ***.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME项目开发完之后,在用Chrome浏览器调试的时候发现控制台有两条警告,如图所示:分析这里抛出DevTools failed to load SourceMap警告的原因是:项目引用的第三方的JavaScript工具是压缩后的版本,原创 2021-03-09 15:03:55 · 57809 阅读 · 6 评论 -
Webpack5打包-禁止生成LICENSE文件
问题背景最近将项目中的Webpack3升级到了Webpack5,打包之后发现输出文件中多了一些LICENSE文件,如下图所示:看着就感觉怪怪的,和升级之前的输出文件不一样,总感觉是那处了问题,于是查阅资料…问题分析多输出了一些文件,那这可能是打包的输出配置出了岔子或者是用的插件中配置不太对。于是检查自己的配置…没发现什么问题呀…没看到有啥配置会让我打包输出这些文件的…于是再仔细看看官方文档吧。果然在这里发现了蛛丝马迹:Webpack 5 默认压缩代码工具为terser-webpack-原创 2021-03-05 10:09:52 · 5881 阅读 · 7 评论 -
移动端1px实现和问题踩坑
效果要实现移动端上的一像素线,window.devicePixelRatio=物理像素 /CSS像素目前主流的屏幕DPR=2或者3。拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,所以css 像素只能是 0.5。一般设计稿是按照750来设计的,它上面的1px是以750来参照的,而我们写css样式是以设备375为参照的,所以我们应该写的0.5px先看看效果:Chrome浏览器PCChrome浏览器移动端IE浏览器下,显示问题实现代码<div class="wrap"原创 2021-03-19 13:35:44 · 898 阅读 · 8 评论 -
让页面不缓存,自动刷新
不让页面从缓存中取的数据,浏览器后退后,实现自动刷新,不去取缓存原创 2021-03-18 20:08:22 · 3196 阅读 · 12 评论 -
webpack升级与优化之路
webpack升级与优化之路;升级webpack5遇到的坑;webpack打包优化;extract-text-webpack-plugin;webpack-dev-server兼容;分模块独立版本号打包多页面项目;chunkhash原创 2021-03-16 20:42:12 · 902 阅读 · 5 评论