自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

业余前端的职业经历

一位又菜又想分享的前端博主,汇集前端杂七杂八的知识,喜欢博主的给博主点个赞!

  • 博客(908)
  • 资源 (6)
  • 收藏
  • 关注

原创 浏览器客户端生成唯一标识码 用来识别访问用户 (偏门方法)

那个visitorId 就是唯一了 就算刷新页面 还是同一个 不会变。其实吧唯一标识用户的方法 获取mac地址或者ip地址比较唯一吧。但是好像很可惜 js好像获取不到。关注我 持续更新 前端知识。这里通过一个js库来实现哈。

2023-06-03 17:09:22 8

原创 js中让函数只执行一次

在做项目的时候 经常会碰见一些 只允许我们请求一次的情况,当我们来回切页面 或者 切换tab的时候 第一次切换 可能需要我们请求数据。今天要讲的就是另一种思路了 让函数在当前情况下 只能执行一次,这个其实还比较简单 我们可以利用闭包的知识来处理。但是当切换过之后 就不需要再次请求数据了 以往我们的做法 可能判断这个页面有无数据 或者是看是否是第一次点击。这里还要注意的是 如果你的组件被卸载的话 还是最好 注意清理掉引用。查看打印的效果 会发现 只是打印了一次 hello world。

2023-06-02 21:17:23 15

原创 css3中实现从子元素出发 找到父元素

可能有的童鞋会有这种想法 其实还确实有这种选择器 就是伪类选择器。其实有很多伪元素选择器还是很强大 css往深处去 也是很复杂的。通过span元素选中 p元素 并加上一个边框。关注我 持续更新前端知识。

2023-06-02 21:07:11 14

原创 router-view多级嵌套,导致经常路由更新了 但是页面并没有跳转

问题我下面的路由还是懒加载的,我都严重怀疑 当我访问的时候 我的路由并没有加载出来,终究还是我太菜了, 因为随着项目的变大, 路由的地址也是越来越长。我也不知道为什么原因 所以我把路由的懒加载去掉之后 恢复正常了。关注我 持续更新前端知识。

2023-06-01 20:48:34 201

原创 js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子), 这个好像比想象中的更好用

对前端同学来说,可能经常要做到倒计时的功能,特别是一些电商的网站。或者做一些搞活动的页面,倒计时开始。就拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒首先可能想到就是。

2023-05-30 22:43:17 319

原创 keep-alive 在vue-router@4.*中使用, 缓存当前路由页面 vue3中使用

这东西还是挺有用的,毕竟有些页面的数据 我们只用请求一次,而且请求方法一般都在Mounted中请求,在我们来回切换页面的时候,有的时候并不需要不停的刷新页面的数据, 这个时候 keep-alive 就起到了 很好的作用。这里也有一个tips 就是前端同学尽量还是做到,能减少请求就减少请求,比如一些数据的刷新能在本地操作就本地操作,不和服务端发生交互。前端日新月异的变化更新数据,不像隔壁的java jdk都更新到十几了 jdk8 还在用 哎。关注我 持续更新前端知识。缓存当前路由的所有页面。

2023-05-30 21:34:18 14

原创 vite中批量导入文件, 以pinia状态管理为例

这里再啰嗦几句话,我觉得吧前端同学特别是工作一年以上还没怎么接触或者使用ts的童鞋,还是最好玩玩,可能刚上手比较痛苦,各种比较莫名其妙的报错,但当你真正慢慢熟悉就会发现它的方便和魅力所在。一般来说每个公司有自己架子习惯哈,这个会有所不同,所以一会看我的例子的时候首先看是否适合你的项目哈。vite中有一个批量导出的工具函数 import.meta.glob。每个项目不太一样哈,仅仅做参考例子,没有更好的只有适合的。回归正题,随着项目变大之后,状态管理文件也越来越多。拿单独的a文件举例 a.ts。

2023-05-19 11:26:35 323

原创 vite ts版本打包报错 Paths must either both be absolute or both be relative

我首先吧vue-tsc 这个插件更新到最新的版本,然后把打包生成的配置缓存文件 删除下 就是那个。很遗憾我也找不到路径那里错了,现在项目大起来 根本没办法一个一个去翻找 查看。从报错上看 说路径要不 相对要不绝对 明显是路径那里引错了。tsconfig.tsbuildinfo 这个文件哈。真的是奇怪哈 ,希望大家都不要碰见稀奇古怪的问题。很莫名其妙,之前打包都好好的 突然就报错了。翻了国内外的文档也没找到合适的答案。我直接说我这个最后处理的方法吧。关注我 持续更新前端知识。然后重新打包 就可以。

2023-05-15 10:38:30 27

原创 umi4中 修改网站icon 图标

其实在开发umi项目中很重要的一项 就是看文档,特别是umi的配置文档,但是吧 有些时候 一些配置看起来一言难尽。但是这个图标的位置 就很有学问了 他是针对根目录的 所以如果你按照文档上的来的话。关注我 持续更新 前端 相关 知识。

2023-05-14 15:25:13 12

原创 umi4中 设置环境变量

对于vue或者umi3同学可能熟悉哈 我这一年多没有搞过react项目的了,一上来环境变量 就把我搞的有点懵了 还好之前才过很多坑了。umi3中可能是在config中进行配置的 umi4 来通过.umirc配置文件。注意如果是ts文件的话 要声明下类型哦 否则在组件中使用就会抱提示错误。你在umirc文件统计目录下长江一个 .umirc.test.ts。文件 最方便的方式就是 copy下 umirc文件改下名字即可。在src文件下 创建一个 types.d.ts 生命文件。支持跨平台配置环境变量。

2023-05-14 15:19:52 294

原创 使用gsap实现长文本文字,一个一个文字逐个弹出来效果

代码很简单,主要是各种配置 需要你自己找去理解,和echarts 有点类似的用法。先看效果吧,其实要做动画 可以了解了解这个动画库。关注我 持续更新 前端知识。

2023-05-05 11:43:47 17

原创 在vite中使用mockjs, vite中使用vite-plugin-mock

然后还有一个小建议就是最新版本的插件也就是 3.0.0 有可能报 esbuild 就是大概你用到commonJS中的reuqired方法报错。这里插一句哈,如果你使用的是pnpm的话, 正常来说因为这个插件肯定是依赖mockjs 的但是,他可能不会自动安装。推荐一个更强大的功能齐全的还是使用 apifox吧 上面更方便,根据后端文档所定的mock。相信前端同学都会碰见类似的问题,就是页面可能很快写完了,但是接口同学还在缓慢设计表中!这个时候咳咳,你就可以去摸鱼了或者看小说了。关注我 持续更新前端知识。

2023-04-24 16:14:10 311

原创 tring.prototype.replaceAll called with a non-global RegExp argument

正是因为 你使用 replaceAll 这个字符串api 然后使用正则匹配自负来进行替换。那个g 全局匹配是要必须加的,还有一个matchAll 这也是如此。这个时候你必须在正则后面加一个 g 否则就报错了。如果真想 最好还是用字符匹配吧。关注我 持续更新前端知识。类似去掉空格 我们可以。

2023-04-23 10:31:00 141

原创 mac 使用tar命令打包文件 并忽略某些指定文件

/ 打包当前文件夹下的内容 并且忽略 git 和node_modules文件夹。tar的用法和linux差不多 区别可能主要在这个忽略上。**注意最后的 ./ 就是当前文件夹 **关注我 持续更新 前端知识。

2023-04-12 19:41:39 30

原创 vite+ts 中全局定义的方法无法识别 类型报错 类型“{ $: ComponentInternalInstance;...“

因为有一些全局的方法 我们直接挂在了 app.config.globalProperties。但是我们挂完之后 发现在模版中使用的时候 会出现ts的语法报错提示。然后可以直接在模板中使用这些方法 比如一些过滤器什么的东西。在全局的声明文件中 你也可以自己创建一个文件哈。其实你不管也没啥子影响 不影响程序的运行哈。这个时候其实需要我们提前声明一下就可以了。然后再回去看 好像没有报错了 是吧。关注我 持续更新前端知识。

2023-04-06 15:25:19 579

原创 element-plus官网访问太慢 下载文档到本地部署 实现快速查阅

我只是吐槽下 element基于githup pages这个部署文档地址 本来访问就慢,然后吧这个文档看的人还很多,导致更慢了 经常卡半天才出来文档地址。文档的地址(你直接下载下来 想跑起来的话可能需要更改文档的路径地址, 最方便的就是下载一个nginx进行部署, 这个也是前端同学应该学会的东西)这下访问就很爽了 可以愉快的开发了 本来工作就很不爽了,过程中应该怎么舒服怎么来。在 vi /usr/local/etc/nginx/nginx.conf。下载到本地之后,然后下载一个nginx。

2023-03-30 11:37:36 710 1

原创 js原生设置cookie和获取cookie 不需要引入什么插件

经常用本地缓存 可能cookie用的少了就不会用了,其实不然,有的时候还是要用到cookie的。这玩意很简单,不需要引入什么插件 自己编写两个方法即可。直接拿去使用不用谢 关注我 持续更新前端知识。

2023-03-16 09:52:02 55

原创 vite中动态引入图片,打包之后找不到图片地址?

注意URL里面不能是纯变量,那样就会报错了 详细的报错 你可以去试试看。更好的就是直接在模板中调用一个函数 然后传入图片的名字就可以显示出来。不管是本地开发 还是打包之后都会找到具体的图片引入显示到页面中。一般来说项目中我们集中存放图片,然后希望在页面中直接引入!再src目录下 static 下创建一个images文件。然后在/src/utils/mixin.js文件。我们就可以在所有的组件模板中直接使用了。事实上确实可以办到,我们用到了一个。关注我持续更新 前端知识。然后在main.js中。

2023-03-13 17:24:06 667

原创 vite项目中 引入本地word文档,docx文件渲染到本地

又是一周休息的时刻了 关注我 持续更新 前端知识 帮助刚入行的前端童鞋一点,能帮点就帮点,都是踩坑的经历。在本地渲染很简答 需要一个插件 就可以了。这个样式注意下 如果是在移动端使用的话。

2023-03-10 21:34:44 52

原创 微信公众号h5关闭当前窗口

有的时候我们h5支付成功之后 需要关闭整个窗口。关注我 持续更新 前端知识。这个时候可以有两种方式了。

2023-03-10 21:26:15 34

原创 html2canvas 生成h5海报图片底部有白边

如果背景是一个背景颜色的话 其实还是比较好搞的将 hmlt2canvas的背景图改成和背景色一样就好了。这个大概率就是因为定位最后拍照的那一刻偏移导致的。这样白色边线 就看不见了。关注我 持续更新 前端知识。

2023-03-10 21:23:29 29

原创 ios点击input输入框 页面变大 (禁止浏览器缩放)

本来这个东西是为了优化用户体验,手机上点击输入框太小了 所以会在用户点击的时候放大屏幕中的内容。user-scalable=no 这个加到html中的head中。关注我 持续更新前端知识。我们其实是可以禁止的。

2023-03-02 20:14:02 319

原创 vue-router@4.* 中匹配任意路由地址

关注我 持续更新前端知识。

2023-03-02 20:13:29 101

原创 ios中input输入框 设置box-shadow失效问题

CSS 属性被用于按照 浏览器所在的操作系统所用主题,以平台本地的样式显示元素。如果经常做h5童鞋会碰见各种各样的问题。关注我 持续更新 前端知识。

2023-03-02 20:11:34 24

原创 Taro小程序vue3版本在 setup中获取不到扫码的携带的地址栏参数

其实大概率 携带过来的参数 实在onLoad中携带过来 但是官网中说可以通过useRouter 这个hook获取到 然后事实却不是这样。但是如果我把useRouter() 执行在onLoad后面的话 就可以正常获取到参数了。最后没办法 只能使用useLoad这个api在setup中使用了 获取地址栏参数了。突然客服提出了问题,大概就是用户使用客户端扫码的时候,页面数据没有出来!然后问题到我这里了, 我发现请求请求参数不存在。但问题是 onLoad 是可以获取到数据的。这样肯定不想我想要的了,

2023-03-01 18:17:15 85

原创 uni.chooseImage 在ios真机上唤不醒选择图片功能(h5)

因为uni.chooseImage 也是异步任务并且里面也是promise封装的, 而我们在上面的执行都依赖于上面的异步任务执行, 应该就是异步执行导致,大概率是上次事件循环没有执行完。想让后面执行的话 需要添加到 下一个事件队列中执行了。这样就可以了 保证上一个任务执行完了。上面的这两种方法都没有 唤醒选择图片。但是更换成下面的这种方式就不会影响了。这个问题在pc上并没有复现!这样的事情 发生真的是很奇怪。关注我 持续更新前端知识。

2023-02-23 22:00:44 64

原创 pnpm 安装的依赖 项目跑不起来 报错我项目依赖找不到?

比如一些依赖可能在node_modules 根目录下 让所有的 依赖于它的依赖可以访问, 再其次就是自动默认安装缺失的依赖,还有就是依赖丢失或者找不到的话 命令自动失败。然后项目就跑不起来,我很奇怪 然后重新使用 npm i走了遍发现可以正常运行。后面翻了翻pnpm的文档才发现 这玩意也需要配置一些东西 才生效。我只是知道 有一个pnpm的这个包管理工具 但是从来没用过!然后开始分析报错,报的都是依赖找不到的问题 就很奇怪。让我知道这肯定是 pnpm 的问题了,我看到下面报错中 更多的都是依赖缺失。

2023-02-06 14:55:44 1418

原创 Cannot read properties of undefined (reading ‘tapPromise‘)

so 你只能安装比较低版本的 compression-webpack-plugin 这个插件 来对应webpack4。报出这个问题就是因为 你的这个版本过高 因为这个api 只能在webpack5中才能使用。compression-webpack-plugin 这个插件版本的问题。因为很多老项目可能并没有升级webpack5。我更换成了 4.0.0 就可以正常运行了。关注我持续更新前端知识。

2023-02-06 14:41:15 66

原创 周末无事做一个,左右滑动的容器,底部有滑动进度指示的 前端小demo(常见于移动端)

先上效果图吧 其实还是比较简单的,就是监听上面滚动的距离 占 父元素可滚动距离的百分比进行 在手机上查看效果更好。啥都不说 先上例子 这个在移动端非常常见哈!我们web前端 什么小程序和h5其实也会碰见。关注 长期更新前端相关知识。

2023-02-04 10:43:22 79

原创 vue3全局注入方法,防止每个页面不停的引入

其实很多小伙伴都是从vue2过来的 我们之前想要注册一个全局属性,让所有的子组件 都可以使用到也许会这样书写 就是。

2023-02-01 15:21:36 1934

原创 less 循环遍历生成有规律的类名(m-l-1, p-l-2等)

这个是我参考uview中有内置类名,当你想设置外边距为15px的时候 只需要给元素加上 u-margin-left-15。后来新项目用的是less 就去官网上找到类似的用法。然后就可以直接在元素中使用了。关注我 持续更新 前端知识。

2023-01-05 10:15:50 188 4

原创 vant4 + vite3.* + vue-router@4.* + pinia 模板

我好像没有找到现成的,只好自己简单配置了下,有需要的童鞋直接拿去用。

2023-01-03 15:03:05 68 1

原创 谷歌浏览器注入的样式表 (更改了我网页的样式)

好像是那个扩展程序开启之后,修改了我浏览器的样式,这个就很烦人,其实出现这个问题就是我起的样式类名,刚好和人家的一样,所以导致我的被重写了!我想着是不是最近我安装了什么东西,好像确实安装了一个扩展程序,我把那个扩展程序关掉之后,样式就恢复正常了!突然有一天哈,我的网页莫名其名样式乱了,我检查样式中发现,多了一个注入的样式表,我还找不到位置所在!我把网页放到火狐中,发现是正常的!这个时候猜测就是谷歌浏览器的问题了!后面我为了重新启用我的插件,只好把类名改了,这个太难受了!关注我 持续更新前端知识。

2022-12-28 15:12:41 337 2

原创 禁止移动端h5长按下载图片(笔记)

ios好像有的默认就不支持 长按下载图片1.

2022-12-08 13:56:05 220

原创 微信h5 使用jssdk支付成功后,点击完成 页面关闭了,引出微信“点金计划“

/ 如果你想对这个页面进行定制化开发,其实也可以,他跳转过来是会带上商家订单号,你可以拿这个订单号去请求接口,然后展示一些更加详细的数据,这都是看你们自己的产品需求了。tips: 这个提个醒吧,这个商家小票页面, 如果你的项目是用vue开发或者react 可以在你的项目中 开发一个页面即可 也可以单独搞一个html文件也成。作为前端童鞋的话,其实自定义商家小票的页面,开发完成后,你放到服务器,然后: 【登录微信支付服务商平台 → 服务商功能 → 点金计划】。至于里面的细节 可以看商家小票的开发文档。

2022-11-23 19:42:58 1041 6

原创 微信内置h5浏览器 getBrandWCPayRequest支付

最后还有一个小问题就是 如果你的微信支付商家是 微信那边特约商家的话。支付完成后 会把你h5网页关闭 这个需要你参加那个“点金计划”// 有一个点需要记住 就是那个时间戳那块是字符串哈 如果接口给你返回的是 int类型的话 记得修改下。通过这个API进行微信支付,好的一点是不用在引入那个weixin-jssdk那个文件库了。但在新版本的微信中其实都不建议使用这个方式进行支付了 都推荐wx.chooseWXPay。但是吧微信到现在 也仍然支持这个方法。关注我 持续更新前端知识。具体公告详情 请查看。

2022-11-22 10:35:22 1438

原创 wx.chooseWXPay 调用支付JSAPI缺少参数: appId

我上面说的一切的前提就是 你们公众号后台那里 什么基础的域名都配置好的前提下。请先进行校验是否你的所有的信息能通过微信那边校验。这个就是很简单你没有 缺少了 appid。// 这里 这里的配置 不要写错哦!看文章千篇一律 没有一个说到点子上!

2022-11-18 13:47:06 452

原创 chooseWXPay:fail, the permission value is offline verifying

应该是你在模拟器上进行测试的吧!切到真机上就行了,可能模拟器不让模拟微信支付。

2022-11-18 13:37:14 103

原创 css将元素置于视图中心,禁止底部遮罩层滚动

禁止遮罩层滚动这个其实比较好处理 我们有的时候 会自己封装一个遮罩层,但是在上面弹出东西的时候,下面的内容还在滚动 其实这个时候我们可以通过js进行控制的。将元素设置到视图中心(不论页面怎么滚动都在中心位置) 这个更简单了 就是css3的属性 我们不考虑元素的宽高哈。全屏的遮罩层 其实也好处理 就是讲一个元素基于body 进行 绝对定位 然后宽高设置 100% 100% 即可。google firfox safari 都可以哈。关注我 持续更新前端知识。

2022-11-01 16:13:56 550

原创 vue3状态管理工具pinia的插件书写,pinia全局错误处理插件安排

有些初学者可能比较恐惧插件,或者希望自己啥时候能写一个插件,其实这玩意搞明白没啥子,首先不要怕,看着那些大佬一个一个插件写的那个牛掰,自己好的插件写不出来,写个简单差的也行,最主要的是中间自己收获了什么!当然也有一些大哥可能会说到,我从来都没用过这个玩意,说实话一个真正考虑比较全面的项目,应该考虑出错后的问题处理,而不是一味相信程序一定会走正确的“线路”但是你要搞明白为什么要这么做,这个才是最主要的了!需要我们去写一个统一中间处理的逻辑方法,其实这个方法就是一个插件,本质也就是一个“函数”

2022-10-20 16:10:43 289

jiuxian.zip

完成一个静态的页面,用html+css完成的一个电商界面,jquery完成一些特效.可以作为大学毕设设计参考页面,为需要的同学提供一点帮助吧

2020-02-06

jsonToExcel.rar

由于工作需要 将后端返回的数据 选出有效的数据 用户点击下载 可以导出为excel表格形式 可用户看

2019-12-06

基于PHP+MYSQL的电子商务系统有前后台和数据库(没有tp框架知识的慎重下载).rar

数据库我用的是mysql,能实现基本的功能,商品的展示,加入购物车,结算,也有后台管理系统,管理数据库里面的数据,很适合新手参考学习

2019-10-22

西游记四个小人物走动,css3的知识 有兴趣的童鞋参考.rar

css3中的动画特性,形成人物走动特效,感兴趣的童鞋可以学下,很简单的

2019-10-21

html5新特性canvas绘制弹幕

用js封装的弹幕函数,里面有构造函数,用html5的新特性,同时是参考bilili写的,感兴趣的同学可以参考下

2019-10-14

轮播图资源,有需要的同学可以下载参考下.rar

不需要下载jquery,我使用的是cdn,直接更换图片地址,就可以使用了。中间的有些注释是按照我自己的意思写的可能有的地方有些欠缺,

2019-09-17

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除