- 博客(78)
- 收藏
- 关注
RSS订阅原创 从零实现 Vue3 + Element Plus 摄像头拍照与保存功能（带源码）
利用调用摄像头并绑定到<video>通过Canvas API截取视频帧生成图片借助Blob和<a>标签实现本地下载重视资源释放和兼容性处理整个流程无需复杂插件，仅通过原生 API + Vue3 即可完成，适配大部分现代浏览器和移动端设备，满足日常开发中的拍照保存需求。
2026-01-04 13:59:28
677
原创 【前端实战】图片元素精准定位：无论缩放，元素始终钉在指定位置
图片元素精准定位的核心就是「锚定基准 + 比例锁定 + 百分比适配」，掌握这三个原则，无论做可视化大屏、地图标注还是产品页，都能让元素牢牢钉在图片指定位置，适配所有屏幕尺寸。
2026-01-04 08:52:25
434
原创 从 HTML 到 WXML：小程序标记语言的异同与实践解析
WXML 与 HTML 的核心共性在于 “标记语言构建页面结构” 的底层逻辑，而差异则源于运行环境（浏览器 vs 小程序内核）、设计目标（通用网页 vs 小程序场景）的不同。WXML 舍弃了 HTML 中适配浏览器的冗余特性，新增了小程序专属的语法和标签，本质是为了适配微信小程序的双线程架构、性能要求和生态规则。对于前端开发者而言，理解两者的异同，核心是跳出 “DOM 操作” 的固有思维，适应小程序的 “数据驱动” 模式和专属语法体系。
2025-12-31 09:00:00
1621
原创 微信小程序解析
微信小程序是运行在微信内置内核中的轻量级应用，无需下载安装，用户通过扫码、搜索、分享等方式即可打开，兼具 “原生 App 的体验” 和 “网页的便捷性”。轻量化：包体积限制（主包≤2MB，分包总计≤20MB），加载速度快；强生态：依托微信 10 亿 + 用户，可调用微信支付、通讯录、地理位置等原生能力；免安装：无需应用商店审核，用户即点即用，降低获客成本；跨端适配：自动适配 iOS/Android 系统，无需单独开发。微信小程序以轻量化、强生态、低门槛的优势，成为移动开发的重要方向。
2025-12-31 09:00:00
918
原创 UniApp 全面介绍与快速上手
UniApp 是由 DCloud 推出的跨平台应用开发框架，基于 Vue.js 语法规范，整合了微信小程序、App（iOS/Android）、H5、百度小程序、支付宝小程序、抖音小程序等主流平台的开发能力。开发者只需编写一套代码，即可编译为多个平台的应用，大幅降低多端开发的成本。UniApp 凭借 Vue.js 语法、跨端覆盖广、开发效率高的优势，成为多端开发的首选框架之一。从环境搭建到项目创建，从页面开发到多端运行，UniApp 大幅降低了跨端开发的门槛。
2025-12-30 17:58:38
833
原创 从零搭建 React 移动端项目
本文完整覆盖了 React 移动端项目的搭建全流程：从环境准备→项目初始化（Vite+React 18）→移动端适配（rem/vw）→UI 库集成（Antd Mobile）→核心功能开发（路由、下拉刷新、交互优化）→打包发布。适配方案优先选择 rem（兼容性好）或 vw（配置简单）；UI 库推荐 Antd Mobile（React 生态适配最好）；打包优化重点是按需引入和分包，减小移动端加载体积；调试时注意移动端特有问题（点击延迟、键盘遮挡、屏幕适配）。
2025-12-30 14:21:28
944
原创 从零搭建 Vue 移动端项目
本文完整讲解了 Vue 移动端项目的搭建流程：从环境准备→项目创建→适配配置→UI 库集成→功能开发→打包发布，核心是解决移动端适配和交互问题。实际开发中可根据项目需求选择适配方案（rem/vw）、扩展更多功能（如支付、分享、定位），并结合 ESLint、Prettier 保证代码规范。掌握这套流程后，你可以快速搭建各类 Vue 移动端项目（电商、资讯、工具类 App），后续可深入学习 Vue 3 的组合式 API、Vite 优化、移动端性能调优等内容，提升项目体验。
2025-12-30 14:19:06
1308
原创 微信小程序实现多景点地图路线规划与可视化
javascript运行// 引入腾讯地图SDK// 初始化SDK（替换为自己的Key）key: '你的腾讯位置服务Key'});Page({data: {// 地图基础配置longitude: 116.397455, // 默认经度latitude: 39.909187, // 默认纬度scale: 10, // 地图缩放级别userLocation: null, // 用户定位信息// 路线与标记配置polyline: [], // 路线数据。
2025-12-28 08:30:00
694
原创 Vue3 打造移动端自适应二维码生成与长按下载组件
通过 Props 灵活配置「是否显示背景图」「页面标题」「二维码内容」等核心参数，适配不同业务场景：javascript运行// 定义通用Props，支持外部传参配置// 是否显示背景图showBg: {default: true // 默认显示背景图},// 页面标题default: '二维码分享'},// 二维码内容（支持外部传入）},// 二维码尺寸比例（视口占比）qrScale: {});// 基础变量定义// Canvas元素引用。
2025-12-28 08:15:00
671
原创 React 封装 UEditor 富文本编辑器
本次封装并非重写 UEditor，而是适配 React 生态规则生命周期同步：实例创建 / 销毁与组件挂载 / 卸载绑定，避免内存泄漏；状态隔离：非响应式状态用useRef管理，响应式状态通过propsonChange同步；痛点针对性解决图片样式：清除原生样式 + 统一响应式规则 + 事件监听自动修正；占位符：上传前激活编辑器，区分上传状态避免冲突；内容同步：双向绑定，兼顾 React 状态和 UEditor 原生内容；扩展与通用：暴露核心方法，剥离业务配置，保证组件复用性。
2025-12-27 16:58:34
324
原创 基于 Vue3 + TypeScript 封装 UEditor 富文本编辑器组件
解决 TS 类型、生命周期同步等基础适配问题；优化双向绑定、光标保留等用户体验细节；统一图片样式、上传事件等核心业务逻辑；保留扩展能力，兼顾通用性和灵活性。这种封装思路同样适用于其他原生 JS 富文本编辑器（如 KindEditor、CKEditor），核心是遵循 Vue 的开发范式，将原生库的能力封装为符合 Vue 习惯的组件，同时解决体验和性能问题。
2025-12-27 16:55:12
927
原创 Vue 实现动态路由
将路由分为「常量路由」（无需权限，如登录页）和「异步路由」（需权限，如首页、系统管理）：javascript运行// 引入过滤函数// 1. 常量路由（所有用户可见）meta: { hidden: true } // 侧边栏隐藏},// 2. 异步路由（需权限过滤）meta: { title: '首页', icon: 'dashboard' }},component: () => import('@/views/layout/index'), // 布局组件。
2025-12-26 15:37:10
491
原创 基于Umi 框架（Ant Design Pro 底层框架）的动态路由权限控制实现方案
首先通过 TypeScript 接口约束菜单、路由、用户数据结构，保证类型安全：typescript运行// 菜单单项接口（兼容后端多字段返回）path?: string;// 菜单路径name?: string;// 菜单名称（优先）title?: string;// 菜单标题（兼容字段）children?// 子菜单// 兼容其他自定义字段// 本地存储的用户菜单数据结构menu?// 用户拥有的菜单列表// 路由匹配参数接口（Umi 路由对象子集）path?: string;
2025-12-26 15:31:58
486
原创 微信小程序如何实现微信授权登录
本文详细介绍了小程序中微信授权登录的一体化实现方案，通过"信息完善→凭证获取→绑定判断→登录/绑定"的分步流程，兼顾用户体验与安全性。方案包含：1）新版微信适配（头像选择器+昵称组件）和旧版兼容处理；2）获取openid核心流程及状态校验；3）根据绑定状态分流的登录逻辑；4）统一的错误处理和状态管理。特别强调安全管控、体验优化和版本兼容性，实现了微信快捷登录与手机号绑定的深度融合，适用于各类小程序登录场景。
2025-12-26 09:37:30
1049
原创 Vue 组件 vs React 组件深度对比
Vue 组件以 “声明式、贴近 HTML” 为核心，封装度高、上手快，适合快速开发；React 组件以 “函数式、JSX 融合” 为核心，灵活性强，适合复杂场景。两者核心目标一致：将页面拆分为独立、可复用的组件，降低维护成本。无需纠结 “谁更好”，核心是根据团队技术栈、项目复杂度选择适配的方案 —— 甚至可以通过 Umi、Vite 等工具实现两套组件的互通使用。组件化的本质是 “分而治之”，无论 Vue 还是 React，掌握其组件设计的核心逻辑，就能灵活应对各类前端开发场景。
2025-12-26 08:39:12
723
原创 React + FullCalendar 实现高性能跨天事件日历组件
定制事件显示样式，展示时间和标题：tsx// 事件内容渲染return (<divstyle={{}}</div>通过实现事件内容的个性化展示，区分时间和标题显示。统一处理单天 / 跨天事件的展示逻辑，解决跨天时间异常问题实现日期权限控制和事件数量限制，提升用户体验自定义事件样式和交互逻辑，满足个性化需求完整的中文本地化配置，符合国内使用习惯该组件可以直接集成到 React 项目中，通过简单的配置和扩展即可满足大部分业务场景的日历需求。
2025-12-26 08:34:32
661
原创 微信小程序：地图定位 + 景点路线规划功能实现
本文详细介绍了文旅类小程序地图功能的核心实现流程，重点解析"用户定位→景点加载→路线规划→视野适配"的完整技术方案。核心环节包括：1)使用wx.getLocation获取用户位置；2)通过wx.request请求并过滤景点数据；3)利用QQMapWX.direction规划驾车路线；4)自动计算视野范围适配所有标记点。开发中需注意坐标系兼容性（gcj02）、权限配置、性能优化（限制6条路线）及异常处理，通过Promise封装异步操作并配合加载提示提升用户体验。该方案实现了从精准定位到智能
2025-12-25 17:59:51
934
原创 微信小程序 /uni-app 录音功能实现
录音功能依赖实现录音控制，实现音频播放；必须完成麦克风权限的申请和校验，才能正常使用录音功能；通过计时器实现录音时长实时计算和最长时长限制，配合 CSS 动画实现状态可视化；组件销毁时要清理计时器、停止录音、销毁音频实例，避免内存泄漏。
2025-12-25 10:50:18
582
原创 uni-app通用一维码/条形码生成方案：一次开发，多场景复用
本文提出了一种基于Code128标准的通用一维码生成方案，采用三层架构设计实现业务解耦。工具层封装纯编码逻辑，适配层处理小程序Canvas绘制，业务层通过Hooks一键调用。方案支持任意文本数据生成条码，具备自适应渲染、防抖优化等特性，可广泛应用于医疗、零售、物流等场景。核心优势在于高复用性、易维护性和跨平台兼容性，开发者只需关注数据源和容器，无需处理底层实现细节，显著提升开发效率。
2025-12-25 09:53:13
954
原创 微信小程序：蓝牙 + iBeacon 实现景区语音讲解功能
页面加载→初始化音频管理器→判断是否首次进入（控制蓝牙弹窗显隐）；检测蓝牙状态→未开启则引导开启，开启则请求景点数据；有 iBeacon UUID 则搜索设备（5 秒超时），无则直接加载音频资源；点击播放音频→校验蓝牙状态→通过则播放，未通过则引导开启；页面销毁→清理音频、蓝牙、定时器等所有资源。
2025-12-25 09:08:10
472
原创 ant design pro不安装第三方库，如何实现多标签页面（带源码）
本文基于React+Umi+Ant Design技术栈，提出了一套完整的动态标签页实现方案。方案包含路由联动、标签自动生成、缓存恢复等核心功能，通过sessionStorage实现标签状态持久化，利用Umi的权限控制确保标签与路由权限一致。文章详细拆解了标签页数据结构定义、路由标题匹配、首页标签生成等关键技术点，并提供了性能优化和异常处理策略。最终封装成可直接集成的DynamicTabs组件，支持最大20个标签页并行操作，刷新后可恢复原有标签状态，为中后台系统提供了高效的页面导航体验。
2025-12-24 14:00:13
1637
原创 ant design pro安装多标签页面
是 Alita 框架的插件集合，基于 Umi 封装，专为 React 移动端场景设计。该插件提供多标签页支持，适合需要快速实现标签页导航的场景。确保项目基于 Umi 3 或 Alita 框架构建。字段，标记为开发环境专用依赖。此类依赖仅在开发和构建阶段使用，不会打包到生产环境中。在 Ant Design Pro 3 项目中安装。安装完成后需在项目配置文件中启用插件。插件以启用多标签页面功能。
2025-12-16 16:00:43
215
原创 react，Table 表格树形如何展开所有子集，以及自定义展开按钮样式
expandIcon支持返回React节点实现完全自定义，可通过expanded参数判断当前状态。"收起" : "展开"}><Button}}/></Tooltip>}}
2025-12-06 17:59:54
405
原创 VUE树形菜单组件如何实现展开/收起、全选/取消功能
基于Vue3和ElementPlus的树形菜单组件实现方案。核心功能包括：1) 使用buildTree函数将扁平数据转换为树形结构；2) 通过expandedKeys控制展开状态；3) 递归实现全选/取消功能；4) 支持异步加载数据和大数据量虚拟滚动优化。组件适用于权限管理、目录导航等场景，需注意节点ID唯一性和深层嵌套优化。实现方案包含数据转换、状态控制和性能优化等关键技术点。
2025-12-02 15:00:00
201
原创 微信小程序
微信小程序是一种无需下载安装即可使用的应用，依托微信平台运行，具有轻量、便捷、跨平台的特点。适用于生活服务、电商、工具类场景，用户通过扫码或搜索即可快速使用。
2025-12-01 10:17:32
241
原创 React 简介
当状态变化时，React 会先在内存中生成虚拟 DOM 树，与旧树对比差异（Diffing 算法），最后仅更新真实 DOM 的必要部分。UI 被拆分为独立可复用的组件，每个组件管理自身状态（State）和接收外部数据（Props）。组件分为函数组件和类组件，现代 React 推荐使用函数组件配合 Hooks。JSX 是 JavaScript 的语法扩展，允许在代码中直接编写类似 HTML 的结构。React 的灵活性和丰富的社区支持使其成为现代前端开发的主流选择之一。JSX 最终会被编译为。
2025-11-19 10:16:46
288
原创 什么是react？
当状态变化时，React会先在内存中计算差异（Diffing算法），再仅更新实际DOM中必要的部分，减少直接操作DOM的开销。JSX是JavaScript的语法扩展，允许在代码中直接编写类似HTML的模板，最终被编译为JavaScript对象（React元素）。React应用由多个组件构成，每个组件管理自身的状态和渲染逻辑。组件可以嵌套组合，形成完整的UI树。数据从父组件通过props（属性）传递给子组件，确保数据流动的可预测性。React的简洁性和高性能使其成为现代前端开发的主流选择之一。
2025-11-04 14:47:55
218
原创 什么是Pinia
Pinia 是 Vue.js 的轻量级状态管理库，由 Vue 核心团队维护。它提供响应式状态管理、模块化设计，并且支持 TypeScript。Pinia 是 Vuex 的替代方案，具有更简洁的 API 和更好的开发体验。
2025-10-17 09:15:00
243
原创 什么是导航守卫
导航守卫是路由跳转过程中的钩子函数，用于控制路由的访问权限或执行特定逻辑（如登录验证、页面标题更新等）。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型。当前路由改变但组件复用时触发（如动态参数变化）。在导航被确认前触发，适合处理异步数据获取。导航完成后触发，适合日志记录或页面分析。离开组件前调用，可用于防止未保存退出。在路由跳转前触发，常用于权限验证。进入组件前调用，无法访问。直接在路由配置中定义。，仅对当前路由生效。
2025-10-16 19:27:08
315
原创 axios请求
设置 Axios 的全局默认配置，例如 baseURL 和 headers。在项目中安装 Axios 依赖，可以通过 npm 或 yarn 进行安装。使用 Axios 发起 POST 请求，发送数据到服务器。创建自定义的 Axios 实例，用于不同的 API 配置。在需要使用 Axios 的文件中引入 Axios。使用 CancelToken 取消正在进行的请求。使用 Axios 发起 GET 请求，获取数据。统一处理请求中的错误，包括网络错误和服务器错误。使用拦截器在请求或响应被处理前进行统一处理。
2025-10-12 19:55:16
700
原创 VUE生命周期
Vue 生命周期描述了组件从创建到销毁的完整过程，通过一系列钩子函数（或组合式 API 函数）在不同阶段执行用户逻辑。适用场景：依赖 DOM 的操作（需避免频繁修改数据以防循环更新）。模板编译完成，虚拟 DOM 已生成，但尚未替换真实 DOM。实例已完成数据观测、属性和方法的运算，但 DOM 未挂载。适用场景：操作 DOM、集成第三方库（如图表初始化）。适用场景：获取更新前的 DOM 状态（如滚动位置）。适用场景：极少使用，通常用于插件级别的逻辑。适用场景：极少使用，可在渲染前最后修改数据。
2025-10-11 20:26:15
371
1
原创 什么是JQ
JQ 是一个轻量级且功能强大的命令行 JSON 处理器，用于解析、过滤、转换和操作 JSON 数据。它支持管道操作和丰富的内置函数，常用于脚本和数据处理场景。
2025-09-26 08:02:52
418
原创 HTML新属性
HTML5新增多种属性提升网页功能： 语义化：如data-*存储数据、hidden隐藏元素 表单增强：placeholder提示文本、required必填验证 多媒体支持：controls播放控制、autoplay自动播放 性能优化：loading="lazy"延迟加载、defer异步脚本 交互功能：draggable拖放、contenteditable可编辑内容 需注意浏览器兼容性，这些属性简化开发并改善用户体验。
2025-09-13 21:26:49
370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人