06 2024 档案

微信内置H5支付
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 场景是用户通过微信扫app内的收款码，跳到一个h5页面。然后完成支付。 代码实现的整体流程： 使用微信扫码，码是app内生成的，码的内容是一个h5页面链接，扫码完成后跳转到自定义的h5支付界面。 扫码进入后，将页面展示所需要的参数进行缓存起来， 阅读全文
posted @ 2024-06-29 17:41 林恒 阅读(102) 评论(0) 推荐(0) 编辑
记录---实现一个支持@的输入框
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 近期产品期望在后台发布帖子或视频时，需要添加 @用户 的功能，以便用户收到通知，例如“xxx在xxx提及了您！”。然而，现有的开源库未能满足我们的需求，例如 ant-design 的 Mentions 组件： 但是不难发现跟微信飞书对比下，有两 阅读全文
posted @ 2024-06-28 18:17 林恒 阅读(120) 评论(0) 推荐(0) 编辑
sessionStorage 能在多个标签页之间共享数据吗？
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 最近，我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。 sessionStorage 能在多个标签页之间共享数据吗？在回答这个问题之前我们先来聊聊另一个存储API localstorage loc 阅读全文
posted @ 2024-06-27 18:02 林恒 阅读(259) 评论(0) 推荐(0) 编辑
记录--vue3中使用Swiper组件
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 一，安装 npm i swiper 二，使用 swiper/vue 导出 2 个组件：Swiper 和 SwiperSlide <template> <swiper :slides-per-view="3" :space-between="50 阅读全文
posted @ 2024-06-26 17:28 林恒 阅读(824) 评论(0) 推荐(0) 编辑
vue如何实时展示海康威视摄像头多画面？
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 关于大屏视频监控有三种解决方案： 1.海康威视 优点：实时性强。多画面运行流畅，缺点：会覆盖在DOM最上方无法选中可能会导致样式挤压变形等样式问题 2.[flv视频流]+[nodeServer] 优点：可配置性强 缺点：服务端大流量稳定性不确定 阅读全文
posted @ 2024-06-25 18:24 林恒 阅读(1209) 评论(2) 推荐(1) 编辑
骚操作：如何让一个网页一直处于空白情况？
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 如题，惯性思路很简单，就是直接撸上一个空内容的html。 注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) ** <!DOCTYPE 阅读全文
posted @ 2024-06-24 18:21 林恒 阅读(84) 评论(0) 推荐(0) 编辑
解决uniapp h5 本地代理实现跨域访问及如何配置开发环境
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 如何解决uniapp H5本地代理实现跨域访问？ 1.第一种解决方法： 直接创建一个vue.config.js文件，并在里面配置devServer，直接上代码，重启跑项目 亲测有效 // vue.config.js module.exports 阅读全文
posted @ 2024-06-21 17:29 林恒 阅读(1791) 评论(0) 推荐(0) 编辑
记录--单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 需求背景 从第三方采购的vue2 + ElementUI实现的云管平台，乙方说2011年左右就开始有这个项目了（那时候有Vue了吗，思考.jpg）。十几年的项目，我何德何能可以担此责任。里面的代码经过多人多年迭代可以用惨不忍睹来形容，吐槽归吐槽 阅读全文
posted @ 2024-06-20 18:41 林恒 阅读(159) 评论(0) 推荐(1) 编辑
记录--前端如何截屏
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 前端常用的截图保存的方法 利用 Blob 对象和 URL.createObjectURL：可以将截图数据转换为 Blob 对象，然后使用 URL.createObjectURL 方法生成一个临时的 URL，将这个 URL 赋值给 <a> 标签的 阅读全文
posted @ 2024-06-19 18:53 林恒 阅读(186) 评论(0) 推荐(1) 编辑
记录--createObjectURL这个API真好用，我举几个场景你们就懂了
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 前言 随着我用 URL.createObjectURL 这个 API 越来越多次，越发感觉真的是一个很好用的方法，列举一下我在项目中用到它的场景吧~ 图片预览 以前我们想要预览图片，只能是上传图片到后端后，获取到url然后赋予给img标签，才能 阅读全文
posted @ 2024-06-18 18:35 林恒 阅读(119) 评论(1) 推荐(0) 编辑
一行代码实现鼠标横向滚动💪
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 在项目中我们可能会遇到当鼠标在某个区域内，我们希望滚动鼠标里面的内容可以横向滚动； 比如我们一些常见的后台状态栏： 那这种该怎么写？请看栗子 代码如下： <template> <div> <div class="top"> <div class 阅读全文
posted @ 2024-06-17 19:22 林恒 阅读(91) 评论(0) 推荐(0) 编辑
记录--60行JS速通购物车小球斜抛动画
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 前言 技术文章，尤其是前端技术文章具有时效性。 如文中提到的部分内容出现break change或出现内容错误（文字错误/错误的理论描述），为尽可能避免对后面的读者造成困扰，如果可以的话，希望在文章的评论区或代码仓库issues中予以指正，十分 阅读全文
posted @ 2024-06-15 17:08 林恒 阅读(9) 评论(0) 推荐(0) 编辑
记录--N 个值得一看的前端代码片段
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 在日常的开发过程中，我们都会有一些常用的代码片段，这些代码片段可以直接复制到各个项目中使用，非常方便。如果你有接手过别人的项目，就可以很明显感受到几个项目一般都会有一些相同的工具类方法，这些方法就是之前开发者的常用代码片段。 现在前端社区相当完 阅读全文
posted @ 2024-06-14 18:41 林恒 阅读(91) 评论(0) 推荐(0) 编辑
记录--Vue 网页全屏
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 在后台系统中有一种常见的功能，点击按钮将整个网页全屏，再点击退出全屏。 浏览器提供了2种全屏方式，一种通过API在js中实现，另一种是按F11键进入全屏模式。 但F11进入的全屏模式优先级更高，无法通过API退出。 基本知识 元素全屏 检查可用 阅读全文
posted @ 2024-06-13 19:09 林恒 阅读(275) 评论(0) 推荐(0) 编辑
记录--前端实现文件预览(word、excel、pdf、ppt、xmind、 音视频、图片、文本) 国际化
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 前言 在这之前公司项目的文档预览的方式都是通过微软在线预览服务，但是微软的在线服务有文件大小限制，想完整使用得花钱，一些图片文件就通过组件库antd实现，因为我们项目存在多种类型的文件，所以为了改善用户的体验，决定把文件预览单独弄一个拆出一个项 阅读全文
posted @ 2024-06-12 19:04 林恒 阅读(1606) 评论(1) 推荐(0) 编辑
记录--别忘了前端是靠什么起家的😡😡😡
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 一、忘了最基础的东西 前端开发的核心构建在三大基石技术上：HTML、CSS和JavaScript。回想起多年前，前端开发者常被戏称为“切图仔”，但就是这样的角色，通过精湛的CSS技巧，能够实现各种复杂的交互和特效，展现出前所未有的网页魔法。这是 阅读全文
posted @ 2024-06-11 19:38 林恒 阅读(107) 评论(0) 推荐(1) 编辑
记录--前端起dev从110秒减少到7秒, 开发体验大幅提升
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 [webpack由浅入深]系列的内容 第一层: 了解一个小功能的完整流程. 看完可以满足好奇心和应付原理级别面试. 第二层: 源码陪读, webpack源码比较灵活, 自己看容易陷入迷惑. 文章里会贴出关键流程的代码来辅助阅读源码. 如果你正在 阅读全文
posted @ 2024-06-06 19:36 林恒 阅读(74) 评论(0) 推荐(0) 编辑
记录--localStorage是同步还是异步的？为什么？
摘要：🧑‍💻 写在开头 点赞 + 收藏 学会🤣🤣🤣 首先明确一点，localStorage是同步的 🥝 一、首先为什么会有这样的问题 localStorage 是 Web Storage API 的一部分，它提供了一种存储键值对的机制。localStorage 的数据是持久存储在用户的硬盘上的 阅读全文
posted @ 2024-06-05 18:19 林恒 阅读(181) 评论(0) 推荐(0) 编辑
记录：瀑布流最佳实现方案
摘要：传统实现方式 当前文章的gif文件较大，加载的时长可能较久 这里我拿小红书的首页作为分析演示 可以看到他们的实现方式是传统做法，把每个元素通过获取尺寸，然后算出left、top的排版位置，最后在每个元素上设置偏移值，思路没什么好说的，就是算元素坐标。那么这种做法有什么缺点？请看下面这张图的操作 容器 阅读全文
posted @ 2024-06-03 19:24 林恒 阅读(159) 评论(0) 推荐(1) 编辑
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
摘要：一、背景 在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 这里称宽度较小的列父元素为 阅读全文
posted @ 2024-06-01 18:25 林恒 阅读(106) 评论(0) 推荐(1) 编辑