- 博客(551)
- 资源 (24)
- 收藏
- 关注

原创 前端开发【插件】dayjs 基本使用详解【日期】
Day.js 是一个非常简洁而强大的日期库,适合用于各种前端开发中的日期处理需求。格式化日期解析日期进行日期运算(加减)比较日期获取日期的具体信息(年、月、日等)在实际项目中,常见的应用场景包括日期选择、任务管理、事件计时、时区处理等。
2025-01-14 14:16:59
1438

原创 前端开发【插件】number-precision 基本使用详解【数字】
提供了一个简洁且高效的方式来处理 JavaScript 中常见的浮动点数精度问题。通过使用其提供的精确加法、减法、乘法、除法、四舍五入等功能,可以有效避免计算中的精度误差。在实际项目中,尤其是涉及金融、商品定价等领域时,使用这个库能够确保计算的准确性。
2025-01-06 10:12:35
1816

原创 前端开发【插件】moment 基本使用详解【日期】
moment.js提供了许多功能强大的日期处理和格式化工具,它能帮助你在前端开发中轻松处理时间和日期。尽管它的更新已停止,但在很多项目中仍然被广泛使用。对于新项目,建议考虑使用date-fns或luxon等更现代的库。但如果你正在处理现有的项目并需要日期处理,moment.js依然是一个很好的选择。
2025-01-06 09:52:32
1968
原创 使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
本文介绍了一个基于Vant UI的Vue2图片上传组件实现方案。该组件封装了图片上传、预览和删除功能,支持最多9张图片上传,并提供了自定义样式和交互逻辑。 关键实现包括: 使用Vant Uploader组件,配置最大上传数量、预览尺寸等参数 自定义上传按钮样式,模拟截图中的视觉效果 实现上传回调(handleAfterRead)和删除回调(handleBeforeDelete)方法 优化预览图片和删除按钮的样式布局 组件已封装为独立模块ImageUploader.vue,可直接在Vue2项目中复用。同时提供
2025-06-10 19:59:07
916
原创 在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app中Web-view与Vue页面通讯主要通过双向消息传递实现:Web-view可加载本地或远程HTML,并通过postMessage与uni-app交互;uni-app则通过webview组件的postMessage方法向H5发送消息。通讯方式包括H5主动发送事件、uni-app接收处理,以及uni-app调用H5方法。还可通过JSBridge直接调用API或间接中转调用uni-app功能。该机制实现了原生与Web的高效互通,支持数据传递和功能调用,为混合开发提供了灵活解决方案。
2025-06-06 10:56:59
643
原创 uni-app+Vue3开发微信公众号时,除了JSSDK还有哪些常用的开发工具或技术?
本文介绍了使用uni-app+Vue3开发微信公众号的常用工具与技术。主要内容包括:基础框架与工具链(uView UI、Pinia、VeeValidate等)、微信生态工具(支付SDK、登录、分包)、UI与样式工具(Tailwind CSS、图标库)、性能优化(懒加载、分包、Webpack)、调试测试工具(微信开发者工具、Jest)。还涵盖了后端集成、微信公众号特有功能、第三方服务集成以及开发流程和优化建议。这些工具和技术组合可以有效提升开发效率和用户体验。
2025-06-06 10:51:27
827
原创 在uni-app+Vue3中使用JSSDK时,如何调用微信提供的原生接口?
在uni-app+Vue3项目中调用微信JSSDK原生接口的实践指南。首先需要配置开发环境并初始化JSSDK,获取微信公众号授权。核心实现包括:通过wx.config初始化SDK,在ready回调中调用接口,并处理成功/失败回调。文章推荐封装可复用的JSSDK服务模块,提供了获取签名、初始化和检查API等基础功能。最后展示了三个典型应用场景:获取用户地理位置、调用扫一扫功能以及选择/拍照功能的具体实现代码,通过Vue3的组合式API封装为可复用的逻辑。该方法实现了微信原生功能的无缝集成,同时保持了uni-a
2025-06-06 10:50:19
428
原创 uniapp + Vue3 开发微信公众号、H5时,jssdk 的使用方式详细介绍?
摘要 本文详细介绍了在uni-app + Vue3项目中集成微信JSSDK的开发流程,包括:1) 前期准备工作,如微信公众号注册与域名配置;2) 前端集成步骤,包含JSSDK引入、初始化服务封装及后端签名接口实现(Node.js示例);3) 常用功能如微信分享的实现方法。重点讲解了如何通过Promise封装初始化逻辑,确保JSSDK配置完成后执行后续操作,并提供了完整的代码示例。该方案适用于微信公众号/H5开发场景,可快速实现微信原生能力调用。
2025-06-06 10:46:29
358
原创 在uni-app中如何从Options API迁移到Composition API?
本文提供了uni-app从Options API迁移到Composition API的完整指南。首先介绍了迁移前的准备工作,包括环境升级和基础知识储备。然后详细讲解了渐进式迁移策略,建议从简单组件开始逐步过渡。文章通过代码示例对比了两种API在数据定义、方法、计算属性、监听器和生命周期钩子等方面的差异,并展示了如何使用组合函数提取复用逻辑。还介绍了<script setup>语法简化方式以及组件通信的处理方法。最后指出了一些特殊情况的处理建议,为开发者提供了一份全面的迁移路线图。
2025-06-06 10:36:38
506
原创 详细介绍uni-app中Composition API和Options API的使用方法
uni-app 中 API 使用方法对比 Options API(传统方式)通过data、methods等选项组织代码,适合简单场景,但存在逻辑分散、复用困难等问题。Composition API(Vue 3特性)使用setup函数集中管理逻辑,支持组合函数复用代码,提供更好的TS支持。uni-app集成两者生命周期,开发者可根据项目复杂度选择:小型项目用Options API更直观,大型项目用Composition API更灵活高效。响应式系统方面,推荐使用ref/reactive替代传统data,配合c
2025-06-06 10:30:57
1618
原创 uni-app 项目支持 vue 3.0 详解及版本升级方案?
uni-app 3.0 对 Vue 3.0 的支持已经相当成熟,升级后可以获得更好的性能和开发体验。对于新项目,强烈推荐使用 Vue 3.0;对于现有项目,可以根据实际情况选择渐进式升级或保持现状。升级过程中需要注意插件兼容性和 API 变化,建议在测试环境充分验证后再部署到生产环境。
2025-06-06 10:24:39
1287
原创 uni-app 如何实现选择和上传非图像、视频文件?
本文介绍了 uni-app 中实现非媒体文件选择和上传的多端适配方案。优先推荐使用 uni.chooseFile 选择文件和 uni.uploadFile 上传的通用方法,并对 App 端、H5 端和小程序端的特殊处理进行了说明。App 端可通过 plus.io.chooseFile 解决兼容性问题,H5 端可利用原生 <input type="file"> 实现更灵活的选择,小程序端需注意平台的文件类型和大小限制。文章还提供了代码示例和注意事项,帮助开发者根据不同平台特点选
2025-06-06 10:16:54
915
原创 App/uni-app 离线本地存储方案有哪些?最推荐的是哪种方案?
UniApp提供多种离线本地存储方案:1)uni.storage系列API为跨端基础方案,适合简单键值对存储;2)App端可通过plus.io文件系统存储大文件;3)SQLite数据库适合结构化大数据存储;4)H5端专属方案如IndexedDB。推荐优先使用uni.storage满足常规需求,特殊场景可结合文件系统或SQLite方案。各方案在存储容量、数据结构和跨端兼容性上各有特点,开发者应根据实际场景选择。
2025-06-06 10:14:36
871
原创 如何通过git命令查看项目连接的仓库地址?
摘要:使用Git查看项目仓库地址的几种方法: git remote -v查看所有远程仓库地址 git remote get-url origin查看指定仓库地址 git config --list检索配置文件中的URL 直接查看.git/config文件 git config --get remote.origin.url显示克隆时的原始URL 注意事项包括:多个远程仓库会同时显示,URL可能为SSH或HTTPS格式,纯本地项目可能无返回结果。这些命令能快速定位项目关联的Git仓库地址。(149字)
2025-06-06 09:57:40
329
原创 uniapp 开发企业微信小程序,如何区别生产环境和测试环境?来处理不同的服务请求
在 uniapp 开发企业微信小程序时,区分生产环境和测试环境是常见需求。以下是几种可靠的方法,帮助你根据环境处理不同的服务请求:使用 uniapp 的 条件编译 语法,在代码中标记不同环境的配置。2. 创建配置文件3. 在请求中使用配置二、使用自定义环境变量(更灵活)在 中定义不同环境的启动命令。2. 创建环境配置文件3. 在请求拦截器中使用三、企业微信特有的环境区分利用企业微信的 AgentId 或 企业ID 区分环境。四、通过 URL 参数区分(适合开发调试)在开发时,通
2025-06-03 12:01:20
791
原创 exchart 柱状图如何设置柱子上面显示具体的数值?
本文详细介绍了在ECharts柱状图中设置顶部数值标签的方法。首先通过配置series中的label属性显示数值,包括基础设置、自定义格式(如添加单位)和样式调整(如字体、颜色)。针对水平柱状图或堆叠图表等特殊场景提供了适配方案,并给出完整示例代码。通过灵活调整position等参数,可以实现数值标签的多样化展示。
2025-05-30 08:59:48
318
原创 React与Vue的内置指令对比
React 与 Vue 在内置指令的设计理念和实现方式上有显著差异。Vue 提供了一套丰富的模板指令系统,而 React 更倾向于通过原生 JavaScript 语法和 JSX 实现类似功能。以下是两者的核心对比:一、条件渲染Vue使用“v-if”/“v-else” 指令,通过 DOM 增删实现条件渲染:显示内容备选内容。
2025-05-29 13:11:40
801
原创 uniapp 开发企业微信小程序时,如何在当前页面真正销毁前或者关闭小程序前调用一个api接口
摘要:在UniApp开发企业微信小程序时,可通过组合页面级onUnload和应用级onHide生命周期实现销毁前的API调用。核心方案包括:1)页面卸载时在onUnload中发起异步请求;2)应用退后台时通过onHide处理全局关闭事件。关键注意事项:使用async/await确保请求执行,设置超时防止阻塞,通过环境判断适配企业微信,并注意生命周期触发顺序(先onUnload后onHide)。建议采用双保险策略覆盖不同场景,并在真机测试验证可行性。(150字)
2025-05-29 11:02:23
1247
原创 vue-next-admin 开源项目,npm install之后,npm run dev 报SyntaxError: Unexpected token u in JSON at position0
你在运行“npm run dev” 时遇到的“SyntaxError: Unexpected token u in JSON at position 0” 错误,通常是由于代码中尝试解析非 JSON 格式的字符串或未定义(“undefined”)值导致的。结合 vue-next-admin 项目的特性和你的操作场景,以下是可能的原因及解决方案:一、主要原因分析。
2025-05-29 08:21:40
652
原创 uniapp 如何调用企业微信中 wx.qy.login 获取code 完整的代码示例,
在 UniApp 中调用企业微信的“wx.qy.login” 接口获取“code”,需要结合 企业微信环境判断 和 条件编译 实现。以下是完整的代码示例及流程解析:一、代码示例// App.vue// 判断是否在企业微信环境二、关键步骤说明通过。
2025-05-29 08:14:40
448
原创 uniapp开发企业微信小程序时 wx.qy.login 在uniapp中使用的时候,需要导包吗?
在 UniApp 中使用“wx.qy.login” 不需要手动导包,但需要满足以下条件:一、环境要求与配置。
2025-05-29 08:10:48
922
原创 There is a chart instance already initialized on the dom. 柱状图初始化时报前面这个错误如何解决?
柱状图初始化时出现"已有图表实例"错误,主要原因是重复初始化同一DOM元素。解决方法包括:检查并销毁旧实例(使用dispose()方法)、确保DOM元素唯一性、避免重复执行初始化代码、利用图表库的更新机制、在框架生命周期中正确管理实例(如Vue的beforeUnmount钩子)。核心流程:获取DOM→检查旧实例→销毁旧实例→重新初始化。不同图表库(如ECharts)实现细节可能略有差异。
2025-05-28 20:19:18
616
原创 如何把示例数据0.617、0.229、0.174保留两位小数,并在后面添加%处理,处理后的结果如下:61.7%、22.9%、17.4%
本文介绍了一个JavaScript函数formatNumberToPercentage,用于将数值自动转换为百分比格式,并根据小数位数智能保留1-2位小数。函数先将输入值乘以100转换为百分比基数,然后通过字符串分析判断小数位数:若原始值有2位及以上小数则保留2位,否则保留1位,同时去除末尾无效的零(如61.70%转为61.7%)。函数兼容字符串和数值输入,提供了包括0.2034→20.34%、0.5→50%等测试用例,确保输出符合预期格式要求。
2025-05-28 17:47:32
272
原创 vue 如何对 div 标签 设置assets内本地背景图片
在 Vue 项目中为 <div> 添加本地背景图片时,可通过 Webpack/Vite 处理路径引用。推荐两种方法:1)使用内联样式绑定,通过 require() 或 import 引入图片;2)在 CSS 中直接引用,需确保路径正确(可用 @ 别名指向 src 目录)。若图片不显示,需检查容器宽高设置和路径拼写,Vite 项目需配置 @ 别名。动态切换图片可通过方法返回不同路径实现。完整示例展示了在模板和样式中引用背景图的最佳实践。
2025-05-28 17:13:29
1142
原创 如何更好的理解 beforeEach 全局前置守卫,在处理路由跳转前触发,怎么实现常用的全局权限校验、登录状态检查的呢?
状态管理:通过 Pinia/Vuex 实现跨组件状态共享路由分层:静态路由 + 动态加载实现灵活权限分配错误边界:完善的异常处理流程(401/403/404)性能优化:路由懒加载、接口缓存、防抖处理(整合了上述所有功能的企业级模板)
2025-04-07 09:44:37
975
原创 Vue路由守卫的使用规则,你还有哪些不知道的?
Vue路由守卫通过全局、路由级、组件级的三层拦截机制,实现了从权限控制到数据预加载的全链路管理。合理运用可显著提升应用安全性(如防止未授权访问)与用户体验(如无感知数据加载)。实际开发中需结合业务复杂度选择守卫类型,并通过分层设计保持代码可维护性。
2025-04-07 09:39:48
330
原创 很长一段时间没有看Tailwind,谁知道Tailwind CSS都更新到4.0了,你了解吗?
Tailwind CSS 是一个 “Utility-First” 的 CSS 框架,它提供了一个巨大的工具类集合,每个工具类都是一个单一的功能。例如:设置背景色、字体大小、边距、阴影等等。与传统的框架不同,Tailwind 并不提供预设计的组件,而是让你通过这些工具类来构建组件。
2025-03-30 21:50:26
962
原创 最近 React Scan 太火了,那么我们如何用Vue 做Scan呢?
这个 Vue Scan 项目从一个简单的扫描框和摄像头访问开始,逐步加入二维码解码的功能,并通过第三方库jsQR实现真正的扫描功能。随着项目的发展,你可以加入更多的功能和优化措施,逐步提升代码的深度和复杂性。
2025-03-30 21:43:19
425
原创 前端都有哪些设计模式?是你想的这样吗?
前端设计模式在前端开发中扮演着重要角色,尤其是随着前端技术的不断发展,越来越多的前端开发者开始采用设计模式来解决开发过程中遇到的各种问题。设计模式不仅能帮助提升代码的可维护性、可扩展性,还能让开发过程更加高效和规范化。在这篇博客中,我将详细介绍前端中常见的设计模式,帮助大家更好地理解并应用这些模式。
2025-03-30 21:39:55
389
原创 vercel开源平替,dokploy简简单单了解国内安装指南
通过 Dokploy,开发者可以拥有 Vercel 类似的自动化部署体验,同时也能够在自己的服务器上托管应用。它提供了与 GitHub 集成、Docker 容器化部署、负载均衡、HTTPS 配置等功能,非常适合希望控制部署过程和基础设施的开发者。通过上述步骤,你可以从最基础的安装使用到深度定制化应用。
2025-03-30 21:30:10
1634
原创 前端高手必备:lastIndexOf() 的 5 个企业级应用场景与性能陷阱
实现「查找数组中出现次数最多的元素」,欢迎在评论区分享你的代码!在日志分析、历史记录回溯等场景中发挥着关键作用。,带你掌握专业开发者的高阶使用技巧。作为数组逆向查找的利器,
2025-02-19 08:34:02
291
原创 前端必会:indexOf() 高效定位数组元素的 7 大实战技巧
实现一个「数组差异对比函数」,欢迎在评论区提交你的代码!作为JavaScript开发中最基础的数组方法之一,的深度掌握直接体现开发者的基本功。,带你解锁专业开发者的高阶使用姿势。
2025-02-19 08:27:20
391
原创 为什么推荐用includes()?90%程序员不知道的数组检测陷阱
判断数组是否包含指定元素是高频操作。本文将通过V8引擎源码解析、基准测试和实际案例,带你深度掌握专业级的数组检测技巧。你在项目中遇到过哪些数组检测的"坑"?
2025-02-19 08:21:11
451
原创 如何使用 `reverse()` 反转数组中的元素顺序?
reverse()是 Python 列表的一个方法,用于反转列表中的元素顺序。与sort()方法不同,reverse()不会对元素进行排序,而是按照与原来顺序相反的方式排列元素。该方法对原列表进行修改,不会返回一个新列表。reverse()是 Python 列表的一个方法,用来反转列表中的元素顺序。它会直接修改原列表,且不返回新的列表。在实际项目中,reverse()方法非常有用。例如,电商网站、图书馆管理系统等可以通过反转列表来展示最新的数据。reverse()
2025-02-19 08:13:31
680
原创 如何使用 `sort()` 对数组排序?
在 Python 中,sort()方法是列表对象的一个方法,主要用于对列表中的元素进行排序。它默认是按照升序排列,但也可以根据需求调整排序规则。sort()方法会直接修改原列表,排序是就地进行的(也就是说,排序后原列表会被修改)。sort()sort()是 Python 中列表排序的常用方法,它会修改原列表,并按升序排序。可以使用key参数对元素进行定制排序,例如按字符串长度、字典的某个字段等。通过可以实现逆序排序。在实际项目中,我们可以结合具体需求,通过sort()
2025-02-19 08:11:42
471
原创 如何使用 findIndex() 方法查找数组中的第一个匹配元素的索引?
在 JavaScript 中,方法是数组的一种内建方法,用于查找数组中符合某个条件的第一个元素的索引,并返回该索引。如果数组中没有符合条件的元素,会返回-1。这个方法非常适用于快速定位某个元素的位置,尤其是在需要根据特定条件查找元素时。callback:一个函数,用来测试每个元素,直到找到符合条件的第一个元素。该函数接受三个参数:element:当前正在处理的元素。index(可选):当前元素的索引。array(可选):调用的数组。thisArg(可选):执行回调函数时使用的this值。
2025-01-22 20:42:51
710
原创 如何使用 find() 方法查找数组中的第一个匹配元素?
在 JavaScript 中,find()方法是数组的一个非常实用的内建方法,用于查找数组中符合条件的第一个元素,并返回该元素。如果数组中没有符合条件的元素,find()会返回undefined。该方法非常适合用于从数组中快速查找符合某些条件的元素。find()callback:一个函数,用来测试每个元素,直到找出符合条件的第一个元素。该函数接受三个参数:element:当前正在处理的元素。index(可选):当前元素的索引。array(可选):调用find()的数组。thisArg。
2025-01-22 20:41:04
768
ViewDragHelper完全解析 自定义ViewGroup神器
2017-01-18
PolylineDemo.rar
2020-07-31
android 百度地图基本的使用
2017-09-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人