- 博客(49)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 设置css样式不生效
比如现在开发的是vue项目，需要使用v-html指令插入html，并设置一下插入的html样式，例如demo是这样的。比如这样，我想把p标签里面的文字变成红色，但是这样设置完是不生效的，因为这里设置了style scoped，所有。所以就不生效了，解决办法也很简单，使用深度选择器就可以，像这样。深度选择器随着vue版本有所变化，具体可以自己查一下文档。
2024-03-15 16:45:00
280
原创 js使用new Image()创建img对象不生效
最后发现img怎么也拿不到，找了半天，最后发现，是Image和andv的Image组件重名了。我在做vue项目的时候，想获取到图片的宽高，然后把宽高发给后端，代码类似是这样的。
2024-02-24 15:38:23
326
原创 使用正确的js编写的正则表达式，但是无法匹配
需要注意的是，这里只是为了演示，才使用正则表达式做这个事情的，如果可以不用正则表达式，最好还是不要用。它很消耗性能，尤其是在字符串长度不可控的时候。这个，注意，这里有一个换行符。是一个标记，我需要获取到夹在中间的内容，这个例子就是需要匹配到。对于这个demo，确实可以，现在把目标字符串改一下，现在匹配。注意1和333之间有一个换行符。模式中添加s（单行模式）模式，这样\n就会被.匹配到了。其实只是自己感觉表达式正确而已，其实是错误的。，不知道大家有没有恍然大悟。我现在有一个字符串，例如。
2023-12-06 17:15:57
397
原创 String.prototype.match进行==判断
这是我在网站上找到的一个判断是否是微信浏览器的方法，不知道有没有注意到这句话。方法，所以就可以这样判断了。具体细节大家可以查询一下有关js类型转换的知识。今天发现一个String.prototype.match的奇葩用法。判断的时候会进行类型转换，这里也就是会调用。类型的数据，那么这里用。，判断是什么意思呢？是一个伪数组，当进行。
2023-12-01 16:39:15
82
原创 react项目自行配置热更新
这里还解释一下为什么不用webpack的hmr，webpack不是自带hmr么，为什么还安装其他的包呢？这个问题大家可以看一下我。我们这里基于上面的代码进行改编，这里react和react-dom需要降级，把18版本降级成17版本。，这个是官方推荐的做法。下面给出一个完整demo。react项目自己配置热更新的话需要安装两个包。这个时候热更新就不起作用了。修改webpack.config.js配置。这里说一下注意点，每个组件只能使用一个。，如果有多个，热更新会失效，修改index.js。
2023-11-26 19:17:27
713
原创 webpack配置完热更新之后还是会刷新整个页面
初始的count是0，a是1，我们点击oDIv1让他自增到2，然后修改a的值为11。然后保存代码，查看页面。如果这个时候oDIv1的值是2，oDiv2的值是11，那么就说明热更新配置成功了。但是页面没有刷新，页面是否刷新，大家可以看一下当前tab页每次更新完是否会转圈，如果没有转圈，就说明没有刷新页面，而至于各种状态如何保持之前状态，需要大家自己在。
2023-11-26 17:08:24
570
原创 IOS输入框聚焦会把内容区域顶起
我的最终解决思路是，既然聚焦会定顶起内容区域，那么顶起来多少，我就用空白的元素占位多少高度，这样内容就显示出来了。如果内容区域的高度大于了被顶起的高度（或者内容区域的高度多出了被顶起的高度20px之类的），那么就不需要占位了，因为这个时候肯定有内容区域的元素露出来了。本来初始情况会有默认的两条聊天记录，但是当点击底部的输入框时，输入框聚焦，弹起键盘，然后整个界面就被顶上去了，然后那两条默认的聊天记录也被顶上去了，导致整个页面没内容了。方法时需要一个特定的html结构的，需要这样的结构。
2023-11-20 23:32:22
794
原创 苹果手机内嵌h5如何禁止全局弹性效果
简单模拟一个场景，这是一个商城的商品分类页面，是一个左右布局，左面是所有的分类，右面是展示这个分类的商品，这里为了简单就只写一个demo了。区域滑动时，也会触发全局的弹性效果。这个时候很容易造成意想不到的交互问题，这个时候我们需要禁用掉全局的弹性效果，可以在。之后，这块区域都会有回弹效果，这个是苹果手机自带的。然而默认情况下，全局也是自带回弹效果的（这里全局指的是。如果在苹果手机上，默认情况下，某块区域设置。注意绿色和蓝色上面和下面的白色区域。，那么如果子组件高度，超过了。的高度，那你子组件就需要设置。
2023-11-20 17:19:31
737
原创 react的组件和元素的类型总结
所以到这里，这4个类型都有所关联，这里有一些绕。这里只是想说，如果以后看到这些类型，希望能不会那么困惑。其实这几种方式都有很强的关系，不是超集，就是子集。其实React中描述组件类型有很多方式，刚开始的时候还是很容易迷惑的。并且都是正确的方式，我们平时大概都用。还有一个小注意点，类似于vue的插槽吧，来看一个demo。不知道这段代码大家会不会发现是错误的，这里的。这种方式内嵌到其他组件中，正确的方式应该是。是一个联合类型，其中的一个类型就是。，并不是一个组件，所有不能使用。类型也可以，不过需要注意的是。
2023-11-18 23:48:03
560
原创 为什么axios会有params和data两个参数
不知道大家有没有过这种感觉，突然一个问题百思不得其解，然后突然有一天就明白了。然后就感觉这个问题原来这么简单，本来想记录下来，但是又感觉这么简单的问题记录下来没啥意义。但是回过头来想一想，这个问题之前其实困扰了你很长时间。感觉还是记录一下比较好，万一哪一天突然对这个问题有了新的扩展呢？好像不方便记忆，一会传2个，一会传3个的。所以一般情况下，即使是对项目封装网络请求，我也会使用。，我既想在url后面拼接参数，又想在请求体里面有参数，该怎么写呢？，get请求时如果给请求传一些参数，那么可以使用。
2023-10-26 14:23:18
649
原创 React 在非组件环境切换路由
的时候，跳转到登录页面，但是像上面这样使用路由，该怎么在组件外面（例如。做接口拦截，当接口的是响应码是。目前看这种方法好像无法做跳转。的逻辑中）做路由跳转呢。可以使用下面的方式做。
2023-10-25 17:32:49
505
原创 在useEffect中使用state，state不是最新值
第二次执行的时候并没有重新覆盖按钮的点击事件，因为useEffect监听是是空数组，所以当第二次执行。的时候，a的值是0，所以以后点击就一直输出0。执行的作用域，也就是形成了闭包。我们来简单分析一下，这是什么问题引起的。也就是每次a的值改变，就重新监听点击事件。这个问题其实是因为闭包引起的。的值是0，在组件挂载的时候注册了。之后，点击事件引用的a还是第一次。那么如果修改呢，可以这样改。但是页面可以正确渲染。注意这个时候执行了两次。
2023-10-22 14:30:31
269
原创 react-activation导致组件多渲染一次
这样替换完时候，确实只渲染了一次。报错大概意思就是让你使用react18的方法挂在节点，别使用react17的用法。应该会被打印1次，但是很奇怪，会打印两次。最开始想到的是可能是开启了。放在keepalive里面的是一个组件，组件结构很简单。react-activation版本是2.6.1。，经过检查并没有开启。最终逐一排查，发现是。react版本是18.2.0。其中给出了两种解决方案。
2023-10-17 15:35:58
275
原创 执行pm2指令一直重启
原因是这个进程结束之后自动关闭了，pm2以为是异常退出，所以就重启了。我们新加一个定时器，理论上启动之后会一直执行，不会出现自动关闭的情况，如果执行之后。这里面只有这一行语句，执行pm2 start之后应该只会打印一次。这是一个简单的pm2配置，所有的输出日志会记录到。每隔3s打印一次的话。那么就验证了上面的说法。可以验证一下，最后的结论验证成功。也会看到，这个进程重启了很多次。原因就是最开始提到的问题，会一直打印，执行一下。
2023-09-06 14:19:06
1049
原创 IOS中h5开发的一些兼容事项
方法不好用，需要使用babel转化，或者使用兼容方法例如：arr[arr.length - 1]上面这种方式在苹果手机上会失效，也就是inset属性会失效。这个可以看我的这篇文章，有详细方案。
2023-08-31 15:29:10
95
原创 使用pm2指令无法关闭程序
我在服务器使用nodejs编写了后端的代码，并且使用pm2做进程守卫，之前一直是好的。但是有一天发布了一个新版本。执行完毕之后由于pm2是自启动的，所以pm2的这个进程会自动重新启动，这样操作完就可以了。最后想到一个办法，就是强制关闭某个端口的进程，具体细节大家可以看一下这篇文章。来查看来当前的进程列表，发现这个进程是stopped状态，于是就想使用。最后发现这个进程还是无法关闭，又不能重启服务器，因为还有其他的服务。指令来将这个进程关闭，然后再手动pm2 start。查看指定端口号的id。
2023-08-04 09:53:19
253
原创 IOS webview全屏无法铺满的问题
viewport-fit=cover适配iOS的webview时，body height: 100%；/* 方案一：使用vh，vw,vh单位是相对于设备屏幕的，100vh可以撑满整个屏幕 *//* 传统写法，无法适配iOS的全屏webview *//* 方案二：这个方案不好理解，但是能用 */
2023-08-02 16:19:27
580
原创 react项目生产环境路由变化但是页面不更新
然后根据这篇文章的提示，把history和react-router-dom卸载掉，然后重新安装react-router-dom，这里其实不需要history，所有不需要安装history。搭建完毕之后，我在开发环境是没有问题的，也就是development，但是等切换到production模式之后，路由就失效了，也就是当切换路由的时候，浏览器url的路径是变化了，但是页面没有变化。所有搭建的时候踩了很多坑，并且有的包可能会有版本冲突问题或者安装的包根本就没用到。然后重启，问题解决了。
2023-07-11 10:12:00
818
原创 前端微信支付流程总结
执行这个链接之后，微信会根据redirect_uri，把code写到这个链接上，例如上面的链接，微信那边会做重定向，重定向之后的链接就是http://www.baidu.com?code=123，然后前端拿到code之后，请求后端接口，获取openId，前端获取到openId之后，存在本地。，这些东西是微信内置的，只有在微信内部才有效，不需要前端自己安装sdk啥的。第一步是前端需要拿到这个微信用户的code码，类似这样的链接。，当支付成功或者支付失败时，会重定向到这个地址。这样拼写完毕之后微信会根据。
2023-07-11 09:43:46
305
原创 h5移动端，通过监听路由回退事件关闭弹窗
在做商品详情页的时候，也调研了其他的app交互。其中有一个交互是在商品详情页，点击当前商品包含的服务详情按钮，会弹窗，点击返回按钮或者手机自带的返回，会关闭弹窗。如果是h5内嵌app的话，逻辑还是比较简单的，app监听到这个返回事件，回传给h5就好了。其实思路很简单，就是打开模态框的时候，往路由栈里面push一个当前路由一摸一样的路由，点击返回或者按键返回的时候，在弹出，然后监听对应的事件就可以了。最近在做一个商城项目，项目设计是在移动端浏览器上使用。，我在这个思路基础上，做了一些定制，代码如下，
2023-07-09 22:16:33
1079
原创 如何证明gzip启动成功
可以看到是乱码，这是因为命令行没有按照gzip的格式去解析，这也证明了gzip确实开启了。可以看到换成br之后，返回的是明文，这里说明这个服务器不支持br这种压缩方式。我用的是git的命令行工具，在命令行中输入如下命令。在换一种方式验证一下，把压缩方式换成。可以看到，这里就是明文了。
2023-07-09 15:36:17
541
原创 用css给图片设置边框有缝隙
也尝试了一些其他方法，比如使用outline代替border来设置边框，但是还是不行。最后找到了问题原因，是因为背景图片是圆形的，裁成了方形的，就解决了。下面是设置完毕之后的样式，会发现图片和边框之间有缝隙。下面是方形之后的效果。
2023-07-02 13:40:09
551
原创 如何在本地使用https
需要注意的是这是一个自签名的证书，所以打开浏览器的时候会有警告。点击仍然继续就可以正常使用了。最近开发nextjs项目，有一些需求需要在本地使用https。进行完如上操作之后就可以访问。，注意，这里是https。会自动映射到3000端口。
2023-06-27 15:23:54
547
原创 webpack中，loader从右到左（或从下到上）执行是什么意思
这里很符合上文提到从右到左（或从下到上）原则。该如何理解这句话呢？想来搭建一个demo。作为例子看看，这里的配置的意思是，如果遇到。在webpack中文文档中有这样一句话。这样配置之后，大家会不会想，遇到。这句话的意思其实是作用在同一个。其实运行之后会看到，报错了。结尾的文件，那么先用。
2023-05-22 17:59:38
170
原创 vue实现路由无限嵌套
从上面代码可以看到，只需要在想进行这种形式操作的第一层组件上做高阶组件WithRouterReplaceComp嵌套就可以，WithRouterReplaceComp会接管子级组件的渲染。也就是通过router的matched数组去知道路由是如何嵌套的，进而得到面包屑，但是在最上面给的路由是类似扁平化的。，需要注意的是，这种形式相当于一个约定，这种方法只适用于params传参形式，不适合query传参形式。，也就是有很多团队，这些团队里面的人需要写文章。，这样就不对了，正确的路由应该是。
2023-05-05 09:00:00
861
原创 [@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
1104
原创 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
3903
2
原创 https流程总结
C和S想要通信，但是不想被别人窃取数据，然后他们使用对称加密，但是对称加密密钥分发困难，所以使用非对称加密进行密钥的分发，但是使用非对称加密的话公钥也可能会被别人劫持并篡改，还是存在风险。这个时候就引入了CA，CA是权威的、可信的机构，CA使用自己的私钥对证书的消息摘要做加密，作为证书的数字签名。这样当C拿到证书时，用CA的公钥解密数字签名，然后自己把证书在生成一次消息摘要，两者进行比对，进而确定证书是可信的。如果可信，就确认证书里面的S的公钥是可信的。
2023-04-17 17:13:03
72
原创 使用router.go(-1)时，如何判断是否有历史记录
但是有一个问题，如果这个页面没有上一级页面，也就是用户直接进入的这个页面，而不是从其他页面跳转进入的这个页面，点击按钮就会失效。如图所示，左边有一个按钮，作用就是返回上一级，我是用vue3，第一个想到的是使用。有历史就返回上一级，没有历史就返回首页。我第一个想到的解决方案是监听。最后的解决方案是使用。
2023-04-10 17:24:49
810
原创 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
868
原创 decodeURIComponent中文转码问题
不知道大家有没有这样的困扰，汉字转码问题，因为浏览器会对汉字自动转码，并且某些302之后可能又转码了一次，并且有的值在各种页面的url上传递，传来传去，前端可能也不知道究竟转码了几次，然后后端就蒙蔽了，明明解码了呀，balabala。其实个人觉得最好尽量少使用汉字作为参数传递。不过要是必须用也是有办法的，那就是循环调用。对百分号敏感，所以需要用try catch 捕获异常，当error发生时，也停止继续。，直到转换完的和上一次的值是一样的为止，使用。时可能会报错，比如转码。，意思是百分之8，但是。
2023-03-27 16:52:27
845
原创 bolb、bloburl、file、base64间的转换
1.bloburl转换为file。2.file转换为base64。3.base64转换为file。4.base64转换为blob。5.blob转换为base64。
2023-03-27 16:26:20
2705
1
原创 移动端使用canvas做签名板
做手写板应用场景应该还是很常见的，比如做签名。在pages里面使用，我在里面使用了tailwind。为例子看一下基本结构。
2023-03-27 16:11:51
680
原创 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
1243
原创 使用nodejs将bilibili缓存的视频转mp4格式
但是由于是缓存资源，占用了手机大量的内存，并且还没发迁移，因为只有使用b站才能打开这些缓存的视频，所以，我仔细研究了一下，最后把它们转成了mp4，保存到了我的固态硬盘上！bilibiliVideoCache2Mp4函数的第一个参数是需要转换的视频入口，第二个参数是转换之后的视频的出口。首先需要知道b站缓存的视频都保存到了手机的什么位置，我是安卓手机，大家可以参考我的缓存地址。具体代码结构可以参考我的github的demo，github地址是。首先，bilibili是一个非常好的学习资源平台！
2023-01-09 17:30:56
904
原创 h5开发手指滑动页面造成卡顿
不知道大家有没有遇到过，就是你可能用手指滑动了好几次屏幕，正常来说页面应该会上下滚动，但是滑动好几次，就滚动了2次或者3次。我不希望用户这样，所以我就使用了这个属性禁掉了。，我没有再往下研究里面的原理是什么，但是我感觉应该和移动端点击事件有300ms延迟的问题应该差不多。但是这两种方法都不适合我，我的问题再安卓上也会出现，第二种方法我根本就没有设置，但是第二种方法我发散了一下思维，会不会是我的组件设置了。改完之后我不知道是真的起了效果还是怎么样，感觉好了一点，但是卡顿并没有完全解决。
2022-10-14 15:44:33
948
原创 javascript编写代码的一些注意点
这句上了，while的最后一次循环进去的left是2， right也是2，这里就会出现自己和自己异或的情况，也就是会得到0，应该改成。做临时变量，可能还有进阶版本，就是能不能不使用额外空间，也就是不用额外的变量。这时可以使用位运算。这样就不需要额外的临时变量了，但是这种异或操作有一个注意点，自己和自己异或是0，我们来看一个小坑。有一个单调数组，我们要反转数组：我们选用长度是奇数的数组，因为比较容易说明问题。我们会发现输出的结果是。
2022-09-18 22:11:35
148
原创 javascript对象按键访问性能问题
key是需要类型转换转成字符串的，也就是说如果key是数字，那么会被隐式转换成字符串在做存储（其实还不够准确，比如纯数字的字符串，例如。就可以，为什么还费老大的劲去写get，set？直到有一天刷题，提交之后算法显示相当的耗时。获取和设置值需要get，set方法，而直接使用对象字面量形式的话，就直接。好像也会先尝试转换成数字，这个我下文有介绍。），这是相当耗时的，而用。最近在刷一些leetcode题目，发现有的题解用的是。2. 如果key的值是非数字的字符串，会很快。下面我们再来看一个有趣的事情。
2022-09-17 22:07:00
340
空空如也
mongoose怎么快速检索前10条数据
2022-12-06
宝塔面板怎么配置pm2的NODE_ENV环境变量
2022-12-06
typescript类型转换问题
2022-07-27
前端按钮权限涉及路由跳转如何处理
2022-07-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人