- 博客(266)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 100 行代码打造小而美的 uni-app 请求库
在开发 uni-app 项目时，我们经常需要对接后端接口进行数据请求。虽然 uni-app 框架本身提供了用于发起请求，但在实际项目中，我们往往会封装一些请求库来简化请求的操作，提高代码复用性和可维护性。本文将介绍基于实现一款小而美的请求工具，通过大约 100 行代码的实现，为 uni-app 项目打造一个简洁高效的请求库。
2025-03-10 14:31:01
2167
原创 最全攻略！涉及DeepSeek-R1模型本地部署、免费满血版DeepSeek推荐！
除了上述介绍的两个工具使用 DeepSeek 以外，还可以集成到我们开发编辑器里面，作为一个前端开发人员，VSCode 重度使用者，怎么能缺少了它呢，接下来以 VSCode 为例，看一下如何集成 DeepSeek。使用过 Cursor 工具的开发者应该了解它的强大，它是一款专为程序员打造的新一代 AI 编程助手，它目前不仅支持了 DeepSeek R1，同时也支持 DeepSeek V3 模型。现在它开始思考，您可以看到速度相当快，当然这主要取决于您的电脑配置，配置越好，速度越快。这就是我们部署到本地的。
2025-02-17 10:15:08
3496
原创 ECharts 海量数据渲染性能优化方案
本篇文章将从实践出发，深入探讨 ECharts 渲染十万级数据的性能优化方案，通过实际案例和经验总结，探讨如何提升大规模数据可视化的渲染效率和用户体验。
2025-01-21 13:20:14
4092
原创 ECharts 地图下钻实践：实现一个完整的省市区地图下钻功能
地图下钻（Drill-down）是一种常见的高级交互功能，可以使用户能够深入地图的不同层级，查看更加详细的地理数据，帮助用户逐层深入地查看不同区域或层级的数据分布情况，极大地增强了数据可视化的深度和用户体验。
2024-12-23 13:35:24
6094
2
原创 ECharts 鼠标框选方案：实现鼠标自由刷选区域，定向放大图表（文末附源码）
通过以上流程性的介绍和学习，按照顺序仔细阅读的话，相信大家对于实现通过鼠标框选区域，放大数据图表的功能有一个清晰的思路，主要有两种方案进行选择，如果需要快速的使用刷选功能而尽量少的改动代码，就使用方案一：使用toolbox配置dataZoom区域放大组件，简单快捷，使用方便。如果不仅想要刷选区域放大，还需要对刷选区域进行统计数据，则需要定制使用brush刷子，但同时要注意代码的性能优化。本篇文章到这就结束了，希望能够帮助你更好地理解和使用 ECharts，以上为项目经验所得，如果有任何错误，敬请指出!
2024-12-17 09:59:09
3859
1
原创 VOLTA：更优秀的项目级 Node.js 版本管理工具
Volta 极大地简化了跨项目管理 Node.js 版本的过程，通过使用 Volta 管理项目级别的 Node.js 版本，我们可以确保每个项目都有一个干净且独立的开发环境。这不仅有助于避免版本冲突问题，还能提高团队协作效率，确保所有开发人员都在同一环境下进行开发工作。因此，无论是对于个人开发者还是团队协作，都能显著提高开发效率和项目稳定性。自动化: Volta 自动检测并安装项目所需的 Node.js 版本，无需手动切换。一致性: 确保所有团队成员使用相同的 Node.js 版本，减少潜在的错误。
2024-12-12 14:29:52
2675
2
原创 uni-app 扫码插件推荐：基于支付宝 mPaaS 扫码组件开发，支持 Android 和 iOS
mPaaS 扫码组件是支付宝的扫码组件，目的是可以让我们的 APP 拥有像支付宝一样的扫码体验，识别速度、识别率远超开源扫码。扫码组件完全免费提供使用，但是接入时需要在阿里云上进行注册开通并添加项目。
2024-10-22 11:37:27
5390
3
原创 号外！独立开发的软考刷题小工具，助力软考和 PMP 等级考试
总结一下我在开发这款小程序时所用到的一些技术栈，主要是基于 uni-app + uniCloud 来开发的，不得不说，uni-app 用来开发小程序太便捷了！
2024-09-03 09:58:38
1956
原创 【超详细】从 0 到 1 打包你的 uni-app 应用：安卓篇打包指南
在当前移动应用开发的大环境下，uni-app 作为一种使用 Vue.js 开发多平台应用的框架，为开发者提供了快速构建跨平台应用的能力。本文将为你介绍如何将 uni-app 项目打包成安卓应用，让你的应用在安卓设备上运行并上架应用市场。确保将 HBulider X 升级到3.2.15+版本，否则 App 将会出现问题App 提交云端打包时请勾选“**GooglePlay(AAB)**”渠道，生成.aab 格式的应用不能直接下载 apk 方式安装应用，需引导用户到安装不能存在动态加载代码行为。
2024-08-30 14:15:21
4650
1
原创 uView Pro 的主题系统有多强大？3 分钟设计 uni-app 企业级 UI 主题
uView Pro 作为一个在 uni-app + Vue3 生态中迭代的开源组件库，我把“主题”当成组件库的第一层设计能力——它要能在不改组件代码的前提下，一套配置支撑多主题、暗黑与运行时切换。
2026-04-08 15:00:21
491
原创 一文彻底掌握 CSS Flex 布局（五）- 项目属性 flex、align-self
摘要：本文介绍了CSS Flexbox布局中的两个重要属性：flex和align-self。flex属性是flex-grow、flex-shrink和flex-basis的简写，文章详细说明了五种常用取值情况及其表现效果。align-self属性允许单个项目设置与其他项目不同的对齐方式，可以覆盖容器设置的align-items属性，支持auto、flex-start、flex-end等取值。这两个属性为Flexbox布局提供了更灵活的控件能力，前者控制项目的伸缩行为，后者控制单个项目的对齐方式。
2026-03-13 11:00:17
62
原创 一文彻底掌握 CSS Flex 布局（四）- 项目属性 order、flex-basis、flex-grow
本文介绍了Flexbox布局中项目元素的六个关键属性：order控制排列顺序；flex-basis定义项目初始尺寸；flex-grow设置放大比例；flex-shrink控制缩小比例；flex是grow/shrink/basis的简写；align-self允许单个项目自定义对齐方式。重点阐述了flex-basis与grow/shrink的配合使用机制，以及不同数值配置对空间分配的影响。通过图示展示了属性值变化时项目尺寸的调整效果，帮助理解这些属性的实际应用场景和相互关系。
2026-03-13 10:58:51
71
原创 一文彻底掌握 CSS Flex 布局（三）- 容器属性 justify-content、align-items、align-content
本文介绍了Flex布局中三个核心对齐属性：justify-content控制主轴对齐方式（flex-start/end/center/space-between/around）；align-items控制交叉轴单行对齐（flex-start/end/center/baseline/stretch）；align-content控制多轴线交叉轴对齐（flex-start/end/center/space-between/around/stretch）。重点说明了各属性的具体表现效果及使用场景，其中align-c
2026-03-10 09:39:09
300
原创 一文彻底掌握 CSS Flex 布局（二）- 容器属性 flex-direction、flex-wrap、flex-flow
摘要：Flex布局通过设置父元素为display:flex或inline-flex实现。容器可配置六个关键属性：flex-direction控制排列方向(row/column等)；flex-wrap决定是否换行；flex-flow是前两者的简写。其他属性包括justify-content、align-items和align-content用于对齐控制。默认情况下flex-direction为row，flex-wrap为nowrap不换行。这些属性共同实现灵活的元素排列方式。
2026-03-10 09:37:09
72
原创 一文彻底掌握 CSS Flex 布局（一）- 基本概念
CSS中的Flex布局是一种一维布局模型，能够高效处理元素在行或列方向上的排列。它通过弹性容器和项目实现灵活的空间分布与对齐，自动调整子元素大小以适应可用空间。
2026-03-09 18:01:30
239
原创 开源半年，每月 8K+ 下载，uView Pro 让跨端应用开发提效 10 倍
uView Pro 月下载 8000+，文档阅读 80万+，服务10万人，一行代码即可快速搭建企业级 uni-app 项目，支持H5/小程序/App/鸿蒙多平台
2026-03-09 14:59:57
1235
原创 被拒 10 次后，我的首款开源鸿蒙应用终上架，真的坎坷~
文章介绍了选择uni-app+Vue3+TS技术栈的原因，以及uViewPro组件库的丰富功能和核心优势，包括80+组件、多主题支持、游戏化学习机制等。该应用为开发者提供了鸿蒙跨平台开发的实践参考。
2026-02-02 23:19:08
832
1
原创 2026第一站：分享我在高德大赛现场学到的技术、产品与心得
速览高德开发者大赛中的典型场景与技术亮点，直观判断商业化潜力。从赛场到产品，分享我在高德开发者大赛学到的技术、产品与心得。
2026-01-11 20:07:04
1100
原创 太全面啦！99% 开发者可能都会遇到的 uView Pro 组件库问题 - 总结篇
本文系统介绍了uViewPro组件库在uni-app开发中的集成与使用指南。uViewPro是基于Vue3+TypeScript的高质量UI组件库，支持70+常用组件和多端适配。文章详细讲解了通过npm或uni_modules安装、配置easycom自动引入、Volar类型支持等核心步骤，并针对常见问题如组件显示异常、类型提示缺失、样式冲突等提供了解决方案。最佳实践部分强调规范依赖管理、充分利用TS特性、按需导入工具函数等优化建议，同时提供了问题排查清单。官方资源包括文档、GitHub仓库和社群支持渠道，帮
2025-11-18 17:23:47
1350
原创 超全面！盘点 uni-app 项目创建方式有哪些，看这一篇就够了！
本文系统介绍uni-app项目的创建方式与uViewPro组件库集成。uni-app支持HBuilderX可视化创建（适合初学者）和CLI命令行创建（适合进阶开发者），涵盖Vue2和Vue3技术栈选择。重点解析uViewPro组件库的两种引入方式：HBuilderX通过插件市场安装，CLI项目通过npm安装。文章提供详细配置步骤，包括easycom自动引入、全局样式设置及TypeScript类型提示配置，并针对常见问题给出解决方案。推荐新项目优先选择Vue3+Vite架构，以获得更好的开发体验和性能优化。
2025-11-17 11:45:29
911
原创 uView Pro 全新升级来啦！一行配置，解锁 uView Pro 全局 TS 类型推断、属性校验
uViewPro是基于uni-app+Vue3+TS重构的UI组件库，近期新增对Volar插件下全局组件类型提示的支持。开发者只需在tsconfig.json中配置类型声明，即可在VSCode中获得组件属性、事件和插槽的智能提示与类型校验。
2025-11-17 11:37:34
1279
原创 近期 Star 飙升！uView Pro 文档也开源啦：完全免费、无广告、高效上手
uView Pro 是我近期开源的一款基于 Vue3 + TypeScript + <script setup> 全面重构的 uni-app 生态开源组件库，开源10天，已经突破百星了。
2025-10-13 15:37:47
970
原创 全网最详细的 uni-app 蓝牙打印详解：一键连接打印
全网最详细的 uni-app 蓝牙打印讲解，并且将一些蓝牙连接 API 和打印 API 友好的封装了起来，便于我们一键调用，简洁高效的进行蓝牙打印！
2025-08-11 17:33:25
2907
1
原创 uView Pro 正式开源！70+ Vue3 组件重构完成，uni-app 组件库新晋之星
基于uView UI 组件库，历经一个多月时间打磨，我重构了 uView UI 70+ 核心组件，欢迎大家体验
2025-08-11 11:24:50
2367
原创 从 0 到 1 快速实现海外地图接入（Leaflet + OpenStreetMap）
借助 Tare 来使用 Leaflet + OpenStreetMap 开发海外地图，从 0 到 1 构建一个简单的地图应用程序
2025-06-17 17:21:20
1285
原创 震惊！中石化将开源组件二次封装申请专利，这波操作你怎么看？
关于 “中石化申请基于 vue 的文件上传组件二次封装方法和装置专利，解决了文件上传功能开发步骤繁琐和第三方组件无法满足业务需求的问题，实现了简化开发、提高效率和灵活性的效果。”。
2025-06-17 17:08:55
1231
原创 uni-app 蓝牙连接全面指南：API 流程实践解析
Uni-App蓝牙开发指南：本文介绍了使用Uni-App框架开发跨平台蓝牙功能的核心流程。主要内容包括：1）蓝牙模块初始化、设备搜索与连接等基础操作；2）低功耗蓝牙API使用，包括服务发现、特征值读写和数据监听；3）各平台权限配置要求（Android和iOS）；4）运行时权限请求与用户拒绝处理方案。文章提供了完整的蓝牙开发流程图和关键API调用示例，并强调了注意事项如蓝牙状态检查、版本兼容性等问题，为后续实现蓝牙打印等应用场景打下基础。
2025-05-26 09:34:59
4560
1
原创 了解JavaScript的垃圾回收机制及实现方法
垃圾回收(GC)是计算机科学中自动管理内存的机制，通过回收不再使用的内存空间来减轻程序员负担。JavaScript采用标记清除法作为主要回收策略，通过标记活动对象并清除未标记对象来实现回收。相比引用计数法，标记清除法能有效处理循环引用问题。GC在引擎空闲、内存超限等时机触发，采用分代式回收策略优化性能。开发者可通过减少对象创建、及时解除引用等方式优化GC效率。理解GC机制有助于编写更高效的JavaScript代码，提升应用性能与可维护性。
2025-05-26 09:19:10
791
原创 整理一个非常强大的 CSS 选择器：has()
你有没有想过使用CSS选择器来检查父元素中是否存在特定的元素？例如，如果一个卡片组件中有图片，就给它添加一个。这以前在CSS中是无法实现的，而全新的 CSS 选择器:has就可以帮助我们选择包含特定元素的父元素。下面来看看这个全新的 CSS 选择器吧！在CSS中，我们无法根据元素中是否存在特定的元素来设置父元素的样式，要想实现这一点，就必须创建CSS类，并根据需要进行类的切换。来看下面的例子：这里有两种卡片：包含图片和不包含图片。/* 有图片的卡片 */.card {gap: 1rem;
2025-04-25 14:50:39
1121
原创 告别冗长的 if…else，掌握优化条件语句的技巧
在日常的代码编写过程中，我们经常会使用条件语句（if...else）来控制程序的流程。然而，当条件语句过多时，我们很容易陷入代码难以理解和维护的困境中。重复的逻辑和冗长的代码会增加我们阅读和修改代码的难度，同时也会影响程序的性能。为了更好地优化条件语句，提高代码的可读性和可维护性，我们可以使用一些小技巧来简化和精简我们的代码。本文将分享几个优化条件语句的小技巧，帮助开发者更高效地编写代码。通过上述优化条件语句的小技巧，我们可以改善代码的可读性和可维护性，提高程序的性能，减少开发和维护成本。
2025-04-23 10:23:10
941
原创 【全解析】深入理解 JavaScript JSON 特性操作和实用技巧
来将 JSON 对象转换为字符串。它支持第二、三个参数。我们可以借助第二三个参数来格式化 JSON 字符串。当 JSON 中的内容很多时，想要查看指定字段是比较困难的。的第二个属性来获取指定值，只需传入指定一个包含要查看的属性。这里的 2 其实就是为返回值文本在每个级别缩进 2 个空格。下面来看看 JSON 有哪些实用技巧。
2025-04-23 09:47:18
629
原创 【全解析】深入理解 JavaScript JSON 数据解析
JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式，这些特性使 JSON 成为理想的数据交换格式。易于阅读和编写，同时也易于机器解析和生成。所有现代编程语言都支持这些数据结构，使 JSON 完全独立于语言。
2025-04-22 10:29:06
1284
原创 React 单一职责原则：优化组件设计与提高可维护性
单一职责原则的定义是每个类应该只有一个职责，也就是只做一件事。这个原则是最容易解释的，因为我们可以简单地将其理解为“每个功能/模块/组件都应该只做一件事”。在 React 组件中，单一职责原则要求将组件的功能分解为更小的部分，每个部分只负责一个特定的职责。这样做的好处是，当需求发生变化时，只需要修改与该职责相关的部分，而不会影响整个组件。这提高了代码的可维护性和可测试性。在所有这些原则中，单一职责原则是最容易遵循的，也是最有影响力的一项，因为它极大提高了代码的质量。
2025-04-22 10:23:18
1345
原创 编程效率翻倍！推荐使用智能进化版的 VS Code
使用 Cursor 一定要用好这四个键：Tab⌘ K⌘ L⌘ I提高编码效率：Cursor 的智能代码补全和实时建议功能显著加快了编码速度，减少了在编写代码时的思考时间。减少 bug 率：通过实时的错误检测和智能重构，Cursor 能够及时捕捉拼写和语法错误，提升代码的质量和可靠性。攻克疑难问题：对于复杂困难的编码问题，Cursor 能够提供一下解决问题灵感，协助快速实现问题，解决疑难杂症。提升学习效果：Cursor 提供的即时反馈和解释功能，有助于理解编程概念和最佳实践，加速学习过程。
2025-04-21 10:42:18
2206
原创 如何编写单元测试
关于断言方法有很多，这里仅摘出常用方法，如果你想了解更多，你可以去 Jest 官网 API (https://www.jestjs.cn/docs/expect) 部分查看。但是需要注意的是：我们必须使用一个函数将被测试的函数做一个包装，正如下面 getIntArrayWrapFn 所做的那样，否则会因为函数抛出错误导致该断言失败。不支持 async await 导致的，这时候就需要对 babel 配置进行增强，可以安装。下面我们以 fetchEnv 方法作为案例，编写一套完整的单元测试用例供读者参考。
2025-04-21 10:27:18
540
原创 前端单元测试实战：如何开始？
单元测试覆盖率是一种软件测试的度量指标，指在所有功能代码中，完成了单元测试的代码所占的比例。单元测试覆盖率 = 被测代码行数 / 参测代码总行数 * 100%
2025-04-18 17:28:55
1273
原创 前端为什么需要单元测试？
对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这篇文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。
2025-04-18 17:27:18
1112
原创 使用 useRef 优化 React 性能问题
如何使用 useRef 修复 React 性能问题？通过一个实际项目中的案例应用考虑如何更好的使用 useRef 这一钩子函数？Refs 是 React 中很少会使用到的特性。如果你已经读过了官方的 React Ref Guide，你会从中了解到 Refs 被描述为重要的 React 数据流的 “逃生舱门”，需谨慎使用。Refs 被视为访问组件的基础 DOM 元素的正确方法。伴随着 React Hooks 的到来，React 团队引入了Hook，它扩展了这个功能：useRef()
2025-04-18 17:18:49
957
原创 React 开放封闭原则详解，构建可扩展的应用
开放封闭原则是面向对象编程的一个重要原则，也适用于 React 框架。通过遵循开放封闭原则，我们可以编写可扩展和可维护的 React 应用程序。组件化开发、Props 和 State 的使用、生命周期方法等技术都是 React 中实现开放封闭原则的实践。
2025-04-17 10:05:01
816
原创 React 设计艺术：如何精确拆分组件接口，实现接口隔离原则
在实际开发中，我们应该注重代码的设计和组织，提高代码的可读性和可复用性，并避免不必要的依赖关系。通过将接口拆分成较小、单一的组件，并通过组合的方式将它们组装起来，我们实现了接口的隔离。这样一来，不同的组件在使用时不会依赖不需要的功能，从而提高了代码的可维护性和可扩展性。总结起来，React 中的接口隔离原则可以通过组件的拆分和组合，或者使用 Hooks 来实现。接口隔离原则主张最小化系统组件之间的依赖关系，使它们的耦合度降低，从而提高可重用性。将功能相关的组件接口拆分成独立的组件，通过组合的方式进行组装。
2025-04-17 10:02:08
981
Android Fragment嵌套ViewPager，ViewPager嵌套多个Fragment
2016-03-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人