- 博客(122)
- 收藏
- 关注
RSS订阅
原创 Vue3高级特性：深入理解effectScope及其应用场景
本文深入解析Vue3中的高级特性effectScope，探讨其在响应式副作用管理中的核心价值与实战应用。effectScope通过创建独立作用域实现对多个副作用（watch、computed等）的批量管理，有效解决了传统手动清理方式存在的逻辑分散、易遗漏等问题。文章详细解析了effectScope API，包括作用域创建、run方法执行、副作用暂停/恢复等核心功能，并特别介绍了onScopeDispose回调机制。通过对比传统方式和effectScope的代码示例，展示了其在简化组件卸载逻辑、提升可组合函数
2025-07-16 14:37:20
867
原创 Vue3 组合式 API 进阶：深入解析 customRef 的设计哲学与实战技巧
Vue 3 的 customRef 是一个强大的响应式 API，允许开发者自定义 ref 的行为，控制依赖追踪和更新触发时机。本文详细介绍了 customRef 的核心概念、使用场景及实际应用，特别适合需要防抖、节流或复杂状态管理的开发场景。通过示例代码展示了如何实现防抖搜索输入框、窗口大小调整处理和表单验证等常见功能，帮助开发者提升应用性能。customRef 在与外部系统集成或实现高级状态管理时尤为有用，为 Vue 3 开发提供了更灵活的响应式控制能力。
2025-07-02 15:04:55
1048
原创 前端 EventSource（SSE）实时通信使用指南（EventSource-polyfill）
EventSource作为HTML5标准中的服务器推送技术，提供了轻量级实时通信解决方案。文章解析了其单向通信、自动重连等特性，对比了轮询、WebSocket等技术差异，列举了实时通知、数据监控等典型应用场景。详细介绍了EventSource API使用方式，包括连接管理、事件监听、自定义事件处理等核心功能，并针对无法设置请求头的限制，提出了URL参数、Cookie认证和代理层三种替代方案。文章还强调了指数退避重连策略的重要性，为开发者提供了完整的EventSource实践指南。
2025-06-16 15:00:00
3034
原创 微信小程序开发支付提示“违规“？发货信息录入接入指南
微信小程序平台近期更新了运营规范，要求所有实物电商类小程序必须接入微信订单管理系统，以确保交易安全和提升用户体验。商家需在小程序后台进行订单和发货信息管理，用户可通过微信服务通知了解物流状态并确认收货。接入方式包括使用微信后台自带的订单管理系统或通过API接入自有系统。接入后，商家需调用相关API进行发货信息录入、订单状态查询、确认收货提醒等操作，并确保资金在用户确认收货前处于冻结状态。本文详细介绍了订单发货管理功能、接入前的准备工作、发货信息录入的两种方式以及相关API的使用方法，帮助开发者顺利接入微信订
2025-05-19 10:29:06
2408
13
原创 Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码
本文介绍了如何利用 ECharts 和 echarts-gl 插件实现 3D 饼图和 3D 环形图。首先，准备工作包括引入 ECharts 核心库和 echarts-gl 插件，支持通过 CDN 或 npm 安装。3D 饼图的实现原理主要依赖于 echarts-gl 插件，通过自定义曲面图、三维折线图和三维散点图分别绘制饼图主体、指示线和标签。文章详细解析了 echarts-gl 插件的常用配置项，如 grid3D 和 series，并重点介绍了曲面图的参数方程（parametricEquation）
2025-05-12 15:00:33
3850
5
原创 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
通过本篇教程，我们认识了什么是Three.js和Three.js应用场景，共同探索了Three.js的核心概念与基础用法。从构建场景（Scene）、相机（Camera）到渲染器（Renderer）的"铁三角"架构，再到几何体（Geometry）、材质（Material）与网格（Mesh）的有机结合，至此你已经了解并掌握了创建最基础三维场景的核心工具链。更多three.js入门知识点请关注该系列教程后续的更新。
2025-02-19 15:20:41
2503
原创 【组件封装】vue3移动端手把手教你封装一个带动画和吸顶的 下拉菜单组件（DropdownMenu）
手把手教你封装一个移动端 下拉菜单组件（DropdownMenu），以uniapp vue3为代码示例。
2024-11-25 14:57:27
2354
9
原创 HarmonyOS Next 组件或页面之间的所有通信（传参）方法总结
本文总结了鸿蒙中常用的组件或页面之间参数传递方法，包括父子组件，子孙组件，兄弟组件，互不相关的组件（页面）和页面路由跳转的参数传递以及父子组件方法互调等。
2024-11-13 16:44:47
3273
原创 vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，支持鼠标移入停止移出滚动
列表自动滚屏效果常见于大屏开发场景中，本文将讲解用vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，并支持鼠标移入停止滚动、移出自动滚动。
2024-11-07 14:02:28
6900
6
原创 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（上）
HarmonyOS NEXT（鸿蒙应用）开发快速入门教程ArkTS语法之装饰器篇，基于HarmonyOS NEXT Beta1版本（api 12）讲解。本文将从前端开发者角度来理解和学习每个语法点，通过举例HarmonyOS NEXT和web端两种领域类似语法的使用，帮助前端开发人员快速入门HarmonyOS NEXT。在每个装饰器讲解上把同一个功能分别用ArkTs和vue 2种代码进行演示，使其更深刻理解每个装饰器的作用，在类比中学习记忆达到无缝衔接。
2024-09-19 09:52:28
1942
原创 HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现（十一）
HarmonyOS Next（基于API12）实现下拉刷新和上拉触底加载更多功能实现讲解。
2024-08-15 10:19:02
4805
2
原创 HarmonyOS Next系列之地图组件（Map Kit）使用（九）
HarmonyOS Next（基于API12）自带地图Map Kit使用——本文将讲述如何通过手动生成签名证书、申请地图权限、地图展示和地图常用功能示例讲解。
2024-07-22 10:11:51
5041
20
原创 HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）
HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
2024-07-03 09:33:11
6612
19
原创 Web Serial API串口通信，实现web和electron扫码枪读取数据
本文将讲述Web Serial API简单应用，以扫码枪为示例，通过代码实现web端读取扫码枪扫码内容。
2024-02-23 16:26:10
8734
16
原创 一文读懂vue+scss实现主题换肤功能
web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。
2024-01-26 15:08:44
4821
1
原创 electron+vite+vue3 快速入门教程
本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目electron框架对web开发人员来说非常友好，无须了解原生开发技能，就能通过web技术进行桌面应用开发，大大减少学习成本，一套代码能快速构建生成多端应用，也大幅减少了开发成本。简言之，electron开发可以看成是桌面功能开发+纯web页面开发，桌面功能开发在主进程调用Electron API，而web页面开发就是html，css，js技术栈。
2024-01-17 14:45:52
6506
7
原创 web端播放rtsp视频流（摄像头监控视频）教程及window下开机自启动部署
像海康大华一些摄像头或者直播源 为rtsp视频流，想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash，现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来，延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node（node-rtsp-stream）+jsmpeg。
2024-01-09 15:06:17
9476
41
原创 express+mongoDB开发入门教程之mongoose使用讲解
本文将讲述Mongoose的入门开发教程，以及通过一些示例演示对mongoDB数据库的增删改查操作。
2024-01-03 16:19:55
2438
2
原创 uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解
企业项目开发流程上一般都要配置多个运行环境（不同的服务器请求地址）。不同环境有不同用途，主要用于区分开发、测试、上线，对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包，对于uniapp每次都要手动修改服务请求地址很是麻烦，有什么方法能实现按需运行按需打包呢，答案是——自定义条件编译平台HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序，钉钉小程序等，不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。
2023-11-24 16:30:52
7965
原创 web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程
本文将讲述如何利用高德地图JS API实现地图标点、聚合点、自定义图标、点击窗体信息展示等基本功能实现，结合实际项目中遇到场景需求进行演示聚合点自定义样式通过设置renderClusterMarker字段配置渲染函数，并在渲染函数中通过dom操作生成样式节点插入聚合点父节点上//聚合点实例renderClusterMarker:renderClusterMarker,//自定义样式渲染});//渲染函数//自定义图标背景//聚合个数。
2023-08-18 21:47:30
8299
11
原创 vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件
本文将手把手教你封装一个可移动的悬浮框组件，利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端（H5、小程序、APP）通用的悬浮组件。
2023-06-18 17:49:26
7670
1
原创 uniapp APP端在线升级功能实现讲解——强制或可选升级，下载进度显示
本文主要讲述uniapp APP在线升级功能实现，并用代码演示包括强制升级、可选升级、下载进度显示、下载自动安装等功能，示例代码已经过测试可结合实际开发场景做调整直接引入使用
2023-06-16 15:20:33
21067
82
原创 Vue3 自定义 Tooltip 组件：实现文本溢出才显示的优雅提示（附完整代码）
本文介绍了一个基于Vue3的自适应Tooltip组件实现方案。该组件具有以下特点：仅当文本溢出时显示提示框，支持多行文本省略检测，提供四种位置选项并能自动调整避免超出视口，可配置延迟显示和插槽自定义内容。技术实现上采用Composition API+SCSS，关键点包括：通过Teleport避免样式裁剪，使用DOM API检测文本溢出，动态计算Tooltip位置，并添加平滑的过渡动画。该组件解决了传统Tooltip无条件触发的痛点，能更精准地满足实际业务需求。
2025-08-26 10:00:00
559
原创 Three.js 进阶技巧：用 CubeCamera 实现逼真倒影效果
本文介绍了使用Three.js中的CubeCamera实现3D场景倒影效果的方法。首先通过CubeCamera从六个方向捕获场景生成环境贴图，然后将贴图作为反射纹理应用到材质表面。文章详细讲解了基础环境搭建、CubeCamera配置、场景物体创建和实时更新逻辑四个关键步骤，并提供了波动水面倒影的扩展示例。该技术能有效提升3D场景的真实感和沉浸感，相比传统平面镜像方案在处理曲面反射时效果更自然。
2025-08-26 10:00:00
413
原创 为什么高手都爱用 Array.from ()？从基础到实战，这篇吃透数组处理新姿势
《JavaScript中Array.from()的实用指南》 Array.from()是ES6引入的强大工具，用于将类数组和可迭代对象转换为真正数组。它支持映射函数处理元素，能生成特定长度数组，优化DOM集合操作，并实现数组去重等场景。相比传统方案，Array.from()具有更高的可读性和性能优势，尤其适合处理arguments、Set、Map等特殊数据结构。实际应用包括表单数据处理、分页拆分、颜色梯度生成等，是提升JavaScript数组处理效率的利器。
2025-08-12 10:19:01
730
原创 别再用 loading 动画了！骨架屏实战手册：原理 + Vue3 三种优雅实现方式
骨架屏：提升Web加载体验的关键技术 摘要 骨架屏是一种优化Web加载体验的技术，通过在内容加载前显示与最终页面结构相似的灰色占位区域，显著提升用户等待体验。本文首先分析了骨架屏相比传统加载方式的优势，其核心原理是通过轻量UI元素模拟页面结构，并在内容就绪后切换显示。重点介绍了两种工程化实现方案：1）全局CSS类方案，定义骨架屏基础样式；2）SCSS混入方案，支持动态参数配置。通过代码示例展示了如何实现带光影动画的骨架屏效果，并讨论了内容切换控制逻辑。实践表明，合理使用骨架屏可使页面加载感知时间提升40%以
2025-08-12 10:17:27
1044
原创 Vue3 watchEffect 进阶使用指南：这些特性你可能不知道
本文深入探讨Vue3中watchEffect的进阶用法，帮助开发者更高效管理副作用。文章主要讲解三个核心技巧：1）主动停止监听，通过调用watchEffect返回的停止函数，在异步创建、临时监听等场景中手动终止监听；2）利用onCleanup清理副作用，解决异步请求竞态等问题，确保资源释放；3）通过flush选项控制执行时机，优化性能。这些技巧可提升代码质量，避免内存泄漏，实现更优雅的副作用管理。
2025-07-08 15:10:48
1054
原创 Web Worker使用指南 解锁浏览器多线程 ，提升前端性能的利器
Web Worker是HTML5提供的多线程解决方案，允许在后台独立线程中执行复杂计算任务，避免阻塞UI主线程。本文详细介绍了Web Worker的核心概念、适用场景（如CPU密集型计算、图像处理、实时数据处理等）以及API使用技巧。通过消息机制实现主线程与Worker线程通信，支持现代ES6+语法和模块化开发。文章还提供了在Vite等现代工程化环境中的实践示例，帮助开发者提升应用性能与响应速度。
2025-06-25 15:02:24
1067
原创 Vue3通过自定义指令实现大屏数字递增滚动效果
本文介绍了在Vue3中实现数字滚动动画效果的方法。数字滚动效果通过平滑过渡数值，常用于数据可视化场景。文章重点讲解了基于Vue3自定义指令的实现方案，包括指令的生命周期、参数传递和动态绑定等核心概念，并详细解析了数字滚动功能的设计思路。实现原理是通过定时器按照计算好的间隔时间和递增值逐步显示数值，确保动画连贯性。最后给出了完整的自定义指令代码，支持两种调用方式：直接传递数值或通过配置对象指定目标值和动画时长。这种实现方式简洁优雅，开发者可轻松集成到项目中。
2025-06-10 15:37:44
1546
原创 Three.js 快速入门教程【二十二】动画神器Tween.js使用指南
本文介绍了Tween.js在Three.js中的应用，详细讲解了其安装方法、基本语法与核心API。通过创建动画实例、定义目标属性、设置缓动效果等步骤，可实现平滑过渡的3D动画效果。文章还涵盖了动画控制方法（启动/暂停/停止）和事件回调机制，帮助开发者高效创建相机移动、物体变换等动画效果。
2025-05-26 14:58:54
1231
原创 Three.js 快速入门教程【二十一】CSS3D渲染器（CSS3DRenderer、CSS3DObject 、CSS3DSprite）介绍，实现场景中物体标注标签信息
本文介绍了如何在Three.js中使用CSS3DRenderer渲染3D场景中的标签，并对比了CSS3DRenderer与CSS2DRenderer的区别。CSS3DRenderer通过CSS 3D变换渲染HTML元素，支持完整的3D变换，元素可随相机视角产生透视效果，适合需要HTML元素深度融入3D空间的场景。而CSS2DRenderer仅支持2D变换，元素始终面向屏幕，适合静态标签和信息提示。文章还详细讲解了CSS3DObject的创建与使用，并提供了示例代码，展示了如何在正方体和圆柱体上标注标签。
2025-05-12 15:01:32
1317
原创 Vue3 Echarts 3D立方体柱状图实现教程
在前端开发的数据可视化场景中，ECharts 是一个强大且灵活的工具，它能创建各种复杂而美观的图表。本文将详细阐述如何利用 ECharts实现3D立方体柱状图type: “pictorialBar” 是 ECharts 中的一种特殊柱状图类型，它允许使用自定义图形（如图片、形状）来代替传统的柱状条，为数据可视化增添更多创意和灵活性。type: "pictorialBar"也被叫作象形柱图。它首先是个柱状图，但是柱状图的柱子并不显示。
2025-04-30 16:51:17
1966
原创 Vue3 Echarts 3D圆柱体柱状图实现教程以及封装一个可复用的组件
在前端开发的数据可视化场景中，ECharts 是一个强大且灵活的工具，它能创建各种复杂而美观的图表。本文将详细阐述如何利用 ECharts实现3D圆形柱状图，并封装一个可复用的组件。type: “pictorialBar” 是 ECharts 中的一种特殊柱状图类型，它允许使用自定义图形（如图片、形状）来代替传统的柱状条，为数据可视化增添更多创意和灵活性。type: "pictorialBar"也被叫作象形柱图。它首先是个柱状图，但是柱状图的柱子并不显示。
2025-04-29 16:23:58
2508
5
原创 Three.js 快速入门教程【二十】3D模型加载优化实战：使用gltf-pipeline与Draco对模型进行压缩，提高加载速度和流畅性
在 Three.js 开发中，3D 模型的体积直接影响加载性能与用户体验。gltf/glb 格式虽已是行业标准，但高精度模型仍需进一步压缩。本文将详细介绍基于 gltf-pipeline 工具链结合 Draco 算法的模型压缩方案，涵盖工具使用、实际项目开发中的实践，助你构建高性能 3D 应用。gltf-pipeline 是 Cesium 开发的基于 Node.js 的开源 gltf/glb 模型转换工具。
2025-03-28 15:04:14
1503
1
原创 Three.js 快速入门教程【十九】CSS2DRenderer（CSS2D渲染器）介绍，实现场景中物体或设备标注标签信息
在 Three.js 中构建 3D 场景时，有时我们需要为场景中的设备或对象添加标签标注，以提供更多的信息。本文将讲解如何使用 CSS2DRenderer 在 Three.js 场景中实现设备标签标注CSS2DRenderer 是 Three.js 提供的一个非常有用的工具，它允许我们使用 CSS 和 HTML 来创建 2D 元素，并将它们渲染到 3D 场景中，使其能够跟随场景中的对象移动和旋转，同时保持 2D 界面的灵活性和易操作性。
2025-03-28 15:03:38
1456
原创 Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体
在上一篇文章介绍了射线和射线投射器Raycaster使用，了解了射线拾取的核心原理。要实现鼠标点击选中模型的功能，还缺失关键的一步——如何将鼠标的2D屏幕坐标转换为三维空间坐标，并以此坐标为原点，相机与该坐标连线方向为射线方向检测这条射线与场景中模型是否相交。本教程将介绍该核心步骤实现。通过本教程，你应该已经了解了射线（Ray）、射线拾取模型（Raycaster）、屏幕坐标转标准设备坐标的相关概念和实现方法，以及相关 API 的使用。
2025-03-24 15:03:58
1374
原创 Three.js 快速入门教程【十七】射线拾取模型——射线与射线投射器Raycaster介绍
在 Three.js 开发的 3D 场景中，我们经常会遇到这样的需求，如何通过鼠标控制选中目标模型，这个行为也称为拾取模型。拾取模型是一个非常实用的功能，它允许用户通过鼠标点击或者触摸屏幕来选中场景中的特定模型，为交互性的 3D 应用程序增添了更多可能性。本教程将介绍射线拾取模型的相关概念和实现方法。在 Three.js 中，射线（Ray）是一个表示从一个点出发，沿着特定方向无限延伸的几何对象。
2025-03-24 15:03:27
1213
原创 Three.js 快速入门教程【十六】调试神器 gui.js使用详解，可视化面板控制场景参数提高开发效率
在使用 Three.js 进行 3D 场景开发时，我们常常需要动态调整场景中的各种参数，如物体的位置、旋转角度、材质属性、灯光强度等。手动修改代码再重新运行显然效率低下，这时 GUI.js 库就派上了用场。它能帮助我们快速创建用户界面，方便地控制场景中的参数进行调试。本文将详细介绍如何在 Three.js 项目中使用 GUI.js 库。（1）使用 npm 安装（2）使用 CDN通过本文的介绍，你学会了如何在 Three.js 项目中使用 gui.js 库来创建用户界面，方便地控制场景中的参数。
2025-03-12 15:00:26
1190
原创 Three.js 快速入门教程【十五】交互神器DragControls使用详解，实现对物体或模型拖拽
在 Three.js 中创建 3D 场景时，让用户能够与场景中的物体进行交互是提升用户体验的重要部分。DragControls 是 Three.js 提供的一个非常实用的工具，它允许用户通过鼠标拖动场景中的物体，从而实现更直观的交互。本文将详细介绍如何在 Three.js 项目中使用 DragControls。DragControls 是 Three.js 官方提供的交互辅助类，用于实现物体在三维空间中的拖拽操作。基于 CSS 坐标系的屏幕点击检测通过 Raycaster 进行三维物体拾取。
2025-03-11 15:08:32
1411
3
uniapp vue3 自定义下拉刷新组件pullRefresh，带释放刷新状态、更新时间、加载动画
2024-11-26
uniapp vue3 下拉菜单组件（dropdownMenu）
2024-11-23
web端播放rtsp/rtmp视频流demo
2024-04-02
微信小程序隐私协议引入组件demo
2023-09-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人