- 博客(49)
- 收藏
- 关注
RSS订阅原创 使用PC浏览器devTool工具调试安卓手机h5页面
移动端H5页面调试指南 本文详细介绍了在安卓设备上调试H5页面的两种方法：USB调试和无线调试。通过开启开发者选项，使用ADB工具连接设备后，可在电脑浏览器中实时检查移动端页面元素和布局问题。文章还提供了常见问题的解决方案，如连接失败、授权异常等，并解释了ADB工作原理。这些方法能有效解决移动端浏览器兼容性和布局异常问题，提升前端开发效率。
2026-01-17 10:32:08
943
原创 Qiankun 微前端通信与路由方案总结
本文总结了qiankun微前端框架下主子应用通信和路由跳转的解决方案。通信方面，基于Pinia实现自定义状态管理，避免与qiankun内置API冲突，并提供实时同步和按需获取两种模式。路由方面，采用子应用memoryHistory+主应用统一导航的方案，解决路由冲突问题，支持深层路由直接访问。方案包含运行时校验、路由同步机制和子应用初始路径处理等细节，为企业级微前端应用提供了稳定可靠的基础架构。
2026-01-14 10:37:15
1012
原创 Qiankun 两种加载模式registerMicroApps和loadMicroApp对比分析
qiankun微前端框架提供两种子应用加载方式：registerMicroApps+start（自动路由管理）和loadMicroApp（手动控制）。前者适合简单路由切换场景，后者支持多应用并行加载等复杂需求。关键区别在于路由控制方式、容器管理和多应用支持能力。registerMicroApps模式需容器常驻DOM且存在路由冲突风险，而loadMicroApp可灵活控制生命周期，特别适合仪表盘、工作台等需要同时展示多个子应用的场景。开发者应根据实际需求选择。
2026-01-14 10:21:40
1014
原创 从弹窗变胖到 npm 依赖管理：一次完整的问题排查记录
摘要：本文记录了一个Vue3+Element Plus项目中的弹窗样式异常问题排查过程。从表面样式问题追溯到npm镜像失效、Node版本冲突、依赖版本升级等工程化问题。通过分析问题链，提出了统一镜像地址、锁定Node版本、严格依赖管理等解决方案，并总结了前端工程化中依赖管理的重要经验教训。文章强调lock文件的重要性，提醒开发者不要轻易删除lock文件，并分享了版本范围符号、SemVer规范等实用知识点。
2026-01-05 10:20:44
650
原创 Single-SPA 学习总结
Single-SPA 是微前端领域的"鼻祖"框架，它是一个用于前端微服务化的 JavaScript 框架，允许你在同一个页面中使用多个框架（React、Vue、Angular 等），而不需要刷新页面。
2025-12-28 10:19:41
771
原创 Vue3 + Axios 企业级请求封装实战：从零搭建完整的 HTTP 请求层
本文分享了一套经过生产验证的Axios封装方案，适用于Vue3+TypeScript项目。方案采用分层架构设计，包含业务层、HTTP实例层、Axios封装层和工具层。核心实现包括：1）Axios类封装，提供通用请求和分页请求方法；2）请求拦截器统一处理请求头，注入平台标识、设备信息、Token认证、营销追踪等关键参数；3）支持多端环境适配（H5/微信/App）。该方案实现了企业级项目所需的统一请求管理、安全传输和错误处理机制。
2025-12-23 10:20:23
1085
原创 微信扫码登录 iframe 方案中的状态拦截陷阱
微信扫码登录 iframe 方案中存在状态拦截失效问题：当用户在扫码授权前取消勾选协议时，虽然父页面拦截了 postMessage，但 iframe 回调页面已提前写入 cookie，导致登录仍能完成。问题根源在于 iframe 回调页面越权操作了登录状态（cookie）。解决方案是明确职责边界，让 iframe 只负责传递 token，由父页面根据协议状态决定是否设置 cookie 和完成登录。这提醒我们在跨 iframe 通信时要严格划分组件职责，避免状态操作分散导致控制失效。
2025-12-17 11:27:36
452
原创 微前端实现方式：HTML Entry 与 JS Entry 的区别
微前端架构中，HTML Entry和JS Entry是两种核心的子应用加载方式。HTML Entry通过解析子应用的HTML入口文件加载资源，适合已有SPA项目快速接入，提供自动化的样式隔离和沙箱环境。JS Entry则直接加载JS模块，要求子应用显式实现生命周期函数，更适合全新设计的微前端系统。两种方式在接入成本、资源加载、隔离能力和构建部署等方面存在显著差异。HTML Entry更偏向声明式、低侵入的解决方案，而JS Entry则提供更高自由度和控制权。实际选择需根据项目特点、团队能力和技术需求综合考量
2025-12-15 20:53:25
742
原创 记录一次微前端改造：把 10+ 个独立 Vue 项目整合到一起
本文记录了将10+个独立Vue项目整合为微前端架构的实践经验。项目背景是公司多个独立部署的Vue应用存在体验割裂、重复建设等问题。技术选型上选择了京东micro-app方案，因其简单易用，子应用改造成本低。具体实现包括：新建基座应用作为容器，配置路由和micro-app组件；子应用只需添加public-path文件和改造入口文件即可接入。状态共享沿用现有localStorage方案，部署保持各应用独立。该方案显著改善了用户体验，减少了页面跳转白屏时间，同时保留了子应用独立运行能力。
2025-12-14 14:06:55
755
原创 Vue 组件解耦实践：用回调函数模式替代枚举类型传递
本文通过一个登录模块重构案例，介绍了使用回调函数模式解耦Vue组件的方法。原有实现中父组件依赖子组件的枚举类型来判断操作来源，导致代码耦合度高、扩展性差。重构后子组件将后续操作封装为回调函数保存，父组件只需在协议确认后通知子组件执行回调，无需了解具体操作细节。这种模式降低了组件耦合度，提高了代码可维护性和扩展性，适用于异步确认流程、多入口单出口等场景。文章还对比了两种方案的优劣，并强调了组件职责单一的重要性。
2025-12-12 12:36:47
472
原创 多标签页登录状态同步：一个简单而有效的解决方案
本文介绍了一种解决多标签页登录状态同步问题的简单方案。通过在登录页面启动定时器轮询Cookie中的token状态，当检测到token存在时自动刷新页面，实现多标签页登录状态的实时同步。该方案具有实现简单、用户体验好、资源可控等优势，并提供了定时器管理、Cookie操作等技术细节。文章还对比了BroadcastChannel API这一更优方案，指出其实时性和性能优势。最终方案选择需权衡兼容性、实现复杂度等因素。
2025-11-26 11:06:56
673
原创 从“版本号打架”到 30 秒内提醒用户刷新：一个微前端团队的实践
本文介绍了一个微前端团队解决"版本号打架"问题的实践方案。团队通过纯前端轮询version.json文件的方式，在30秒内感知版本更新并提醒用户刷新。方案采用构建时生成唯一版本号、运行时轮询比对的技术路径，结合Nginx精准缓存控制，实现了零侵入的CI/CD集成。关键点包括：版本号生成一致性保障、轮询请求的缓存规避策略、以及页面激活时的即时检查机制。该方案有效解决了测试环境版本滞后问题，提升了交付效率。
2025-11-22 13:47:31
773
原创 TypeScript 类型工具与 NestJS Mapped Types
NestJS 的 @nestjs/mapped-types 提供了一套类型工具（如 PartialType、PickType、OmitType），与 TypeScript 内置类型工具（Partial、Pick、Omit）存在关键差异。NestJS 的类型工具会生成运行时存在的类，保留装饰器和验证元数据，适用于 DTO 和验证场景；而 TypeScript 内置类型仅用于编译时类型检查。开发时应根据需求选择：DTO 类使用 mapped-types，纯类型操作使用内置类型工具，并保持项目一致性。
2025-11-14 11:29:24
337
1
原创 Vue 3 超强二维码识别：多区域/多尺度扫描 + 高级图像处理
Vue 3 二维码识别工具库 vue-qrcode-scanner，解决传统识别中的三大痛点：复杂背景难识别、小二维码识别率低、识别速度慢。该库提供多区域/多尺度扫描策略，内置多种图像预处理算法（OTSU、自适应阈值、锐化等），支持Composable API和工具函数两种使用方式。具备零依赖、TypeScript支持等特性，可快速集成到项目中。适用于从文件或URL解析二维码，返回内容包括数据和位置坐标。安装简单，只需配合jsQR算法库即可使用，适合需要稳定高效二维码识别的前端项目。
2025-11-10 16:04:39
1073
原创 基于Cookie的SSO单点登录系统设计与实现
本文详解基于Cookie的SSO单点登录系统，涵盖核心概念、架构（认证中心+业务应用+共享Cookie）、实现（认证中心接口、客户端SDK、Vue集成等），含安全措施、开发适配与部署，分析优劣势及适用场景，提供完整解决方案。
2025-09-17 20:45:50
759
原创 初探微前端：技术架构思想与主流实现方案
微前端是一种将前端应用拆分为独立子应用的架构思想，支持技术栈无关、独立开发部署和运行时集成1。其核心优势包括提升团队协作效率、模块解耦和渐进式技术升级，主流方案如qiankun通过沙箱隔离实现灵活集成
2025-09-17 20:26:41
1207
原创 vue-route-query-hook：一个用于 Vue 3 的 Composable，提供响应式参数与 URL 查询参数之间的双向同步功能
vue-route-query-hook 是一个 Vue 3 的 Composable 工具，用于实现响应式参数与 URL 查询参数的双向同步。它提供类型安全支持，支持排除字段、空值处理等配置选项，可通过 useRouteQuery 方法轻松集成到项目中。该工具轻量无依赖，基于 Vue 3 Composition API 和 Vue Router 4，支持自动类型转换和历史记录管理，适用于需要保持状态与 URL 同步的场景。
2025-08-05 10:30:19
636
原创 Vue3+TS的H5项目实现微信和企业微信分享卡片样式，并兼容ios签名失败问题
该方案解决了微信分享链接显示不美观的问题，实现了卡片式分享效果，并进行了 hooks 封装
2025-06-04 10:30:00
829
原创 uni-app利用renderjs实现安卓App上jssip+freeswitch+webrtc音视频通话功能
本文讲解了如何在uni-app项目开发安卓app时使用renderjs配合jssip库来实现注册到信令服务器并进行音频、视频通话的功能，感谢大家参考
2024-06-13 10:56:51
1958
6
原创 JsSIP+FreeSwitch+Vue实现WebRtc音视频通话
本文讲解了如何在vue项目中使用jssip库来实现注册到信令服务器并进行音频、视频通话的功能，感谢大家参考
2024-06-13 09:27:44
4147
4
原创 uni-app为图片添加自定义水印（升级版）
uni-app拍照设置自定义水印，是对之前文章内容的补充，现在的水印样式更加好看，更加高级，欢迎大家参考
2024-04-18 16:48:29
1940
5
原创 Canvas实现简易数字电子时钟（带自定义样式）
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果和自定义样式，采用了面对对象的实现思路。
2024-04-03 09:58:12
810
原创 Canvas实现数字电子时钟（带粒子掉落效果）
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果，采用了面对对象的实现思路。
2024-04-03 09:48:24
515
原创 解决使用Vscode调试Electron主进程时终端打印中文时乱码问题
本文主要讲解了使用VScode调试Electron项目主进程代码时，终端控制台显示中文乱码的问题以及解决方法
2024-03-04 09:52:49
2157
1
原创 uni-app为图片添加自定义水印（解决生成图片不全问题）
本文主要讲解了如何在uni-app中拍照或者从相册中选取到了图片之后，为这些图片动态生成可自定义的水印，并解决了生成图片不全的问题
2024-02-01 13:47:33
4331
7
原创 uni-app利用renderjs实现截取视频第一帧画面作为封面图
本文讲述了如何动态捕获视频第一帧画面作为视频封面，主要利用了 renderjs 和 canvas 技术
2024-01-12 09:12:48
3518
16
原创 利用renderjs在app端加载for web库
本文讲述了在使用uni-app开发app的过程中，如何使用renderjs语法来实现在app上加载使用for web的库，包括renderjs的基础语法与通信方式
2023-12-28 20:01:13
1680
原创 Uni-App 接入 uni-push 2.0 指南
本文详细介绍了如何在Uni-App中接入官方uni-push2推送消息，大家可以参考学习，有不对的地方欢迎评论指正。
2023-10-31 11:01:07
4504
2
原创 git merge 和 git rebase 区别
git merge会保留原始分支的独立提交历史，形成一个新的合并提交，适合保留分支的完整历史。git rebase会整理提交历史，将当前分支的提交应用到目标分支的最新提交上，形成一个线性的提交历史，适合创建整洁的提交历史。选择合适的操作取决于项目的需要、开发流程和个人偏好。
2023-10-26 09:00:08
323
原创 多维数据折线图比对组件接入指南
该组件以全屏弹窗的形式打开，“数据控制面板”中默认有一块空数据，用户在选择了“点位”、“开始时间”、“结束时间”（其中“点位”选择后不可更改，“开始时间”和“结束时间”可以通过右侧时间范围选择器选择预设好的几个时间段来快速计算，计算规则参考）后，组件会获取该点位（设备）对应时间段的对应监测因子的数据值变化趋势，通过点击“添加点位+”来同步对比多个设备相同监测因子在各时段范围内的变化趋势，便于分析数据。
2023-10-24 10:32:32
285
原创 使用VS Code运行Java SpringBoot项目
本文主要介绍了如何在 Visual Studio Code 编辑器中支持运行 Java 的 SpringBoot 的项目，如何去启动服务，以及一些问题的解决
2023-09-20 08:43:59
7199
1
原创 我的创作纪念日
以前个人学习时也记了不少笔记，工作后忙起来了就没有怎么记了，偶然发现一个朋友一直以来都有在CSDN上发布自己的笔记，包括大学学习时的和参加工作后的，遂感觉自己也不应该就这么让知识在脑中荒废，知识就应该是用来分享的，再加上还有像CSDN这种平台给提供机会，所以就开始我的博客分享了。我个人感觉我目前分享的文章中，、图片防盗链相关的知识。
2023-09-14 16:08:17
121
原创 前端实现绕过源服务器限制嵌入iframe并解决图片防盗链
在使用iframe时出现Refused to frame xxxxxxxx because an ancestor violates the following Contentt Security Policy directive: "frame-ancestors" self的解决方法和图片防盗链的绕过方法
2023-08-03 18:40:39
2744
6
原创 Embarcadero Dev-C++编辑器中文不显示和乱码问题
本文主要提到了了Embarcadero Dev-C++编辑器中中文不显示和乱码问题，并且给出了解决方法，可以帮助大家解决问题
2023-07-21 16:15:26
5598
4
原创 uni-app实现水印相机（仅小程序端）
本文详细的讲解了在使用uni-app时，如何利用官方api来实现自定义水印相机的需求，为业务开发提供了有效的解决方案
2023-07-12 21:37:33
3998
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人