![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web开发遇到的问题
程序员超超
这个作者很懒,什么都没留下…
展开
-
设置css样式不生效
比如现在开发的是vue项目,需要使用v-html指令插入html,并设置一下插入的html样式,例如demo是这样的。比如这样,我想把p标签里面的文字变成红色,但是这样设置完是不生效的,因为这里设置了style scoped,所有。所以就不生效了,解决办法也很简单,使用深度选择器就可以,像这样。深度选择器随着vue版本有所变化,具体可以自己查一下文档。原创 2024-03-15 16:45:00 · 388 阅读 · 0 评论 -
js使用new Image()创建img对象不生效
最后发现img怎么也拿不到,找了半天,最后发现,是Image和andv的Image组件重名了。我在做vue项目的时候,想获取到图片的宽高,然后把宽高发给后端,代码类似是这样的。原创 2024-02-24 15:38:23 · 367 阅读 · 0 评论 -
使用正确的js编写的正则表达式,但是无法匹配
需要注意的是,这里只是为了演示,才使用正则表达式做这个事情的,如果可以不用正则表达式,最好还是不要用。它很消耗性能,尤其是在字符串长度不可控的时候。这个,注意,这里有一个换行符。是一个标记,我需要获取到夹在中间的内容,这个例子就是需要匹配到。对于这个demo,确实可以,现在把目标字符串改一下,现在匹配。注意1和333之间有一个换行符。模式中添加s(单行模式)模式,这样\n就会被.匹配到了。其实只是自己感觉表达式正确而已,其实是错误的。,不知道大家有没有恍然大悟。我现在有一个字符串,例如。原创 2023-12-06 17:15:57 · 425 阅读 · 0 评论 -
String.prototype.match进行==判断
这是我在网站上找到的一个判断是否是微信浏览器的方法,不知道有没有注意到这句话。方法,所以就可以这样判断了。具体细节大家可以查询一下有关js类型转换的知识。今天发现一个String.prototype.match的奇葩用法。判断的时候会进行类型转换,这里也就是会调用。类型的数据,那么这里用。,判断是什么意思呢?是一个伪数组,当进行。原创 2023-12-01 16:39:15 · 87 阅读 · 0 评论 -
atob,btoa编码汉字报错
所以对于字节数大于8位的字符,atob,btoa会报错,官网里面给了几个方法 https://developer.mozilla.org/zh-CN/docs/Glossary/Base64#%E6%96%B9%E6%A1%881%E2%80%94%E2%80%94%E5%85%88%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%E4%B8%B2。对于atob,btoa编码汉字报错这个问题,之前一直以为是汉字不能转base64,前几天看了一下文档,原来MDN文档里面早就有说明的。原创 2023-04-02 12:00:00 · 950 阅读 · 0 评论 -
IOS输入框聚焦会把内容区域顶起
我的最终解决思路是,既然聚焦会定顶起内容区域,那么顶起来多少,我就用空白的元素占位多少高度,这样内容就显示出来了。如果内容区域的高度大于了被顶起的高度(或者内容区域的高度多出了被顶起的高度20px之类的),那么就不需要占位了,因为这个时候肯定有内容区域的元素露出来了。本来初始情况会有默认的两条聊天记录,但是当点击底部的输入框时,输入框聚焦,弹起键盘,然后整个界面就被顶上去了,然后那两条默认的聊天记录也被顶上去了,导致整个页面没内容了。方法时需要一个特定的html结构的,需要这样的结构。原创 2023-11-20 23:32:22 · 885 阅读 · 0 评论 -
苹果手机内嵌h5如何禁止全局弹性效果
简单模拟一个场景,这是一个商城的商品分类页面,是一个左右布局,左面是所有的分类,右面是展示这个分类的商品,这里为了简单就只写一个demo了。区域滑动时,也会触发全局的弹性效果。这个时候很容易造成意想不到的交互问题,这个时候我们需要禁用掉全局的弹性效果,可以在。之后,这块区域都会有回弹效果,这个是苹果手机自带的。然而默认情况下,全局也是自带回弹效果的(这里全局指的是。如果在苹果手机上,默认情况下,某块区域设置。注意绿色和蓝色上面和下面的白色区域。,那么如果子组件高度,超过了。的高度,那你子组件就需要设置。原创 2023-11-20 17:19:31 · 783 阅读 · 0 评论 -
React 在非组件环境切换路由
的时候,跳转到登录页面,但是像上面这样使用路由,该怎么在组件外面(例如。做接口拦截,当接口的是响应码是。目前看这种方法好像无法做跳转。的逻辑中)做路由跳转呢。可以使用下面的方式做。原创 2023-10-25 17:32:49 · 532 阅读 · 0 评论 -
在useEffect中使用state,state不是最新值
第二次执行的时候并没有重新覆盖按钮的点击事件,因为useEffect监听是是空数组,所以当第二次执行。的时候,a的值是0,所以以后点击就一直输出0。执行的作用域,也就是形成了闭包。我们来简单分析一下,这是什么问题引起的。也就是每次a的值改变,就重新监听点击事件。这个问题其实是因为闭包引起的。的值是0,在组件挂载的时候注册了。之后,点击事件引用的a还是第一次。那么如果修改呢,可以这样改。但是页面可以正确渲染。注意这个时候执行了两次。原创 2023-10-22 14:30:31 · 291 阅读 · 0 评论 -
react-activation导致组件多渲染一次
这样替换完时候,确实只渲染了一次。报错大概意思就是让你使用react18的方法挂在节点,别使用react17的用法。应该会被打印1次,但是很奇怪,会打印两次。最开始想到的是可能是开启了。放在keepalive里面的是一个组件,组件结构很简单。react-activation版本是2.6.1。,经过检查并没有开启。最终逐一排查,发现是。react版本是18.2.0。其中给出了两种解决方案。原创 2023-10-17 15:35:58 · 309 阅读 · 0 评论 -
执行pm2指令一直重启
原因是这个进程结束之后自动关闭了,pm2以为是异常退出,所以就重启了。我们新加一个定时器,理论上启动之后会一直执行,不会出现自动关闭的情况,如果执行之后。这里面只有这一行语句,执行pm2 start之后应该只会打印一次。这是一个简单的pm2配置,所有的输出日志会记录到。每隔3s打印一次的话。那么就验证了上面的说法。可以验证一下,最后的结论验证成功。也会看到,这个进程重启了很多次。原因就是最开始提到的问题,会一直打印,执行一下。原创 2023-09-06 14:19:06 · 1190 阅读 · 0 评论 -
IOS中h5开发的一些兼容事项
方法不好用,需要使用babel转化,或者使用兼容方法例如:arr[arr.length - 1]上面这种方式在苹果手机上会失效,也就是inset属性会失效。这个可以看我的这篇文章,有详细方案。原创 2023-08-31 15:29:10 · 111 阅读 · 0 评论 -
使用pm2指令无法关闭程序
我在服务器使用nodejs编写了后端的代码,并且使用pm2做进程守卫,之前一直是好的。但是有一天发布了一个新版本。执行完毕之后由于pm2是自启动的,所以pm2的这个进程会自动重新启动,这样操作完就可以了。最后想到一个办法,就是强制关闭某个端口的进程,具体细节大家可以看一下这篇文章。来查看来当前的进程列表,发现这个进程是stopped状态,于是就想使用。最后发现这个进程还是无法关闭,又不能重启服务器,因为还有其他的服务。指令来将这个进程关闭,然后再手动pm2 start。查看指定端口号的id。原创 2023-08-04 09:53:19 · 289 阅读 · 0 评论 -
IOS webview全屏无法铺满的问题
viewport-fit=cover适配iOS的webview时,body height: 100%;/* 方案一:使用vh,vw,vh单位是相对于设备屏幕的,100vh可以撑满整个屏幕 *//* 传统写法,无法适配iOS的全屏webview *//* 方案二:这个方案不好理解,但是能用 */原创 2023-08-02 16:19:27 · 631 阅读 · 0 评论 -
react项目生产环境路由变化但是页面不更新
然后根据这篇文章的提示,把history和react-router-dom卸载掉,然后重新安装react-router-dom,这里其实不需要history,所有不需要安装history。搭建完毕之后,我在开发环境是没有问题的,也就是development,但是等切换到production模式之后,路由就失效了,也就是当切换路由的时候,浏览器url的路径是变化了,但是页面没有变化。所有搭建的时候踩了很多坑,并且有的包可能会有版本冲突问题或者安装的包根本就没用到。然后重启,问题解决了。原创 2023-07-11 10:12:00 · 874 阅读 · 0 评论 -
如何证明gzip启动成功
可以看到是乱码,这是因为命令行没有按照gzip的格式去解析,这也证明了gzip确实开启了。可以看到换成br之后,返回的是明文,这里说明这个服务器不支持br这种压缩方式。我用的是git的命令行工具,在命令行中输入如下命令。在换一种方式验证一下,把压缩方式换成。可以看到,这里就是明文了。原创 2023-07-09 15:36:17 · 593 阅读 · 0 评论 -
如何在本地使用https
需要注意的是这是一个自签名的证书,所以打开浏览器的时候会有警告。点击仍然继续就可以正常使用了。最近开发nextjs项目,有一些需求需要在本地使用https。进行完如上操作之后就可以访问。,注意,这里是https。会自动映射到3000端口。原创 2023-06-27 15:23:54 · 650 阅读 · 0 评论 -
前端开发小问题总结
前端开发小问题总结。原创 2023-06-11 21:20:52 · 759 阅读 · 0 评论 -
[@vue/compiler-sfc] compileTemplate now requires the `id` option.`
使用webpack自建的vue项目启动时,配置了ts-loader,也就是在项目里面使用ts。启动的时候是正常的,然后启动之后随便改一点内容,dev-server进行热更新之后。解决办法是把入口文件的index.js改成index.ts。然后入口文件是index.js。App.vue随便写一点内容。原创 2023-05-04 22:20:20 · 1174 阅读 · 0 评论 -
axios会对url的参数进行encodeURIComponent编码问题
这里我们使用了paramsSerializer,其实可以看我的第一张图片,buildURL的第三个入参就是paramsSerializer,也就是如果外界传入了paramsSerializer,那么_encode就是paramsSerializer,如果没传_encode就是内置的encode。可以看到axios里面使用的是XHR,也就是ajax,在我画红框的地方有一个buildURL方法,然后把params传入了这个方法,来看一下buildURL具体实现。也就是在使用axios时候,parms的参数是。原创 2023-04-28 17:25:07 · 4296 阅读 · 2 评论 -
移动端使用canvas做签名板
做手写板应用场景应该还是很常见的,比如做签名。在pages里面使用,我在里面使用了tailwind。为例子看一下基本结构。原创 2023-03-27 16:11:51 · 756 阅读 · 0 评论 -
使用router.go(-1)时,如何判断是否有历史记录
但是有一个问题,如果这个页面没有上一级页面,也就是用户直接进入的这个页面,而不是从其他页面跳转进入的这个页面,点击按钮就会失效。如图所示,左边有一个按钮,作用就是返回上一级,我是用vue3,第一个想到的是使用。有历史就返回上一级,没有历史就返回首页。我第一个想到的解决方案是监听。最后的解决方案是使用。原创 2023-04-10 17:24:49 · 925 阅读 · 0 评论 -
decodeURIComponent中文转码问题
不知道大家有没有这样的困扰,汉字转码问题,因为浏览器会对汉字自动转码,并且某些302之后可能又转码了一次,并且有的值在各种页面的url上传递,传来传去,前端可能也不知道究竟转码了几次,然后后端就蒙蔽了,明明解码了呀,balabala。其实个人觉得最好尽量少使用汉字作为参数传递。不过要是必须用也是有办法的,那就是循环调用。对百分号敏感,所以需要用try catch 捕获异常,当error发生时,也停止继续。,直到转换完的和上一次的值是一样的为止,使用。时可能会报错,比如转码。,意思是百分之8,但是。原创 2023-03-27 16:52:27 · 891 阅读 · 0 评论 -
nuxt如何使用pm2配置环境变量
这里的env_dev和env_prod是pm2文档里面给的规范,执行的时候’env_'是省略的,比如执行。大家在使用nodejs的时候可能都有过不同的环境,设置的环境变量的值不一样的情况,比如开发模式我想设置。基本使用就是这样,现在我想要在nuxt项目上使用pm2,遇到了一些坑,下面来总结一下。注意:nuxt.config.js中拿到的process是真正的process。,这里的dev就是env_dev,然后环境变量。这个值就可以根据你执行的不同指令而变化了。文件,里面的内容也比较简单,大概是这样的。原创 2023-01-18 23:31:20 · 1283 阅读 · 0 评论 -
h5开发手指滑动页面造成卡顿
不知道大家有没有遇到过,就是你可能用手指滑动了好几次屏幕,正常来说页面应该会上下滚动,但是滑动好几次,就滚动了2次或者3次。我不希望用户这样,所以我就使用了这个属性禁掉了。,我没有再往下研究里面的原理是什么,但是我感觉应该和移动端点击事件有300ms延迟的问题应该差不多。但是这两种方法都不适合我,我的问题再安卓上也会出现,第二种方法我根本就没有设置,但是第二种方法我发散了一下思维,会不会是我的组件设置了。改完之后我不知道是真的起了效果还是怎么样,感觉好了一点,但是卡顿并没有完全解决。原创 2022-10-14 15:44:33 · 994 阅读 · 0 评论 -
javascript中a++和++a区别
1. 后缀自增法(a++): 先进行表达式运算,再进行自增运算。2. 前缀自增法(++a): 先进行自增运算,再进行表达式运算。原创 2022-08-22 22:23:49 · 1112 阅读 · 0 评论 -
移动端h5显示pdf的3种方法总结
是什么,他是pdfjs提供的一个渲染pdf的入口,也就是通过iframe内嵌viewer.html,然后通过file字段告诉。基本起步就是这些,我把我的一些代码粘贴到这里。,但是静态资源会被重定向到index.html,所以一定要配置。第一个是pdfjs-dist下载需要下载2.0.943版本。是你的静态资源路径,例如你的网页地址是。这种.pdf的形式,也可以是。,这种blob二进制流形式。然后在使用的时候是这样的。...原创 2022-08-16 10:23:04 · 16416 阅读 · 0 评论 -
移动端调起软键盘会执行resize事件问题
最后找到了问题的原因,原来是移动端调起软键盘会执行resize事件,也就是说调起软键盘会执行setRem,经过测试我发现,假如屏幕宽度是375px,那么唤起软键盘之后的屏幕宽度还是375px。下面来描述一下问题场景,初始渲染会执行resize事件外面的那个setRem,例如渲染完毕字体是16px,然后执行缩小字体功能,假如变成了10px,这时我需要搜索一些关键词,当我点击输入框,弹起软键盘的时候,字体又变成了16px,这让我百思不得其解。最近做h5有一个需求,页面的话是展示一篇文章,文字很多。...原创 2022-08-01 11:22:21 · 785 阅读 · 0 评论 -
js对象按值传递的一些问题
js中纯对象和函数,按值传递的一些问题原创 2022-07-24 21:35:23 · 170 阅读 · 0 评论