- 博客(57)
- 收藏
- 关注
RSS订阅原创 uni-app 踩坑实录：实现“可拖拽全局悬浮按钮”时的 movable-view 坐标失效与 Flex 布局视错觉
《微信小程序悬浮按钮开发避坑指南》总结了实现全局悬浮拖拽按钮时常见的两大坑点及解决方案。第一坑是movable-view组件初始化时X轴坐标失效问题，根源在于垂直拖动模式会锁定X轴响应，解决方案是采用v-if延迟渲染确保坐标计算完成后再初始化组件。第二坑是视觉上出现右侧间隙的"玄学"问题，实为Flex布局未填满导致，可通过flex:1或justify-content:flex-end两种CSS方案解决。文章强调遇到组件异常时要关注生命周期时机和基础布局原理，为开发者提供了实用的避坑经验。
2026-04-22 17:12:02
396
原创 【uni-app踩坑录】scroll-view时而滚不动、时而卡死？彻底解决Flex布局下的高度冲突问题
摘要： 在uni-app微信小程序开发中，遇到一个Flex布局与<scroll-view>的滚动冲突问题：页面滑动时时而失效，甚至触发橡皮筋回弹。原因在于动态内容（如富文本、瀑布流）撑大了<scroll-view>，导致其高度超出外层容器（100vh），引发原生滚动与内部滚动冲突。 解决方案：通过CSS强制约束滚动区域： 外层容器添加 overflow: hidden 禁用原生滚动； 为<scroll-view>设置 flex:1; height:0，使其高度严格由Fle
2026-04-12 20:25:09
260
原创 吐血总结！Uni-app / 微信小程序 iOS 与 Android 经典兼容性踩坑实录
跨端开发本质上是在和各个系统底层的 Webview 打交道。遇到安卓正常、iOS 异常的情况，多往Flex 规范解析差异WebKit 特有属性以及硬件渲染这三个方向思考，基本都能迎刃而解。如果这篇文章帮到了你，或者你遇到了其他奇葩的兼容性问题，欢迎在评论区留言讨论，一起抱团取暖！
2026-04-12 12:21:29
382
原创 彻底搞懂 UniApp 微信小程序最新登录授权闭环：头像昵称获取 + EventChannel 优雅路由回跳
别再执念于前端获取明文手机号：微信新规下，前端只能拿到phoneCode。直接把code扔给后端，让后端去解密并开启数据库事务一并更新用户信息，这才是最安全、数据最一致的做法。警惕的跨级谋杀：在涉及到跨页面的 EventChannel 通信时，永远不要用跨级后退去“暗杀”中间页面。老老实实退 1 层接力传递，或者改用全局uni.$emit，才能保证回调函数被安全执行。延迟回退抵消动画：在执行MapsBack前加上500ms的setTimeout。
2026-03-09 14:19:59
219
原创 UniApp 纯前端实现企业级购物车：Vuex + Storage 多用户状态管理闭环方案
📌纯前端购物车架构方案：针对轻量级电商系统中后端不提供购物车接口的场景，提出基于Vuex+本地存储的解决方案。通过动态存储Key实现多账号数据隔离（MALL_CART_DATA_${userId}），Vuex管理实时状态，Storage持久化数据。核心特点包括：1）完整商品对象存储；2）价格防篡改机制（结算时只传ID和数量）；3）生命周期管理（登录/退出时同步状态）。业务层只需简单调用Vuex方法，同时强调前端价格仅作展示，最终需后端校验真实价格和库存。该方案完美解决状态同步、数据隔离和持久化问题，适合敏
2026-03-09 14:18:22
434
原创 【前端架构实战】拒绝切 Tab 白屏！纯手写 Vue/uni-app 多标签页“零延迟缓存”列表架构
本文针对电商/资讯类小程序常见的多Tab分类列表开发痛点，提出了一套优化解决方案。传统实现存在三大问题：切换Tab需重新加载导致白屏、无法记忆滚动位置、快速切换时数据错乱。作者创新性地采用二维Map状态机架构，通过以下设计实现优化： 使用productMap和paginationMap两个字典分别存储各Tab独立的数据和分页状态 核心loadProducts函数实现三重拦截（加载中拦截、无更多数据拦截、缓存命中拦截） 采用闭包快照比对机制防止网络延迟导致的数据串台 配合Vue2的$set方法确保深层嵌套对象
2026-02-22 14:01:19
488
原创 前端架构实战】彻底终结表单重复提交！基于 Map 与闭包实现 API 级防抖与节流
这套架构最大的价值在于**“防御性编程”**。通过 API 级拦截，我们将系统最脆弱的边界（网络 I/O）保护了起来。对开发者：所见即所得，配置极简。对前端：彻底消灭“幽灵 Promise”导致的死锁 Bug。对后端：再也不用半夜起来清理被连点刷爆的脏数据表。建议每个正在重构项目的前端团队，都将这套机制纳入项目的“标准基础设施”。（完）
2026-02-20 11:20:11
547
原创 【前端架构实战】告别满屏报错！基于 Promise 队列实现跨页面 Token 无感重发与并发拦截
前端无感Token续期方案 本文提出了一种企业级前端网络请求架构，通过闭包与Promise队列实现Token过期的无感处理。核心设计采用"收费站模式"：当401错误发生时，请求被挂起而非直接跳转登录页，同时触发全局登录弹窗。用户登录成功后，所有挂起请求自动重发，保持用户操作连续性。 方案通过两个全局状态管理： isLoginModalShowing 防止重复弹窗 requestQueue 存储待重试请求 关键实现包括： 请求封装时创建可重试的闭包 统一401拦截时入队处理 登录组件回调时
2026-02-20 11:18:53
558
原创 [特殊字符] 告别“屎山”代码！Vue / uni-app 企业级前端架构与目录命名规范指北（进阶版）
本文系统介绍了Vue/uni-app项目的前端工程化规范，重点强调命名规则与架构解耦。核心要点包括：1）命名规范（组件用PascalCase，工具用camelCase，文件夹用kebab-case）；2）分包策略（主包放核心页面，业务模块放入分包）；3）组件分层（UI组件与业务组件分离）；4）逻辑复用（Vue3推荐composables）；5）状态管理按业务域划分。文章还提供了完整的项目目录结构示例，强调规范的长期价值在于提升代码可维护性和扩展性。
2026-02-18 10:03:10
794
原创 拒绝“屎山”代码！Vue2 / uni-app 企业级前端目录与文件命名规范指北
在前端开发中，一个项目的可维护性，很大程度上取决于前期的《工程化规范》。很多团队在项目初期没有定好规矩，导致后期文件命名五花八门，新员工接手时如同在看“天书”。本文总结了 Vue / uni-app 生态中业界极其成熟的**“约定俗成”**潜规则。无论你是准备搭建新项目，还是想重构老项目，只要熟练掌握这套“5大分类命名法则”，你的代码库也能像瑞士名表一样结构精密、井井有条！根目录/├── 📁 api/ (小驼峰) -> user.js, goods.js。
2026-02-18 10:00:46
469
原创 UniApp实战：如何优雅地把 uv-ui (uv-qrcode) 生成的二维码保存到手机相册
UniApp中保存uv-ui二维码到相册的完整解决方案：通过ref获取组件实例调用toTempFilePath方法，关键处理可能返回的Base64数据（需用getFileSystemManager转换为临时文件路径），再调用saveImageToPhotosAlbum保存，同时处理权限拒绝情况。H5端需特殊处理，通过创建a标签实现下载。该方案解决了Base64转换、权限引导等常见问题，提供跨平台兼容的"保姆级"实现指南。
2026-02-10 23:08:36
474
原创 抛弃 ESLint + Prettier？基于 Biome + Husky 的下一代前端工程化实践
本文介绍如何用Biome替代ESLint+Prettier搭建现代化代码规范体系。Biome基于Rust开发，集代码格式化和检查于一体，比Prettier快35倍，配置简单。通过三步配置：1)安装Biome+Husky+lint-staged；2)初始化Biome配置文件；3)设置Husky预提交钩子。核心命令biome check --apply能自动格式化代码、检查错误并优化import语句。相比传统方案，Biome更快速、配置更简单，虽然规则生态不如ESLint丰富，但对大多数开发场景已足够，是追求开
2026-01-31 23:54:00
990
原创 Nuxt.js中集成DaisyUI
#今天尝试使用Daisy时发现，因Nuxt官方的@nuxtjs/tailwindcss模块，我们不需要手动创建这些配置文件TailwindCss，因为Nuxt自动处理了Tailwind的集成##而当添加DaisyUI这样的插件时，需要添加额外的这些文件。
2025-05-28 16:42:02
402
原创 npm与pnpm--为什么推荐pnpm
通过硬链接（文件指针）指向存储仓库中的文件，避免重复下载。从 npm 迁移到 pnpm 通常是无缝的，只需删除。→ pnpm 只下载一次，两个项目共享同一份文件。可以看见 pnpm和npm几乎一样的 0成本搬迁。→ npm 会分别安装两次，占用双倍空间。，如果多个包依赖同一个库（如。，所有项目共享同一份依赖文件。例如：A 包和 B 包都依赖。项目依赖了“幽灵依赖”（未在。把依赖包全部下载到项目的。），可能会重复存储多份。声明但被直接引用）。）可能需要调整配置。
2025-05-18 10:38:53
788
原创 Nginx部署spa单页面的小bug
我遇到的最大的bug是进入后只有首页正常显示 其他页面全是404，于是问问问才知道，需要这个。没部署过，都是给后端干的，自己尝试部署了一个下午终于成功了。让进入非index的页面能返回主页执行js的路由跳转配置。
2025-04-13 20:05:03
457
1
原创 Pinia持久化插件pinia-plugin-persistedstate
如何让pinia存放的东西不丢失？你还在为页面刷新而丢失数据，多次调用接口而苦恼吗？你还在为localstore一个一个存感到繁琐吗？请使用这款pinia-plugin-oersistedstate全自动持久化插件。3，在store中启用持久化。2，在main.ts中配置。即使切换页面或刷新浏览器，
2025-04-02 20:52:56
963
原创 前端如何导入谷歌字体库
Googles Fonts下面的filters可以筛选文字，字体库同族字体会支持不同的语言，如果不确定是否支持自己想要的多语言，可以在筛选栏中打入多国语言，对照右侧字体是否正常显示即可。这里会存在所有你点击来过的字体，后续的引用也会全部引入，如果不想引入，需在此删除。#谷歌字体库内容丰富，涵盖上千种多语言支持的字体，学习导入谷歌字体库来增加网站的阅读性，是必不可少的一项技能#3，进去后 点击右上角的Get font按钮。6，然后在你的主css中定义全局字体族即可。4，点击会进入自己的字体库。
2025-04-01 17:51:05
700
原创 ReCaptcha集成人机验证教学（Vue3篇）
完全隐形，返回用户风险评分（0.0-1.0），由后端根据评分决定是否允许操作。：自动在后台触发（例如表单提交时），仅可疑流量需交互。剩下的交给后端就行了，你就复杂拿到token带给他。需无感分析流量风险（如API调用）→ v3。需要用户交互（如登录表单）→ v2。注册站点，选择版本（v2/v3）。：确保注册时填写正确的域名（如。：用户点击复选框完成验证。本文使用V2显性复选框。
2025-03-31 12:25:11
1756
原创 Pinia的安装，使用，与情景教学
本文基于Vue3和ts去实现Pinia的使用与安装，Pinia用法为组合式API，情景教学为一个基于全局的举报框的pinia逻辑#
2025-03-30 22:26:21
531
原创 Vue-admin-template安装教程
该项目环境需要node17及以下，如果npm install这一步报错可能是这个原因成功跑起来后访问端口即可如果npm install这一步初始化失败，报错python，可以去下载一个3.7以上的python，安装时务必勾选添加到路径，这样就大概率解决问题了。
2025-03-25 20:38:09
440
原创 SEO优化小总结
1，Title 属性：head中设置的标题属性，对目标关键词的重要补充，能提高搜索排名，不超过80字，关键词总数不超过五个 xx-xxx-xxx-xxx-xx，控制在三个以内。2，description：描述内容符合标题，辅助关键词排名，字符建议控制在200字符内。3，keywords：面向搜索引擎的关键词，不超过100字符，不超过五个核心关键词。
2025-03-23 16:53:06
306
原创 前端安全之DOMPurify基础使用
DOMPurify时一款专门用于防御XSS攻击的库，通过净化HTML的内容，移除恶意脚本，同时保留安全的HTML标签和数学。以下是基础使用指南，涵盖基础的安装与用法。 常常设置在表单的提交中，或者需要根据用户改变html内容的时候，净化字符串，放置隐藏恶意脚本 效果举例：3，进阶用法配置config，允许或禁止特定的标签或者属性跳过净化 自定义钩子函数在净化过程中插入自定义逻辑：4. 处理特殊场景允许 SVG 内容默认情况下，DOMPurify 会移除 SVG 中
2025-03-17 15:23:48
5696
原创 Tailwindcss开启黑夜模式
3，进入网页前，记忆用户选择的模式，在index.html中写入函数，使其在页面渲染前执行，如果localstorage已经存放了dark 代表开启暗夜模式 如果没有 则不执行。tailwindcss自带的暗夜切换会比css自带的theme主体切换来得方便很多，学习成本也很低，只要求会用tailiwndcss。1，tailwindcss.config有两种暗夜模式切换，媒体查询和手动类切换。手动控制需要开启类模式。切换后 将是否有dark类 存放在localstorage中，保持记忆性。
2025-03-15 13:52:12
556
原创 vue3实现虚拟滚动Vue-Virtual-Scroller
Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档。2，main.ts中配置导入。
2025-03-12 19:12:41
2120
1
原创 Vue-Virtual-Scroller虚拟滚动
Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档。2，main.ts中配置导入。
2025-03-12 18:58:50
1030
原创 Nginx部署spa单页面的小bug
我遇到的最大的bug是进入后只有首页正常显示 其他页面全是404，于是问问问才知道，需要这个。没部署过，都是给后端干的，自己尝试部署了一个下午终于成功了。让进入非index的页面能返回主页执行js的路由跳转配置。
2025-03-05 09:14:53
304
原创 vue-i18n国际化插件安装教程（Vue3篇）
i18n是一个国际化语言插件，意译为internationalization的缩写，代表头尾字母加上十八个字母。
2025-02-23 10:57:20
1038
原创 Ts＋Vue3＋Vite如何配置@路径
由vite创造的ts加vue3会有三个ts.json文件 因此不需要include其他路劲，4.如果报错了可能是没下Node.js的类型声明包。2，修改src下的vite-env.d.ts。3，配置vite.config。
2025-02-20 12:43:09
877
原创 vue3+ts+vite创造路由
4，在你的组件中，可以使用 <router-link> 和 <router-view> 来实现路由导航和显示。1，在 Vue 3 + TypeScript 项目中配置路由，可以使用 Vue Router 4。2，在你的项目中创建一个路由配置文件，例如 src/router/index.ts。3，在你的主应用文件中（通常是 src/main.ts），引入并使用路由。今天第一次用ts 搞了半天。
2025-02-20 12:36:12
331
原创 Vue3＋Vite创造路由
需要配注意使用 Vite 的环境变量，在 Vite 中，环境变量需要以 VITE_ 前缀命名。webpack和vite的vue-router添加路由有所不同，小编踩坑了。然后创建src/router/index.js。1，先下载vue-router。2，配置vue-router。
2025-02-19 19:04:39
454
原创 TailwindCss的vue3安装使用
在根目录的index.html引用link生成的output.css。这样就能使用tailwindcss了。在终端运行tailwind CIL。npm下载tailwindcss。npx初始化tailwind配置。
2025-02-17 09:34:23
724
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人