- 博客(684)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
1077
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
698
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
447
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
2030
原创 前端 HTML 转 PDF
前端HTML转PDF工具函数摘要 该工具函数通过html2canvas和jspdf库实现网页指定区域（如表格、报表）的PDF导出功能。核心流程： 定位元素：通过ID获取目标DOM，并重置滚动条确保完整截取； 可选水印：支持添加文字水印（需取消注释代码）； HTML转Canvas：配置缩放比例（提升清晰度）、跨域支持及动态高度适配； PDF生成：自动分页处理A4尺寸，支持多页内容，最终触发下载（文件名可自定义）。 依赖安装： npm install html2canvas jspdf 使用示例：调用htmlT
2026-01-16 17:47:18
161
原创 [特殊字符]面试官：说说看，用户登录后拿到的 Token，你应该怎么存？存哪里？
摘要： 本文探讨了前端存储用户登录Token的几种方案及其安全性考量。常见方法包括： Web Storage：简单但易受XSS攻击，不推荐敏感场景使用。 Cookie：通过HttpOnly和Secure属性提升安全性，但需防范CSRF攻击。 内存存储：安全性高但体验差，适合高安全需求场景。 最佳实践建议结合Access Token（内存存储）与Refresh Token（HttpOnly Cookie），实现安全与用户体验的平衡，并配套CSRF防护措施。每种方案需根据应用场景权衡安全性与便利性。
2026-01-14 09:47:45
761
原创 拒绝 rem 计算！Vue3 大屏适配，我是这样做的
摘要： 本文介绍了一个轻量级Vue 3大屏适配解决方案vfit，通过3分钟快速配置即可实现1920x1080设计稿的完美适配。该方案突破传统rem/vw换算的繁琐，支持直接使用设计稿px坐标定位，并提供了智能缩放的FitContainer组件，可自动处理不同屏幕尺寸下的元素位置与比例。文章分享了实际应用案例、避坑技巧（如必须引入样式文件、z-index层级控制等），特别强调了right定位的特殊逻辑优势。该方案显著提升了开发效率，让开发者更专注于数据可视化内容而非布局适配。
2026-01-13 10:11:01
906
原创 Vue开发三年，我才发现依赖注入的TypeScript正确打开方式
在Vue项目里，为了跨组件传递数据，你用provide和inject写了一套祖孙通信逻辑。代码跑起来没问题，但TypeScript编辑器总给你画红线，要么是“类型any警告”，要么就是“属性不存在”的错误提示。
2026-01-12 09:50:57
524
原创 彻底弄懂KeepAlive
开发过Vue应用的同学对KeepAlive功能应该都不陌生了，但是大家对它的理解是只停留在知道怎么用的阶段还是说清晰的知道它内部的实现细节呢，在项目中因KeepAlive导致的的Bug能第一时间分析出来原因并且找到解决方法呢。这篇文章的目的就是想结合Vue渲染的核心细节来重新认识一下KeepAlive这个功能。
2026-01-11 13:23:22
557
原创 Electron 的西天取经
我本身是做 Web 开发的，最近需要写个小工具，调用一些系统 API，就选择了比较成熟的 Electron。结果业务代码写了三小时，环境配置、镜像、文件引用、打包路径、体积过大、文件被锁定……各种问题却折腾了将近三天。写下这篇笔记，记录这一路的坎坷。
2026-01-10 16:49:16
915
原创 12个JS核心，搞懂这些直接起飞！
JavaScript核心概念精要 本文总结了12个2024年高频考点：1️⃣ 变量作用域：let/const的块级作用域解决var变量提升问题；2️⃣ 闭包机制：函数保留词法作用域访问权，需警惕内存泄漏；3️⃣ 原型继承：通过原型链实现对象继承，ES6类语法简化操作；4️⃣ 异步演进：从回调地狱→Promise链→async/await的优化路径；5️⃣ 事件循环：微任务优先于宏任务的执行顺序；6️⃣ ES6+特性：解构、可选链、空值合并等实用语法。掌握这些核心概念可显著提升代码质量与面试通过率。 （字数：
2026-01-09 19:11:55
222
原创 【Vue3】我用 Vue 封装了个 ECharts Hooks
📌 ECharts 封装 Hooks 实战 封装 useEchart Hooks 解决重复初始化、事件管理等问题，支持： ✅ 多类型容器（Ref/DOM/选择器） ✅ 自动销毁与响应式更新 ✅ 内置事件绑定/解绑 ✅ ResizeObserver 自适应 核心通过 initChart 初始化，watch 监听配置变化，ResizeObserver 替代传统 resize 事件，并暴露 update/onChartEvent 等 API。大幅简化 ECharts 使用流程，提升开发效率。 （摘要字数：150
2026-01-08 20:54:44
1073
原创 前端技巧：检测到省略号文本自动显示 Tooltip
文章摘要： 本文介绍了一个前端解决方案，用于检测文本内容是否被省略（单行或多行），并在需要时自动显示Tooltip提示完整内容。通过自定义Hook useEllipsis 监测元素的宽度/高度与内容实际尺寸的差异，动态判断是否添加Tooltip。组件 EllipsisTooltip 封装了该逻辑，支持Tailwind样式，仅在文本被截断时显示Tooltip。代码示例展示了如何通过限制宽度触发Tooltip，而未截断的文本则正常显示。该方案提升了长文本场景下的用户体验。 （字数：150字）
2026-01-07 10:27:43
317
原创 说一下 localhost 和127.0.0.1 的区别
摘要： 本文详细解析了localhost与127.0.0.1的核心区别：localhost是应用层的主机名，需通过DNS解析为IP（默认127.0.0.1或IPv6的::1），而127.0.0.1是网络层直接可用的IPv4回环地址。关键差异包括协议支持（localhost兼容IPv4/IPv6）、解析流程（localhost依赖hosts文件或DNS）、性能（127.0.0.1跳过解析略快）及服务监听配置（0.0.0.0允许外部访问）。实际开发中建议优先使用localhost以确保兼容性，仅在需强制IPv4
2026-01-06 12:25:13
943
原创 前端开发 8 个非常实用小技巧：高效解决日常开发痛点
本文分享了8个前端开发实用技巧，覆盖JavaScript、CSS和业务场景三大类： JS技巧：快速判断数组元素、对象默认值处理、变量交换； CSS优化：垂直居中方案、CSS渐变替代图片、iOS输入框问题修复； 业务场景：表单防抖提交、点击空白处关闭弹窗。每个技巧均提供可直接复用的代码示例，帮助开发者提升效率，优化代码质量。
2026-01-05 11:19:23
243
原创 在 Web 前端实现流式 TTS 播放
摘要： 本文介绍了前端实现流式TTS（文本转语音）播放的优化方案。初始方案使用AudioBufferSourceNode解码MP3片段，但存在卡顿、杂音和延迟问题。改进后采用MediaSource + SourceBuffer技术，通过流式拼接MP3数据块实现低延迟、无杂音的播放。文中提供了封装类StreamingTTSPlayer的核心代码，支持接收Base64 MP3数据并实时播放，适用于Web端语音合成场景，兼容主流浏览器。 关键词： 流式TTS、前端播放、MediaSource、低延迟、音频拼接
2026-01-01 19:27:32
255
原创 vue对接海康摄像头-H5player
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
2025-12-31 18:42:36
530
原创 图片标签用 img 还是 picture？很多人彻底弄混了！
摘要： 本文深入解析HTML中<img>和<picture>标签的核心区别与应用场景。<img>通过srcset和sizes实现高效响应式图片加载，适合大多数分辨率适配需求；而<picture>专注于艺术指导（不同设备显示不同裁剪）和现代格式降级（如AVIF/WebP兼容）。关键误区包括误以为<picture>更现代或必须用于响应式设计。最佳实践建议：优先使用简洁的<img>方案，仅在需要复杂条件组合时采用<picture>
2025-12-29 21:57:21
419
原创 总结 Next.js 中的 Server Actions
摘要： Next.js 的 Server Actions 允许直接在服务端执行异步数据库操作，无需创建 API 端点。与传统 API 相比，它简化代码结构、减少网络请求并提升安全性，但复用性和测试难度较高。适用于小型项目或简单数据交互，而传统 API 更适合复杂场景。示例展示了通过 Server Actions 增删改数据库数据，结合 revalidatePath 更新缓存。两者各有优劣，需根据项目需求选择。 （字数：150）
2025-12-27 21:54:35
766
原创 使用自定义API接入OpenAI CodeX配置教程
摘要：本教程介绍如何通过第三方API接入OpenAI Codex服务。首先安装Codex CLI（支持npm和Homebrew），然后配置config.toml文件指定API供应商和模型，并设置环境变量V_API_KEY为中转平台的API密钥。提供Windows/Mac/Linux的环境变量配置方法，最后演示CLI使用和VSCode插件配置。还包含非交互模式、模型上下文协议等高级用法，适合开发者提升编码效率。详细配置参考官方文档。
2025-12-26 20:33:50
901
原创 VUE3大屏自适应布局
本文介绍了基于视口单位(vw/vh)的响应式布局方案，通过SCSS自定义函数实现设计稿尺寸到视口单位的自动转换。核心内容包括：1) 定义vw()和vh()函数进行像素转换；2) 配置Vite实现SCSS全局注入；3) 结合Flex布局、ECharts图表自适应和全屏切换功能；4) 注意事项如极端屏幕比例处理。该方案特别适合数据可视化大屏项目，能有效实现多分辨率自适应，同时提供了栅格系统、缩放控制等辅助功能。
2025-12-25 20:34:07
586
原创 uni-app 无法实现全局 Toast？这个方法做到了！
摘要： 本文介绍了在uni-app中实现全局Toast组件的完整解决方案，通过wd-toast组件、Layout插件和Pinia状态管理，解决了传统方案功能受限、无法跨组件调用等问题。核心方案包括：1）基于provide/inject的函数式调用；2）统一布局管理实现全局组件插入；3）状态管理确保Toast正确显示。支持多种提示类型，兼容支付宝小程序，适用于网络请求拦截等场景。 （字数：150）
2025-11-17 14:48:36
605
原创 为什么你的JavaScript代码总是出bug？这5个隐藏陷阱太坑了
JavaScript常见问题与解决方案摘要 本文总结了JavaScript开发中的常见陷阱及解决方案： 变量声明：避免隐式全局变量，使用const和let替代var，防止变量提升问题。 异步处理：避免回调地狱，推荐使用Promise和async/await，务必处理错误。 类型转换：使用严格相等===代替==，利用可选链?.和空值合并??运算符简化代码。 作用域问题：注意this指向问题，使用箭头函数或bind绑定，解决闭包中的变量共享问题。 现代工具： TypeScript提供类型安全 ESLint规范代
2025-11-13 16:49:12
701
原创 JavaScript 中的 map、parseInt 与 NaN：一场关于类型转换与函数调用的深度解析
本文深入剖析了JavaScript中[1, 2, 3].map(parseInt)输出[1, NaN, NaN]这一常见陷阱。主要揭示了三个关键点：1) map方法会传递元素、索引和数组三个参数给回调函数；2) parseInt会把第二个参数当作进制基数，导致索引值被误用为基数；3) 非法基数会产生NaN。文章还提供了正确转换数组的解决方案（如使用Number构造函数或限定参数的箭头函数），并详细解释了NaN的特性和检测方法。通过这个案例，强调了理解语言机制对编写健壮代码的重要性。
2025-11-10 17:01:44
785
原创 JavaScript性能优化：我从50ms降到5ms的7个关键技巧
JavaScript性能优化7大技巧：本文分享了从50ms优化到5ms的实战经验，涵盖DOM操作批处理、事件委托减少监听器、Web Workers多线程处理、Memoization缓存计算结果、requestAnimationFrame动画优化、Typed Arrays高效数据存储，以及V8隐藏类优化等核心方法。通过文档片段、事件委托、离线计算等技巧，结合WASM和GPU加速等高级方案，显著提升前端应用性能。适用于处理大规模DOM更新、复杂计算和动画场景，帮助开发者深入理解JavaScript运行时特性并实
2025-11-08 17:12:35
740
原创 弃用 html2canvas！快 93 倍的截图神器
摘要： SnapDOM是一款高性能网页截图工具，完美替代html2canvas，支持SVG、PNG、JPG、WebP等多种格式导出。其核心优势包括： 超快速度：比传统工具快93倍以上 超高还原度：精准保留CSS样式、伪元素等复杂效果 灵活输出：支持Canvas和多格式图片导出 简单易用：支持npm/CDN安装，提供toPng()等快捷API 免费开源：适用于社交分享、报表导出等场景 注意跨域资源、iframe限制等使用细节，适合现代前端开发需求。
2025-11-04 16:49:54
1099
原创 移动端h5适配方案
本文介绍三种移动端适配方案：1）使用PostCSS插件自动转换px为rem，配合JS动态设置根字体大小；2）采用纯CSS视口单位(vw/vh)方案，通过PostCSS插件自动转换；3）淘宝Flexible方案(未实践)。针对特殊场景(如固定头部)提供了两种处理方式：获取真实offsetHeight或通过工具函数计算适配后的px值。文章包含Vite配置示例和核心实现代码，适用于不同设计稿尺寸的移动端项目适配需求。
2025-10-31 17:34:09
362
原创 【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片
文章摘要： 本文详细介绍如何开发一个Chrome浏览器插件，实现右键一键批量下载网页所有图片。通过创建manifest.json配置文件和background.js脚本，利用Chrome扩展API（contextMenus、scripting、downloads）完成功能。核心步骤包括：创建右键菜单、注入脚本获取图片URL、批量下载图片（间隔500ms避免限制）。插件加载后，在任意网页右键点击“我要下载所有图片”即可自动保存图片至本地。文章还提供API文档链接和调试方法，适合初学者快速上手浏览器扩展开发。
2025-10-27 17:14:45
462
原创 CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
CSS pointer-events 属性详解 pointer-events 是 CSS3 提供的鼠标事件控制属性，允许开发者决定元素是否响应鼠标交互。主要特性包括： 基本语法：通过 pointer-events: none 可使元素忽略鼠标事件，实现"穿透点击"效果 典型应用场景： 背景图层穿透（覆盖层不阻挡下层交互） SVG 图形区域精确控制（如仅边框响应事件） 弹窗底层交互（点击遮罩关闭弹窗） 特别适用于复杂图层结构、SVG图形和弹窗交互场景，能精细控制页面元素的鼠标事件响应逻辑。
2025-10-22 19:50:42
716
转载 记录---图文并茂讲解nginx中http升级https（部署SSL证书）知识点总结
摘要： 网站升级HTTPS主要出于安全与优化考虑：1. 避免浏览器标记“不安全”警告，提升用户信任；2. 加密数据传输，防止敏感信息泄露；3. 支持摄像头、麦克风等权限调用；4. 提升SEO排名。获取SSL证书可通过免费（如Let’s Encrypt，需每90天续期）或付费渠道（云服务商提供）。部署时需在Nginx配置中引入证书文件（.crt和.key），设置加密协议，并将HTTP请求重定向至HTTPS（监听443端口），同时禁止IP直接访问。完整配置包括证书路径、加密套件及错误页跳转，确保全站安全加密。
2025-10-11 19:23:27
82
转载 记录---window.close()失效 + Chrome浏览器调试线上代码
摘要： 本文记录了解决浏览器window.close()方法失效问题的排查过程。需求要求在单点登录系统中，退出时直接关闭当前页面。测试发现window.close()仅能关闭通过window.open()或直接URL打开的页面。通过本地验证、线上调试，最终确认问题与环境相关。解决方案包括：验证window.open()触发机制、尝试先打开空白页再关闭、调试线上代码并修改验证。关键发现是window.close()的生效依赖特定环境配置，需部署后进一步测试。 关键词： window.close、单点登录、环境
2025-09-29 20:03:00
91
转载 记录---jsApi支付+h5支付
微信支付与H5支付实现方案 本文介绍了在Vue2中实现微信JSAPI支付和H5支付的流程。微信内通过userAgent检测自动屏蔽支付宝，使用JSAPI支付；非微信环境则启用H5支付。 JSAPI支付关键步骤： 通过授权链接获取code并换取openid缓存 调用后端接口生成支付参数，通过WeixinJSBridge发起支付 轮询订单状态，支付成功后跳转 H5支付要点： 支付宝需配置returnUrl，微信需拼接redirect_url并手动传递订单号 支付后通过URL参数out_trade_no查询订单结
2025-09-26 15:22:58
131
转载 记录---vue3项目实战 打印、导出PDF
摘要： 本文介绍了一个商品标签打印模板的Vue组件实现，采用网格布局自动排列标签（50mm×30mm）。模板包含四个主要区域：顶部醒目的价格展示（含原价对比）、商品名称与编码信息、条码区域以及底部库存位置信息。组件支持价格格式化、文本截断等功能，并通过CSS实现渐变背景、价格角标等视觉效果，同时优化打印样式避免阴影。采用响应式设计，确保标签在不同尺寸下保持规整。
2025-09-19 17:14:38
118
转载 记录---Vue3对接UE，通过MQTT完成通讯
摘要： 本文介绍了一个基于Vue3的实时视频流显示系统，通过PixelStreaming技术与Unreal Engine服务器连接，并集成MQTT协议实现消息通信。系统支持实时3D场景渲染、连接状态监控、错误处理与自动重连功能。文章详细说明了项目架构、核心代码实现（包括UE连接初始化、事件监听设置和MQTT连接配置）以及快速开始的安装步骤。该系统为开发者提供了完整的视频流控制和交互解决方案，适用于需要实时渲染和通信的应用场景。
2025-09-17 19:18:42
81
转载 记录---用好了 defineProps 才叫会用 Vue3，90% 的写法都错了
摘要： 本文深入解析Vue3中defineProps的正确使用方式，对比三种主流写法：声明式类型推导（推荐TS项目）、运行时代码校验（兼容Vue2风格）和withDefaults组合（兼顾类型与默认值）。针对常见误区（如解构丢失响应性、类型重复声明）提供解决方案，强调defineProps作为组件契约的核心作用，并分享类型别名、Volar推导等进阶技巧。通过规范写法，可提升组件健壮性、IDE提示完整性和团队协作效率。
2025-09-15 17:02:47
96
转载 记录---前端微服务框架深度对比：无界（Momentum）与乾坤（Qiankun）实战指南
微前端框架对比：无界与乾坤实战解析 本文针对电商后台管理系统场景，对比无界（Momentum）与乾坤（Qiankun）两大微前端框架。通过React/Vue/Angular多技术栈子应用集成示例，分析两者差异： 核心特性：无界基于WebComponent实现自动样式隔离，乾坤需手动配置沙箱；无界无需显式启动，乾坤需调用start()。 开发适配：乾坤要求子应用暴露生命周期钩子，无界兼容性更强。 生产部署：均需Nginx路由配置，但乾坤对动态路由支持较弱。 选型建议：中小项目可选无界快速上手，复杂场景推荐乾坤
2025-09-11 17:42:44
130
转载 记录---让网页像现实世界一样“拿起来，放进去”
HTML5拖拽交互实战指南 本文详细解析了HTML5拖拽功能的核心实现，通过五大关键事件（dragstart/dragend/dragover/dragenter/dragleave/drop）和draggable属性，演示如何创建直观的文件拖放交互。文章包含完整代码示例，涵盖元素样式控制、事件处理及移动端适配技巧，强调响应式设计对提升用户体验的重要性。拖拽功能模拟现实操作逻辑，可显著增强网页交互的自然性和效率，适用于文件上传、任务管理等场景。
2025-09-08 17:53:37
77
转载 记录---基于uniapp，编写一个自定义的日期组件
📅 uniapp自定义日期选择器组件 基于uniapp开发的自定义日期选择器组件，支持年/月/日直观选择，优化传统二次弹窗选择方式。核心功能： 1️⃣ 年份：以选中年份为中心，动态显示前后10年范围列表 2️⃣ 月份：固定12个月直接展示 3️⃣ 日期：智能计算每月天数（含闰年判断），并自动补全前后月份日期以保持日历连续性 4️⃣ 交互：点击输入框触发弹窗，外部点击关闭，内置日期有效性校验 🔧 技术要点： 使用computed动态生成年份/日期列表 通过getDay()计算星期排布，实现跨月日期填充 参
2025-09-05 16:40:13
122
转载 记录---一篇文了解qiankun的代码隔离原理
摘要： qiankun 通过三种沙箱机制实现微前端的 JS 隔离： 快照沙箱（SnapshotSandbox）：挂载前备份全局状态，卸载时恢复，适用于兼容性场景，但性能较差。 单实例沙箱（LegacySandbox）：通过维护新增/修改记录实现高效恢复，仅支持单子应用运行。 代理沙箱（ProxySandbox）：基于 Proxy 为每个子应用创建独立 fakeWindow，隔离性强且支持多实例并行，是现代浏览器首选方案。核心通过拦截对 window 的操作，确保子应用修改仅作用于代理对象，避免全局污染。 关
2025-09-01 17:56:36
179
转载 记录---前端实现倒计时为什么会存在误差呢
摘要： 前端倒计时存在误差主要因JavaScript单线程阻塞、浏览器节能模式及设备时间干扰。文章提出六大精准方案：1)动态修正的递归setTimeout；2)服务端时间校准；3)页面可见性监听；4)Web Worker多线程；5)performance.now()高精度API；6)CSS动画视觉分离。最佳实践建议复合策略，如短时用动态修正+高精度API，长时需服务端校准，并推荐误差监控与用户体验优化（如毫秒渲染）。核心解决思路是避开主线程阻塞，结合硬件加速与时间补偿机制。（150字）
2025-08-30 17:37:42
158
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人