- 博客(19)
- 收藏
- 关注
RSS订阅原创 uniapp项目pinia使用方法，持久化插件pinia-plugin-persistedstate兼容小程序环境，解决‘localStorage‘ of undefined报错
微信小程序Pinia持久化解决方案 在微信小程序中使用pinia-plugin-persistedstate插件时，由于小程序环境缺少localStorage对象，会导致报错。解决方案如下： 问题原因：微信小程序无localStorage，而插件默认使用该API 配置方案： 自定义storage配置，改用uni-app的存储API 使用uni.setStorageSync和uni.getStorageSync替代 通过pick选项指定需要持久化的状态 项目结构优化： 使用/store/index.js统一管
2025-10-12 11:06:05
638
原创 uniapp配置自动导入uni生命周期等方法
本文介绍了在UniApp中使用Vue3时，通过配置vite.config.js实现uni-app生命周期方法自动导入的方法。主要内容包括：1）无需手动导入onLoad等uni方法，直接在script setup中使用；2）通过安装unplugin-auto-import插件实现自动导入功能；3）配置vite.config.js文件，添加uni-app和vue的自动导入配置。该方法简化了开发过程，避免了重复导入的繁琐操作，适用于UniApp+Vue3的开发场景。
2025-10-12 10:29:24
309
原创 踩坑记录：HbuilderX 配置 Prettier 插件不生效问题解决
HBuilderX恢复Prettier格式化方法：1）删除用户设置中的"defaultFomat.vue"配置项，下次格式化时重新选择Prettier；2）直接修改"defaultFomat.vue"为"formator-prettier"，强制使用Prettier。两种方法均可解决内置格式化器冲突问题，操作路径均为工具-设置-源码视图-用户设置。
2025-09-01 13:55:52
354
原创 Vue3实现炫酷的暗黑模式切换扩散动画
本文介绍了如何实现ElementPlus风格的点击扩散主题切换动画效果。通过Vue3组合式API和现代浏览器API，利用ViewTransitions API和Web Animations API实现平滑过渡。核心代码使用useDark()管理主题状态，通过document.startViewTransition触发动画，并计算以点击点为中心的圆形扩散路径。文章详细解析了实现原理，包括useDark()的响应式控制、ViewTransitions API的工作流程以及Web Animations API的动
2025-08-05 16:34:41
1038
原创 网站加载速度优化
摘要：网站性能优化需系统性分析，从网络、资源、加载策略等多维度入手。首先通过工具定位性能瓶颈，优先优化服务器带宽、浏览器缓存和HTTP协议。关键措施包括：压缩媒体与代码资源、启用延迟加载与预加载、合并请求等。优化应贯穿开发、部署、运营全周期，持续监控迭代，而非依赖单一CDN解决方案。特别强调移动端环境下，加载速度对用户体验和转化率的直接影响。
2025-08-05 14:48:56
448
原创 HbuilderX自定义主题-仿VSCode现代深色Default Dark Modem
本文介绍了如何将HBuilderX编辑器主题修改为仿VSCode现代深色Default Dark Modem。具体步骤包括：1）切换HBuilderX主题为Monokai；2）通过源码视图修改setting.json配置文件，添加详细的颜色自定义设置；3）合并或备份原有配置以避免数据丢失。配置内容包含编辑器背景、文本、侧边栏、状态栏等元素的深色配色方案，以及语法高亮规则。最后提供了修改前后的界面效果对比，展示了与VSCode类似的黑灰色主题风格。该配置适合喜欢深色主题的开发者，能有效降低视觉疲劳。
2025-08-05 14:35:50
910
原创 高度设置100vh时，移动端浏览器显示超出100vh出现滚动条
移动端开发中，100vh单位因浏览器UI控件（地址栏等）导致高度计算不准确，影响页面布局和体验。解决方案是通过JavaScript动态获取window.innerHeight计算真实视口高度，并转换为CSS变量(--vh)使用。Vue3示例展示了如何监听resize事件实时更新变量值，以及在样式中使用这些变量替代vh单位。该方法能有效解决移动端视口高度计算问题，确保页面布局适配各种移动设备场景。
2025-07-18 13:21:07
375
原创 开发配置vite启用https、生成自签名SSL证书
前端开发中，某些场景（如调试摄像头、连接线上服务器）必须使用HTTPS。Windows下可通过OpenSSL生成自签名证书：安装OpenSSL后，执行命令生成私钥(.key)和证书(.crt)，注意CN必须填"localhost"。最后在Vite配置中引用证书文件即可启用HTTPS服务。该方案解决了本地开发时的HTTPS需求问题。
2025-07-18 13:12:35
798
原创 Proxy 与双向绑定 学习笔记
摘要： JavaScript的Proxy是ES6引入的元编程特性，用于创建对象代理并自定义基本操作的行为。通过Proxy可以拦截13种常见操作，如属性读取、赋值、函数调用等。本文演示了Proxy的基本用法，包括创建代理对象和实现简单数据劫持。重点介绍了如何利用Proxy模仿Vue3响应式系统，通过reactive()函数创建响应式对象，结合effect()函数实现依赖收集和自动更新机制。该方法通过记录属性访问和触发回调来实现数据到视图的双向绑定，展示了前端框架响应式实现的核心原理。
2025-07-01 12:38:15
423
原创 electron-vite中单独管理renderer依赖的实践方案（支持快速迁移原有Vite项目）
electron-vite 单独管理 renderer 依赖，指的是在 electron-vite 项目中的根目录和 renderer 目录下分别管理两套依赖，即根目录和 renderer 目录下分别都有一个 node_modules。
2025-06-30 00:20:33
481
原创 Jenkins前端项目自动化部署配置（git拉代码、npm装依赖打包、上传部署服务器一条龙）
本文介绍了Jenkins在Windows上的安装配置及自动化部署流程。主要内容包括：通过Gitee拉取代码；构建步骤配置npm命令；使用PublishOverSSH插件部署到服务器；以及常用操作命令如重启服务。修改插件安装源为清华镜像；可选修改默认8080端口等；重点讲解了SSH部署的详细配置方法，包括远程目录设置和文件传输路径拼接规则。
2025-06-29 11:38:39
1813
2
原创 纯CSS实现圆形旋转渐变加载动画
本文介绍了一个纯CSS实现的圆形旋转加载动画。通过两个渐变半圆形块和居中遮罩的组合，配合@keyframes旋转动画，创建出简洁优雅的加载效果。关键代码包括.loading-box容器、.loading-top/.loading-bottom半圆形渐变块和.mark内圈遮罩，无需第三方库即可实现持续转圈动画。这种轻量级方案适合日常项目开发，能有效提升用户体验。
2025-05-10 00:42:35
508
原创 uniapp开发:微信小程序和JS的ArrayBuffer差异导致crypto-js库计算md5错误
摘要：本文记录了在获取图片文件MD5值时遇到的浏览器与微信小程序兼容性问题。小程序端由于ArrayBuffer原型对象与JS标准不一致，导致CryptoJS生成的MD5值错误。通过对比发现两端的ArrayBuffer原型虽然看似相同，但实际类型不同。最终通过Object.setPrototypeOf(item.result, ArrayBuffer.prototype)手动修正小程序的原型对象，使MD5计算恢复正常。问题揭示了不同环境下ArrayBuffer实现的差异，需特别注意原型链检测。
2024-12-13 00:28:54
958
原创 unicloud在云对象中使用JQL语法
unicloud在云对象中使用JQL语法，直接使用JQL会报错 te: code: 100104, error: cannot transform type string to a BSON Docume...
2024-10-02 23:44:25
1219
2
原创 CSS弹性盒子(display:flex)详解与使用技巧
弹性盒模型（Flexbox）是W3C提出的现代布局方案，通过display:flex开启后，子元素沿主轴（默认水平）和侧轴（默认垂直）排列。提供flex-direction、justify-content等属性控制对齐方式，开发者可通过浏览器调试工具实时调整参数并复制代码。但在微信小程序等环境中需手动记忆属性。子项支持flex-grow、align-self等个性化设置，简写属性flex可快速定义伸缩行为。该模型简化了复杂布局的实现，但需注意环境兼容性。
2024-10-01 14:17:36
1178
1
原创 uniCloud.uploadFile上传到自定义目录
官方的 uni-file-picker 组件默认会把上传的文件全部上传到unicloud云存储的根目录下，这样太乱了，但是在文档中没有找的修改上传路径的办法（不知道是不能改还是我没找到）经过查阅发现，使用 uni.uploadFile() API，可以将文件上传到unicloud云存储空间的指定目录下。只需配置 cloudPath 属性为 目录名/文件名 即可。
2024-09-27 12:04:57
906
原创 npx 是什么？——深入理解及常见用法整理
npx是npm内置的工具（5.2+版本），用于便捷执行npm包命令而无需全局安装。其优势包括：1）即时运行远程/本地模块（如npx create-react-app）；2）避免全局安装污染；3）自动检查最新版本并临时缓存到.npm/_npx目录；4）支持指定版本（如npx eslint@7.32.0）。典型应用场景包括创建项目脚手架、运行编译工具等，既保持环境整洁又确保使用最新依赖。通过临时下载和自动缓存机制，npx在便捷性和性能间取得平衡。
2024-09-25 15:48:34
1607
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人