- 博客(65)
- 收藏
- 关注
RSS订阅原创 uniapp 实现一个底部悬浮面板
本文介绍了微信小程序地图界面与浮动面板交互设计方案。通过三层结构布局：底层地图、中层搜索栏和悬浮按钮、顶层可滚动浮层实现半屏地图展示。核心采用scroll-view包裹透明占位区与工具面板的结构，利用CSS控制初始显示50%地图，用户滚动时面板自然上移覆盖地图。方案避免了复杂JS拖拽计算，实现了流畅的半屏到全屏切换效果，同时适配微信小程序环境并保持代码结构清晰易扩展。
2025-10-29 11:39:46
353
原创 Uni-App 页面跳转监控实战：快速定位路由问题
通过简单的函数代理，我们就能轻松实现全局路由监控。无侵入，不需要改业务代码。实时可见，能直接看到参数和调用堆栈。扩展方便，可以加日志上报、埋点统计。
2025-09-27 16:57:44
459
原创 css3的 --自定义属性, 变量
root {.card {/* 继承自 .container */2.可以在CSS变量中使用计算,比如通过calc( ) 函数来计算尺寸:root {.element {3.css变量与媒体查询结合使用CSS变量非常适合和媒体查询一起使用,能够帮助你轻松地创建响应式设计,你可以在不同的屏幕尺寸下,修改变量的值以实现不同的布局主题:root {body {:root {/* 在小屏幕下修改字体大小 */
2025-09-10 11:51:16
797
原创 Pinia 两种写法全攻略：Options 写法 vs Setup 写法
/ 第一个参数是id 第二个个参数是配置对象count: 0,}),getters: {},actions: {},},})导入使用:// 在组件里。
2025-09-09 18:51:30
309
原创 Vue + ECharts 中 Prop 数据被修改导致图表合并的问题及解决方案
在项目中,我封装了一个Echarts柱状图组件(BarChart.vue),父组件传入seriesData和xData来渲染不同的柱子,但在实际使用中,遇到了问题多次切换不同数据, 图标柱子会出现"合并残留",旧数据还在图标显示不正确。
2025-08-28 18:54:47
758
原创 Vue2 Vue父子传参使用computed属性,子组件接收参数为undefined, 问题二 子组件自定义事件传递数据,父组件直接把props或绑定对象替换掉,导致无限递归
本文分析了Vue父子组件数据传递中的两个常见问题：1) 计算属性初始化顺序导致子组件接收undefined的问题，建议在created钩子或computed中初始化数据；2) 双向绑定导致的无限循环问题，应避免直接替换对象引用，推荐通过字段级更新或浅拷贝解决。文章提供了完整的解决方案和优化后的查询组件代码，实现了安全的数据传递和更新机制。
2025-08-22 21:17:56
485
原创 Vue 项目中父子传值使用Vuex异步数据不更新问题
摘要：Vue项目中父组件传递配置数组给子组件时，若配置项引用了Vuex异步数据，会因初始化引用问题导致子组件无法获取更新后的数据。解决方案：1）推荐使用计算属性动态生成配置数组，依赖Vuex数据变化自动更新；2）通过watch监听Vuex数据变化手动更新配置项。核心问题是data()中的引用在初始化时固定，不会随Vuex更新自动刷新，计算属性方案能优雅解决此问题。
2025-08-21 20:40:51
381
原创 解决 vue2 不能使用可选链?. 和??
Vue2项目中使用可选链运算符(?. )和空值合并运算符(?? )需要配置Babel插件。安装@babel/plugin-proposal-optional-chaining和@babel/plugin-proposal-nullish-coalescing-operator依赖后，修改babel.config.js文件，在plugins数组中添加这两个插件。配置完成后需重启项目才能生效，这样就能用obj?.user?.name和name?? '默认用户名'简化代码，避免冗长的对象属性判断。生产环境还可配置
2025-08-13 10:47:10
388
原创 vue2+vue3面试题 高频 2025 (15-29) 题
这是一个抽象模式,不依赖浏览器环境,适用于服务器端渲染(SSR)或测试环境不操作浏览器URL,而是用内存记录路由状态主要用于Node.js 服务器端渲染,或者没有浏览器环境的场景。
2025-07-30 02:52:54
771
原创 js面试题 高频(12-22题)
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
2025-07-29 01:46:31
1173
原创 vue2+vue3面试题 高频 2025 (1-14) 题
Vue自定义指令其实是对原生DOM操作的封装指令钩子函数会接受到当前绑定的DOM元素el,通过操作它实现各种效果本质上,Vue在编译模版时,会解析指令,调用对应的钩子函数完成操作。
2025-07-27 10:01:57
945
原创 js面试题 高频(1-11题)
JavaScript核心概念摘要 变量声明： var函数作用域，let/const块作用域 let解决for循环闭包问题 const不可重新赋值但对象内容可变 类型系统： 7种原始类型+引用类型 typeof null返回"object"是历史遗留问题 值类型按值传递，引用类型按引用传递 对象拷贝： 浅拷贝复制第一层，深拷贝递归复制所有层级 JSON方法深拷贝有局限性（忽略函数等） 数组方法： 增删：push/pop/shift/unshift/splice 遍历：map/filter/
2025-07-23 23:19:13
1084
原创 uni-push 统一推送
是指服务器主动向客户端发送消息的技术,无需客户端持续轮询服务器,既可获得即时数据客户端应用必须实时在线;手机端耗电严重;服务器负载高且浪费资源手机的通知栏,小程序的订阅消息都是一种push,由手机操作系统或微信在底层提供了push通道,屏蔽了轮询的各种弊端,你的应用可以被关闭,只有手机有网,操作系统提供的push通道是实时在线的,提醒: web浏览器的webnotification其实是一个本地通知栏功能,浏览器厂商没有提供push通道.
2025-07-22 00:53:17
1601
原创 web前端渡一大师课 02 浏览器渲染原理
reflow 的本质就是重新计算Layout树.当进行了会影响布局树的操作后,需要重新计算布局树,会引发Layout为了避免连续的多次操作导致不拘束反复计算,浏览器会合并这些操作,当JS代码全部完成后再进行统一计算,所以,改动属性造成的reflow是异步完成的.也同样因为如此,当JS获取布局属性时,就可能造成无法获取到最新的布局信息浏览器在反复权衡下,最终决定获取属性立即reflowrepaint 的本质就是重新根据分层信息计算了绘制指令.
2025-07-19 20:05:19
956
原创 web前端渡一大师课 03 歌词滚动效果
01:20.90]凭这两眼与百臂或千手不能防。[01:28.68]贪欢一刻偏教那女儿情长埋葬。[01:41.69]凭这两眼与百臂或千手不能防。[01:49.54]贪欢一刻偏教那女儿情长埋葬。[03:05.27]凭这两眼与百臂或千手不能防。[03:13.06]贪欢一刻偏教那女儿情长埋葬。[03:26.21]凭这两眼与百臂或千手不能防。[03:33.92]贪欢一刻偏教那女儿情长埋葬。[03:47.04]凭这两眼与百臂或千手不能防。[04:07.90]凭这两眼与百臂或千手不能防。
2025-07-18 01:31:40
880
原创 web前端渡一大师课 01 事件循环
浏览器采用多进程多线程模型保障稳定性，其中渲染主线程负责执行HTML/CSS/JS代码。由于需要处理解析、渲染、交互等多种任务，主线程采用事件循环机制调度任务：通过消息队列实现异步处理，避免阻塞。当遇到计时器、网络请求等异步操作时，主线程将任务交由其他线程处理，完成后回调加入队列等待执行。JS的单线程特性决定了同步代码会阻碍渲染，如死循环会导致页面冻结。任务优先级方面，微队列（如Promise）优先级最高，其次是交互队列和延时队列。定时器因系统偏差和事件循环机制无法实现精确计时。理解事件循环机制是掌握JS异
2025-07-15 16:05:16
1617
原创 css 面试题
主轴方向由flex-direction控制(默认row,水平从左到右)交叉轴始终垂直于主轴,用于控制垂直对齐当你使用某些CSS属性(如transform,filtter,opacity等)时,浏览器会将这些元素提升到一个单独的合成层,这意味着这些元素的渲染不会影响其他部分的渲染,从而提高性能GPU加速: 合成层使用GPU来加速渲染,提高动画流畅性和页面交互速度合成与重排: 合成层可以减少重排和重绘;
2025-07-08 15:29:16
1112
原创 深入理解CSS中的BFC 与IFC , 布局的两大基础概念
本文介绍了CSS布局中的两个重要概念：BFC（块级格式化上下文）和IFC（行内格式化上下文）。BFC是独立布局环境，影响块级元素垂直排列，可解决浮动导致的高度塌陷和外边距合并问题，通过设置overflow、float、position等属性触发。IFC控制行内元素水平排列，处理文本对齐和换行行为，由display:inline或inline-block等触发。文章通过实例展示了BFC清除浮动、防止外边距合并，以及IFC实现行内元素对齐和图文混排的应用场景，比较了两者的区别，帮助开发者更好地控制页面布局。
2025-07-03 15:58:43
831
原创 CSS外边距合并（塌陷）全解析：原理、场景与解决方案
CSS外边距合并的三大场景及解决方案：1.相邻元素、父子元素和空元素的外边距合并现象；2.5种主流解决方案：BFC隔离（推荐flow-root）、物理隔离（padding/border）、Flex/Grid布局、行内块和伪元素法；3.方案选择指南：现代项目首选flow-root，兼容需求用overflow:hidden，响应式布局推荐Flex/Grid。文章详细说明了每种方案的优缺点和适用场景，帮助开发者精准解决布局问题。
2025-07-02 20:05:47
487
原创 uniapp 中使用路由导航守卫,进行登录鉴权
Uniapp登录路由守卫实现方案摘要 本文介绍了两种Uniapp登录状态路由守卫实现方案。方案一使用第三方插件(hh-router-guard或uni-simple-route)，方案二通过uni.addInterceptor实现。重点讲解了方案二的实现细节：1)配置白名单机制；2)权限校验逻辑；3)拦截器核心方法；4)初始化调用方式。该方案支持白名单动态更新，可检查token有效性，未登录用户自动跳转登录页并携带来源路径。在App.vue的onLaunch中调用initRouteGuard()即可启动全局
2025-07-01 15:43:11
646
原创 前端开发工作流: ESLInt+ Prettier+VS Code终极指南
前端团队协作中，代码质量工具链（ESLint+Prettier+VSCode插件）能有效解决三大问题：代码一致性、潜在错误检测和协作效率。ESLint侧重代码质量检查和规范执行，Prettier专注代码风格统一，两者配合使用时需用eslint-plugin-prettier解决规则冲突。VSCode插件则提供实时反馈和自动格式化功能。此外，ESLint默认规则可扩展为Airbnb、Standard等开源规范，而settings.json文件控制着编辑器的格式化行为。实际开发中，建议同时配置项目级.prett
2025-06-24 19:17:41
1026
原创 Node.js 在前端开发中的作用与 npm 的核心理解
Node.js和npm已成为前端开发的核心工具。Node.js提供开发服务器（如Vite）、构建工具（Webpack）支持，并运行自动化任务。npm作为包管理器，负责依赖安装、脚本执行和模块发布。通过package.json管理依赖，package-lock.json锁定版本。优化建议包括使用镜像源加速、nvm管理Node版本。两者共同构建了现代前端工程化体系，显著提升开发效率。
2025-06-20 20:49:59
775
原创 failed to load config from D:\Aweb\project\doorandwindow-background-newmaster\vite.config.tserror w
【摘要】在使用Vite时遇到visualizer调用错误，原因是导入方式不正确。错误提示表明visualizer未被识别为函数。解决方案是将导入方式从import visualizer from 'rollup-plugin-visualizer'改为命名导入import { visualizer } from 'rollup-plugin-visualizer'。这确保正确引用插件函数，解决配置问题。
2025-06-15 22:16:58
266
原创 Vue3 项目启动报错 Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Aweb\project\doorandwindow-background
项目加载vite.config.ts时出现ESM与CommonJS不兼容问题，原因是package-manager-detector作为ESM模块被CommonJS代码require()调用。解决方案是在package.json中添加"type":"module"字段，并确保脚本配置正确。这样明确指定项目使用ESM模块系统，可避免模块加载冲突。
2025-06-15 22:12:04
1519
1
原创 Web 前端性能优化全景指南与实战策略
*fn: 要被防抖的函数delay: 延迟时间(默认300毫秒)*///返回一个新函数,这个函数才是真正绑定事件用的函数//清除上一个定时器//延迟后执行//执行目标函数fn, this保持原来的调用上下文,args把刚才传入的新函数的参数传进去},delay);//用法console.log('🔍 正在搜索：', keyword);// 每次输入触发，都传入当前输入框的内容});
2025-06-09 14:22:11
1129
原创 Web前端为什么要打包？Webpack 和 Vite 如何助力现代开发？
功能强大,插件和Loader丰富,几乎支持所有资源类型转换适合大型项目,构建过程复杂但灵活生产环境自动开启代码压缩,拆分,缓存策略通过webpack.config.js配置规则打包是现代前端必不可少的流程,帮助我们解决模块化,性能和兼容性问题Webpack更强大灵活,配置复杂,适合大型项目Vite轻量便捷,极大提高开发效率,适合新项目快速上手了解打包原理,能帮你写出更高性能,更易维护的代码结合项目需求,合理配置压缩,拆分和缓存策略,确保用户体验。
2025-06-03 17:18:00
1505
原创 Git Commit 提交规范指南 - Web前端开发者必备
部分说明示例类型提交的类别（等）featfix作用域影响的范围（可选）(login)描述简明扼要的说明实现用户登录功能正文详细说明（可选）用列出关键改动脚注关联Issue或重大变更（可选）这样的提交信息:清晰可读,团队协作更搞笑便于检索, git log -- grep="feat(login)"可快速找到登录相关功能可自动化,方便生成CHANGELOG.md。
2025-05-29 16:41:37
1418
原创 理解 Vue 2 的响应式原理：数据劫持与依赖收集的背后
数据被修改,setter调用dep.notify( ),触发所有依赖watcher执行update( )watcher执行视图更新,组件自动刷新。
2025-05-28 11:31:29
1104
原创 JavaScript对象继承
/ 子类通过原型链继承父类为了解决原型包含引用值导致的继承问题,一种叫作"盗用构造函数"的技术在开发社区流行起来(这种技术有时也称作"对象伪装"或"经典继承"). 基本思路很简单: 在子类构造函数中调用父类的构造函数 , 因为毕竟函数就是特定上下文中执行代码的简单对象,所以可以使用apply( )和call( )方法以新创建的对象为上下文执行构造函数,来看下面的例子://父类//子类//继承SuperType。
2025-05-23 14:41:23
1220
原创 UniApp开发各种项目的区别详解(H5,App(5+app), ,Web2app,小程序)等
Uniapp 是一个使用Vue.js开发所有前端应用的框架,支持编译到App,H5,微信小程序,支付宝小程序等多个平台,虽然号称一套代码多端运行,但不同平台在实现机制,API支持,能力边界等方面仍有较大差异,本文将结合H5,App(5+App),Web2App,小程序等场景,深入分析UniApp开发各种项目时的区别于注意事项。
2025-05-16 15:03:39
2396
原创 js对象原型,原型链
无论何时,只要创建一个函数,就会按照特定的规则为这个函数创建一个prototype属性(指向原型对象),默认情况下,所有原型对象自动获得一个名为construcor的属性,指回与之关联的构造函数,对前面的例子而言,Person.prototype.constructor指向Person 然后,因构造函数而异,可能会给原型对象添加其他属性和方法。
2025-05-14 17:07:01
867
原创 深入理解 JavaScript 对象与属性控制
Object.defineProperties() 通过多个描述符一次性定义多个属性, 接受两个参数: 要为之添加或修改属性的对象和另一个描述符对象,其属性要与添加或修改的属性意义对应,比如:year_:{},editon:{value:1},year:{},})//2017//false//undefined 数据属性没有get.get//false//false。
2025-05-09 14:45:46
1000
原创 Vue 虚拟DOM和DIff算法
Vue通过虚拟DOM和Diff算法,极大地优化了性能,当数据发生变化时,Vue会生成新的虚拟DOM,通过DIff算法与旧的虚拟DOM树对比,最终只更新有变化的部分,从而减少了直接操作真实DOM的次数,提升了页面的响应速度,结合合理的性能优化策略,可以让Vue在大规模应用中也能保持高效的性能。
2025-05-04 17:00:01
695
原创 从 HTTP/0.9 到 HTTP/3：Web 前端开发者必须了解的协议进化史
浏览器处于安全考虑,限制了网页向不同源发送请求简单说就是:一个网页只能请求自己域名下的资源,想去请求别人的,就要遵守规则比如你的网站是: https: //www.a.com你想用ajax请求:这就算跨域了!
2025-04-28 10:24:14
871
原创 【前端基础】Cookie、sessionStorage 和 localStorage 详解及应用场景分析
Cookie是一种由服务器发送到浏览器的小型文本数据,也可以通过js创建,用于在客户端存储信息,并在后续请求中自动携带这些信息sessionStorage是H5提供的一种本地存储方式,用于在当前会话(标签页)期间存储数据,浏览器关闭或刷新后数据失效localStorage同样是H5引入的本地存储机制,数据存储后会长期保存在本地浏览器中,除非被手动清除。
2025-04-28 09:49:55
1164
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人