- 博客(807)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
1106
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
750
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
478
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
2111
原创 DSH 插件开发实战：从原理到桌面联动
本文以 dsh-desktop-bridge 插件为例，详解如何通过宿主服务注入、本机 HTTP 连接与轮询机制，实现桌面应用与 DSH 桌面端的深度联动。重点解析插件加载流程、版本校验、随机端口分配、发现文件管理及安全鉴权策略，展示从任务提交到状态同步的完整链路。强调跨应用通信需依赖轮询而非实时推送，且客户端必须通过 Electron 主进程代理请求，确保安全性与稳定性。适用于 Windows 平台下 DSH 0.13.2 及特定版本组合，为构建受控的本地 Agent 能力入口提供可复用工程范式。
2026-11-06 17:04:26
352
原创 记录一种很新的大屏开发方式
本文分享了利用AI全流程自主构建园区三维可视化大屏的实践：从Revit模型转换为Web可用的GLB资产，通过AI补全园区环境、生成交互功能，并基于iframe实现场景复用。整个流程涵盖模型处理、场景搭建、大屏开发与交互封装，大幅降低人力成本。核心经验在于——开发重心正从“如何实现”转向“做什么”，需求定义与参考标准成为关键。AI加速了执行，但人的判断力愈发重要。
2026-11-04 18:07:51
100
原创 我用 Vue 3 + Electron 做了一个 AI 桌宠：能聊天、会碎碎念
这个项目对我来说，不只是把一个角色放到桌面上。让动作切换不被旧事件打断，让迟到的 AI 回复不串角色，让配置和记忆有清晰边界——这些看不见的细节，才是把一个有趣 Demo 做成桌面应用的关键。如果你也喜欢有一点温度的桌面工具，欢迎交流；想了解安装包，也可以通过上面的微信联系我。
2026-10-28 15:18:14
144
原创 用 Vue 3 + Electron 做桌宠：从启动退出到拖拽、单击与鼠标穿透
本文以 Windows 桌宠「伴星」为例，剖析 Electron + Vue 开发中的核心交互难题：通过清晰划分渲染层与主进程职责，实现单实例锁、状态恢复、透明窗口管理；采用两阶段退出协议（停止新任务+异步落盘）保障数据安全；利用 Pointer Events 与移动阈值精准区分点击与拖拽，结合屏幕坐标处理与跨进程通信，解决重复启动、误触、窗口遮挡等体验痛点，强调“边界清晰”与“异步可控”在长驻桌面应用中的关键作用。
2026-10-23 18:06:59
357
原创 浏览器为什么加载不了超大图片
一张87MB的超大图片虽返回200 OK，却因解码后需约5GB内存而加载失败。问题不在网络或组件，而在浏览器解码阶段——图片尺寸达3.4万×3.7万像素，远超渲染上限。建议后端生成预览图（如8000px内），前端优先展示，原图单独下载。切勿依赖前端Canvas压缩，因解码前已失败。关键：关注像素总量而非文件大小。
2026-10-21 18:28:20
161
原创 前端难点：Flex 布局里「表格/页面撑不满」—— min-height: 0 到底解决什么？
B端布局中Tab+表格撑不满、双滚动条问题，根源在于flex子项默认min-height: auto导致无法收缩。解决方案：从外到内所有flex: 1的父容器均添加min-height: 0，确保布局链可正常伸缩。配合ResizeObserver时需先固定布局，再微调高度。弹窗滚动也适用此法则。记住：纵向滚动用min-height: 0，横向用min-width: 0，一招解决90%满屏布局难题。
2026-10-16 14:34:20
204
原创 面试翻车现场：`Array(100).map(() =＞ 1)` 为什么全为空？
JavaScript 中 Array(100).map(() => 1) 无法正确映射，因创建的是稀疏数组（空槽位），迭代方法会跳过。正确做法：使用 Array.from({ length: 100 }, () => 1)、[...Array(100)].map(() => 1) 或 .fill().map()。避免 delete 删除元素导致空槽，生产中注意假分页、JSON 反序列化等陷阱。记住：Array(n) 是“有门牌无住户”的鬼屋，别被坑了！
2026-10-10 16:20:23
286
原创 纯前端生成海报下载方案
本文详解基于Vue的纯前端海报生成方案，结合html2canvas与qrcode实现带中心Logo的分享海报。重点解决外部图片跨域导致Canvas污染问题：通过XHR拉取图片并转Base64，配合时间戳防缓存；利用Canvas API在二维码中心绘制白色圆形底图与业务Logo，提升美观性；最终通过html2canvas高倍率渲染并触发本地下载，完整实现无后端依赖的高效海报生成。
2026-09-29 15:23:05
189
原创 H5与小程序通信
H5嵌入小程序web-view后，需通过微信提供的通信“桥”实现数据传递与页面跳转。核心是使用uni.webview.js中的postMessage和navigateBack配合，确保消息及时送达。关键避坑：1）发消息后必须触发后退才能被接收；2）提前保存window.__uniWebView避免被uni-app框架覆盖。附带调试页可快速验证通信逻辑。三步上手：配置web-view、引入SDK并保存引用、收发消息。掌握这两点，轻松打通H5与小程序通信。
2026-09-23 15:05:56
285
原创 面试官：我为什么总在浏览器存储问题上追问IndexedDB？
本文深入解析浏览器存储技术，重点剖析IndexedDB在超大容量、复杂查询与离线应用中的不可替代性。对比Cookie、localStorage等方案，揭示其异步、事务、索引等核心优势，并通过实战代码演示数据库创建、增删查改及游标遍历，助开发者突破5MB限制，掌握前端数据存储的“终极武器”。
2026-09-18 16:44:19
301
原创 纯前端生成海报下载方案
本文详解纯前端生成带中心Logo二维码分享海报的实战方案，基于Vue、html2canvas与qrcode，重点解决外部图片跨域导致Canvas污染问题：通过XHR+随机参数绕过缓存，将远程图转为Base64；再结合自定义Logo绘制，实现高容错二维码；最终利用html2canvas高清截图并本地下载。完整流程兼顾兼容性与性能，适用于视频/通知等场景分享。
2026-09-10 14:49:59
64
原创 微前端样式隔离：为什么你的 CSS 串到别人家了？Shadow DOM、CSS Variables 与 @layer 实战
<think>好的，用户要求根据提供的技术文章生成一段不超过150字的摘要。内容是关于微前端样式隔离的完整方法论，核心是四种方案及生产组合策略。 先分析内容结构：文章先讲问题场景，再讲四个层次的解法（命名空间、CSS scoped、Shadow DOM、CSS变量+@layer），最后给出生产组合策略和总结。需要抓取核心逻辑和最佳实践。 摘要要精简在150字内，需要高度概括。重点应包括：问题本质（CSS全局性与微前端运行时拼装的矛盾）、四个层次方案、最佳实践组合（Shadow DOM+命名空间+变量）、Sh
2026-09-04 18:02:14
313
原创 App 内嵌 H5 秒开技术方案
<think>我们只需要根据内容生成摘要，≤150字。需要抓住核心：秒开定义、离线包技术、核心思路，以及架构。摘要需简洁。注意字数。</think>摘要：本文介绍App内嵌H5“秒开”优化方案，核心是离线包技术，将静态资源预打包至本地，通过拦截请求实现零网络加载，结合预加载、渲染优化整体架构，实现毫秒级首屏渲染，提升用户体验。
2026-09-02 16:58:00
188
原创 我是怎么把页面图片流量砍掉一半的
把这些做完之后，我们项目的图片总流量降了将近一半，首屏加载时间也从 4s 多降到了 2s 以内。产品说"感觉快多了"，我说"其实主要是图片的问题"。如果你也在做性能优化，我的建议是按这个顺序来：格式选对 → 工具压缩 → 加载策略 → 服务器自动化每一步都能看到明显收益，不用一次全做，先从格式和压缩入手，立竿见影。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2026-08-28 18:08:39
357
原创 前端手机号脱敏的 4 个层级，你在第几层？
上周提交了一个需求：用户手机号在列表页需要脱敏展示。组长 review 时留了一句：“如果用户传了个 138-1234-5678，或者接口返回的是 number 类型，甚至是个 null，你这函数还能稳吗？我愣了一下。是啊，业务代码和 “能跑代码” 之间，往往隔着 N 个边界 case。这篇文章，就记录我把这个函数从 “青铜” 打磨到 “钻石” 的过程。
2026-08-26 16:45:37
373
原创 前端如何实现在线预览office常见文件功能？
文章摘要： 本文介绍了如何通过Flyfish Viewer插件实现在线预览多种文件格式（如PDF、Word、Excel等）的功能。作者在Vue2.6项目中尝试npm安装失败后，改用纯JS集成方案，并解决了PPTX预览报错问题——通过手动引入CDN文件并放置到项目public目录。文中提供了组件代码示例，支持全屏预览及加载状态管理，最终兼容了206种文件扩展名的在线预览需求。若需完整源码，可访问文末链接获取。 （字数：149）
2026-08-24 18:42:32
209
原创 [特殊字符] 如何实现一个优雅的通知中心？（Vue 3 + 消息队列实战）
本文分享了一个完整的通知系统实现方案，包含以下核心内容： 功能设计：支持评论回复、点赞、关注、系统消息等多种通知类型，采用TypeScript定义数据结构。 核心服务： 使用Pinia实现状态管理 支持本地存储持久化 提供添加/标记/删除通知等完整API 实现浏览器桌面通知集成 支持未读计数和消息分组 UI组件： 实现带红点提醒的铃铛图标入口 采用标签页分类展示通知 包含全部已读功能 消息卡片展示头像和内容 系统采用Vue3+Element Plus技术栈，提供了良好的用户体验和完整的通知管理功能，适合博客
2026-08-14 18:36:34
34
原创 如何使用GSAP实现一个 `pinned` 滚动楼层叙事？
摘要 本文介绍了如何使用Vue和GSAP实现一个Pinned滚动叙事动画效果。通过拆解DOM结构（卡片轨道和详情面板）、固定布局（利用sticky定位保持舞台可视），结合数据驱动渲染多组卡片与详情内容。动画核心是通过滚动控制GSAP时间轴，实现卡片居中放大、详情面板层叠切换的叙事效果。关键步骤包括：拆分层级、CSS布局设计、数据结构组织，最终实现类似参考网站（vaporesso.com）的交互体验。代码示例展示了网格布局和滚动触发的动画逻辑。（150字） 关键词：Vue、GSAP、滚动动画、Pinned效果
2026-08-11 18:30:26
357
原创 纯前端生成海报下载方案
Vue 实战：纯前端生成带 Logo 二维码的分享海报 本文介绍基于 Vue、html2canvas 和 qrcode 的纯前端海报生成方案，重点解决跨域图片污染 Canvas 的问题。 核心步骤： 准备海报 DOM 结构：使用 HTML 和 CSS 构建海报布局，标记截图区域。 处理跨域图片：通过 fetch 或 XMLHttpRequest 将外部图片转为 Base64，避免 Canvas 污染。 生成带 Logo 的二维码：利用 qrcode 生成高容错二维码，并在中心叠加 Logo。 渲染与下载：使
2026-08-06 14:24:19
171
原创 [特殊字符] Flex 布局的 `min-width: auto` 陷阱：为什么内容总是撑破容器？
CSS Flexbox 布局中文本溢出问题的分析与解决 在Flex布局中，子项默认的min-width: auto会导致容器被长文本或长单词撑破，即使设置了width: 100%或text-overflow: ellipsis也无法生效。这是因为min-width: auto会强制子项宽度至少等于内容的最小宽度，从而破坏布局约束。 解决方案： 显式设置min-width: 0（推荐）：允许子项收缩到任意宽度，使省略号生效。 通过overflow触发：设置overflow: hidden间接将min-widt
2026-08-05 18:01:58
363
原创 你的 uni-app 分页，一个 hook 搞定竞态和加载
uni-app分页加载优化方案：usePagination实战指南 本文针对uni-app项目中常见的分页加载问题（竞态、重复请求、边界缺失等），提出基于alova库的usePagination解决方案。通过对比手写分页的痛点（需处理页码管理、请求去重、预加载等），展示了usePagination如何内建这些能力，简化代码结构。 核心优势： 自动防护：请求去重、响应归位、末页判断（isLastPage） 双模式支持：追加加载（page++）与刷新重置（reload） 跨端兼容：适配uni.request，同
2026-08-04 15:19:42
329
原创 侧边栏收起缩放适配方案
摘要： 本文解决了大屏看板页面在侧边栏收起时出现的竖向滚动条和右侧留白问题。原方案仅按宽度计算CSS缩放比例，导致高度溢出或留白。新方案同时考虑宽高约束，动态调整缩放比例和容器尺寸，确保内容始终适配视口。通过修改JavaScript计算逻辑和CSS样式（如overflow: hidden），实现了完美适配，避免滚动条和留白。验证效果显示问题已解决，适用于响应式布局场景。
2026-07-29 18:02:54
199
原创 vue对接海康摄像头-H5player
本文介绍了前端开发中实现视频监控功能的几个关键技术点： JS文件放置：将JS文件放入public目录以实现全局访问 响应式视口适配：通过媒体查询动态调整播放器容器和控制栏的宽高比例 监控点树形列表：调用海康API获取区域节点和摄像头列表，构建树形结构数据 视频流获取：根据摄像头类型（球机/固定）切换码流类型，获取WebSocket格式的实时视频流 云台控制：实现PTZ控制接口，支持摄像头方向控制和预置位调用 代码示例包含完整的API调用参数和处理逻辑，适合二次开发参考。文中采用"点赞+收藏=学会"的幽默表述
2026-07-24 17:42:07
49
原创 我在微信小程序里手搓人脸识别功能，结果被“右转头”和“手遮脸”教育了 _
本文分享了在小程序开发中实现人脸检测拍照引导的技术方案和踩坑经验。作者利用wx.createVKSession获取人脸数据，结合WebGL渲染和自定义UI，实现了人脸距离、居中、姿态、遮挡等条件的检测。文章重点总结了6个关键问题及解决方案：坐标镜像处理、转头识别不对称、遮挡判断优化、置信度使用误区、UI更新节流和WebGL层级问题，并强调真机测试的重要性。最终通过多维度规则组合，开发出了稳定的人脸拍照引导功能。
2026-07-22 18:02:53
197
原创 Vue3 大屏适配组件（Scale / Rem 双方案一键切换）
这篇文档介绍了一个Vue3大屏适配组件ScreenAdapter.vue，提供两种适配方案：整体缩放(scale)和rem等分适配。scale模式保持设计稿1920*1080比例不变形，适合地图/GIS场景；rem模式将屏幕宽度分成100rem单位，适合快速开发。组件自动监听窗口变化，使用简单只需包裹内容并按设计稿尺寸编写样式（scale用px，rem用对应数值rem）。关键点包括：弹窗需放在插槽内、无需额外适配代码、两种模式可根据项目需求灵活切换。该组件简化了大屏开发适配工作，支持一键切换适配方案。
2026-07-21 17:47:54
258
原创 你点的“刷新”是假刷新？前端路由的瞒天过海术
前端路由是单页应用(SPA)实现页面切换的核心技术，它通过JavaScript动态更新内容而不刷新页面。文章介绍了两种实现方式：Hash模式利用URL的#部分，通过hashchange事件监听变化，兼容性好但URL不美观；History模式使用HTML5的pushState和replaceState方法，配合popstate事件，实现更干净的URL但需要服务器支持。文章还演示了一个简易Hash路由的实现，并对比了前后端路由的区别，最后指出了常见问题及解决方案。前端路由的核心原理是监听URL变化并渲染对应内容
2026-07-17 18:31:46
228
原创 短链跳转记录
短链跳转技术解析 短链服务通过302重定向实现跳转，前端仅需处理最终URL参数。实现方式包括： Nginx配置：直接匹配短链路径并返回302响应，性能最佳。 后端动态处理（如Java/Node.js）：查询数据库获取长链后重定向。 前端路由伪装方案通过代理请求后端短链接口再跳转，提升用户体验但增加网络延迟。 SEO影响：301重定向转移权重至长链，302保留短链权重，需根据场景选择。短链技术适合临时或追踪场景，对前端透明，核心逻辑由服务端处理。 （摘要涵盖技术实现、优缺点及SEO影响，字数150）
2026-07-14 17:59:15
264
原创 Threejs实现 3D 看房效果
摘要： 本文详细介绍了如何使用Three.js实现3D看房效果。通过创建基础场景、加载六张全景图片形成立方体贴图环境，并结合OrbitControls实现交互控制（旋转/缩放）。代码示例基于Vue 3，涵盖场景初始化、相机设置、纹理加载及动画渲染，并强调性能优化（如适配高分辨率屏幕）和注意事项（如全景图无缝拼接）。额外补充了几何体缩放操作（geometry.scale()）的作用与注意事项，适用于动态调整物体尺寸或方向。最终效果支持用户自由探索虚拟房间，适用于房产展示等场景。
2026-07-13 17:36:54
216
原创 录音与音频可视化
本文介绍了在Web中实现录音及音频可视化的技术方案。通过对比MediaRecorder、Web Audio API和Recorder-Core三种方案，最终选择基于Web Audio API封装的Recorder-Core库，配合Canvas实现高性能音频采集与可视化。核心流程包括：1）初始化录音器获取PCM数据；2）转换音频数据为0-1区间的能量值；3）使用双队列存储实时和全量数据；4）通过requestAnimationFrame驱动动画，实现从右向左滚动的波形可视化。文章还详细说明了高清屏幕适配等关键
2026-07-09 18:19:45
256
原创 纯前端生成海报下载方案
Vue 实战：纯前端生成带 Logo 二维码的海报 本文分享了基于 Vue + html2canvas + qrcode 的纯前端海报生成方案，重点解决跨域图片导致 Canvas 污染问题。核心步骤包括： 准备海报 DOM 结构 - 设计可截图的容器节点，包含背景、用户信息、二维码等元素 解决跨域图片问题 - 通过 XHR 请求+FileReader 将外部图片转为 Base64，避免画布污染。关键技巧： 添加随机时间戳绕过浏览器缓存限制 兼容 XMLHttpRequest 方案 生成带 Logo 二维码
2026-07-08 15:51:54
367
原创 `Array(100).map(() =＞ 1)` 为什么全为空？
JavaScript 稀疏数组陷阱与解决方案 在初始化长度为 100 的全 1 数组时，Array(100).map(() => 1) 会失败，因为 Array(100) 创建的是稀疏数组（仅有 length 属性，无实际元素），导致 map 等迭代方法跳过空槽位。 解决方案： 推荐：Array.from({ length: 100 }, () => 1) 填充法：Array(100).fill().map(() => 1) 扩展运算符：[...Array(100)].map(() => 1) 实际场景：
2026-07-06 18:10:12
224
原创 Three.js 3D 地图特效与材质实现指南
本文介绍了两种Three.js材质的实现方法：地形材质和飞线材质。地形材质使用MeshStandardMaterial结合PBR渲染原理，通过四种纹理（漫反射、位移、法线、粗糙度）实现真实感地形效果，并提供了完整HTML代码示例。飞线材质采用自定义ShaderMaterial，通过顶点着色器传递progress属性，在片元着色器中使用时间计算发光头位置，通过smoothstep创建三级渐变发光效果（头部、主体、核心）。两种材质均包含完整的HTML实现代码，涵盖了场景搭建、光照设置、材质参数配置及动画循环等关
2026-07-03 15:25:16
328
原创 App 内嵌 H5 秒开技术方案
H5秒开优化：离线包技术实现方案 本文提出一套完整的H5秒开优化方案，核心采用离线包技术消除网络延迟，结合预加载和渲染优化实现毫秒级加载。方案包含： 架构设计：构建服务端离线包管理平台与客户端SDK，实现资源拦截、版本控制和增量更新 关键技术： Android通过shouldInterceptRequest拦截资源请求 iOS使用WKURLSchemeHandler实现本地资源加载 配套机制：版本灰度发布、资源增量更新、预加载策略 性能数据：相比传统加载方式，离线包方案可减少300-800ms网络延迟 该方
2026-07-02 18:29:45
238
原创 前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端文件下载问题与解决方案 当通过前端实现文件下载时，浏览器可能直接预览文件（如PDF、图片）而非触发下载，主要原因包括： 同源限制：HTML5的download属性仅对同源URL生效，跨域链接会被忽略。 HTTP响应头缺失：若服务器未返回Content-Disposition: attachment，浏览器会尝试渲染文件。 解决方案： 后端处理（推荐）：在响应头中添加Content-Disposition: attachment，强制浏览器下载。 前端Blob转换：通过fetch获取文件数据并转为Blob
2026-06-24 18:22:54
475
原创 分享一篇后台管理系统的通用skills
摘要：本文档是zsy-crm-admin项目的开发指南，面向全栈开发工程师、UI设计师和产品经理。项目基于Vue 3 + TypeScript + Element Plus + SCSS技术栈，提供了一套完整的CRM后台管理系统开发规范。内容包括项目结构、UI/UX设计规范（Element Plus和SCSS的使用）、表单组件规范（如Select、Input、DatePicker等）、CRUD开发流程（API定义、页面结构、代码风格）以及示例代码模板。文档强调全栈思维、美观性和用户体验，旨在帮助开发者高效完
2026-06-23 17:16:49
292
原创 你点的“刷新”是假刷新？前端路由的瞒天过海术
前端路由揭秘：单页应用如何实现无刷新页面切换 前端路由是现代单页应用(SPA)的核心技术，它通过两种方式实现页面无刷新切换： Hash模式：利用URL的#hash部分变化触发hashchange事件，兼容性好但URL不美观 History模式：使用HTML5的pushState/replaceStateAPI，配合popstate事件，URL更整洁但需要服务端支持 实现原理都是监听URL变化后动态更新DOM内容。文章通过一个简易Hash路由示例展示了核心逻辑，并对比了前后端路由的区别，最后提供了常见问题的解
2026-06-18 14:36:55
166
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人