<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[江拥羡橙的博客]]></title><description><![CDATA[不积跬步，无以至千里；不积小流，无以成江海。]]></description><link>https://blog.youkuaiyun.com/qq_37215621</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_37215621]]></copyright><item><title><![CDATA[在不可靠 aspect-ratio环境下，用 CSS 变量 + JS 保证图片稳定显示]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/158573103</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/158573103</guid><author>qq_37215621</author><pubDate>Sun, 05 Apr 2026 22:24:05 +0800</pubDate><description><![CDATA[在复杂的移动端 WebView 环境下，单纯依赖往往不够稳定。在 JS 中统一计算关键容器高度用style或把结果写成 CSS 变量在 Less / CSS 中复用这个变量，按业务需要的宽高比（如 10:18）计算宽高这种“JS 负责算数，CSS 负责表现”的分层方式，既保证了布局的稳定性，又保留了业务逻辑的灵活性，非常适合对比例要求高、受屏幕和系统差异影响大的展示场景。如需进一步调整（如隐藏比例系数、改用伪代码表示计算逻辑），请随时告知。]]></description><category></category></item><item><title><![CDATA[跨页面一次性状态传递中的 localStorage 时序问题排查与解决]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/159158261</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/159158261</guid><author>qq_37215621</author><pubDate>Sun, 05 Apr 2026 22:11:16 +0800</pubDate><description><![CDATA[同步 API 在特定运行时环境下表现得不够同步」+「页面可见性事件在老环境中的表现不稳定」的组合问题。给写入一点时间：写完不立即返回，或者写完读回校验。读取时允许短重试：可见时多读几次，消除短暂的可见性延迟。用更底层的事件兜底可见性pageshowpagehide组合，而不是单依赖高层封装。按照上述方式改造后，在老 iOS 机型上，“从子页面返回后偶发不执行自动操作”的问题会大幅缓解，日志中“存的值和取到的值不一致”的情况也会显著减少。]]></description><category></category></item><item><title><![CDATA[小米机型蒙层元素异常挤压变形问题解决]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/159643801</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/159643801</guid><author>qq_37215621</author><pubDate>Sun, 05 Apr 2026 22:04:37 +0800</pubDate><description><![CDATA[不要把“视觉透明”和“渲染无影响”等同透明背景仍可能触发额外的合成层，带来意想不到的副作用。多重z-index叠层动画 / 过渡动态 viewport（地址栏变化、半屏弹窗、系统 UI 动画）去掉上层透明背景声明减少!important强覆盖降低滤镜层复杂度（必要时降级）样式策略建议“内容层”尽量只负责内容，不额外声明无意义的背景将 blur / 遮罩职责集中在单一层，避免跨层竞争。]]></description><category></category></item><item><title><![CDATA[移除 Swipeable：根治老安卓 WebView 的渲染闪烁]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/159644231</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/159644231</guid><author>qq_37215621</author><pubDate>Sun, 05 Apr 2026 21:57:21 +0800</pubDate><description><![CDATA[移动端H5嵌套Tabs性能优化实践 在老版本安卓WebView(Android 11及以下)中，嵌套Tabs+左右滑动切换+大量图片网格的组合会导致严重的性能问题，表现为切换时页面闪烁、白屏和卡顿。经过多种优化尝试后，最终发现将内层Tabs的滑动切换功能改为纯点击切换是最有效的解决方案。这一改动虽然牺牲了滑动交互，但彻底消除了连续滑动带来的渲染压力，显著提升了老设备上的用户体验。文章详细分析了问题根因，总结了WebView渲染机制与优化边界，强调在性能受限环境下，适当降级交互比堆砌优化手段更为有效。]]></description><category></category></item><item><title><![CDATA[深入解析 iOS 上 fixed 底栏与滚动容器的手势冲突：从 H5 修复到原生根治]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/159647195</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/159647195</guid><author>qq_37215621</author><pubDate>Mon, 30 Mar 2026 17:18:04 +0800</pubDate><description><![CDATA[iOS 上 fixed 底栏与内部滚动容器的手势冲突，本质上是 iOS 触摸事件分发机制与滚动视图架构共同作用的结果。当 H5 采用固定定位来消除橡皮筋效果时，这种冲突尤为明显。通过原生层关闭 WebView 的 overscroll 效果（），可以从根源上缓解手势竞争，恢复流畅的滚动体验。对于前端开发者而言，理解这一机制有助于在遇到类似问题时，快速定位是布局问题还是系统行为，从而选择最优的解决路径。如果是混合开发项目，不妨与客户端同事沟通，将原生配置作为备选方案，以最小的改动获得最佳的用户体验。]]></description><category></category></item><item><title><![CDATA[别再让 100vh 坑你的底部按钮：“跳动”“闪一下”问题的排查与根治]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/159647010</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/159647010</guid><author>qq_37215621</author><pubDate>Mon, 30 Mar 2026 17:13:20 +0800</pubDate><description><![CDATA[通过这次排查，我们认识到：移动端 WebView 中的100vh并非我们想象的那样稳定，它会受到原生界面元素、系统弹窗等多种因素影响，产生临时中间态，进而引发依赖它的元素布局抖动。而使用 JavaScript 获取并写入 CSS 变量，能够将高度“固化”为一个像素常量，从根本上避免了因视口动态变化导致的重排。这个方案简单、兼容性好，且无需侵入复杂的或等 hack。如果你也遇到了底部按钮或全屏容器的“跳动、闪一下”问题，不妨试试用替代100vh，相信会收到立竿见影的效果。]]></description><category></category></item><item><title><![CDATA[2026年，HarmonyOS认证学习及考试]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/158575252</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/158575252</guid><author>qq_37215621</author><pubDate>Mon, 02 Mar 2026 14:09:20 +0800</pubDate><description><![CDATA[华为推出HarmonyOS应用开发者认证考试，分为基础认证和高级认证。基础认证要求掌握DevEco Studio、ArkTS等开发工具，高级认证需具备端云一体化开发等进阶能力。考试需实名认证，每月3次机会，80分合格。认证通过后可在&quot;我的学堂&quot;查看证书。提供真题解析资源帮助备考。]]></description><category></category></item><item><title><![CDATA[vscode使用windsurf获取token]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/156155226</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/156155226</guid><author>qq_37215621</author><pubDate>Sat, 17 Jan 2026 20:19:38 +0800</pubDate><description><![CDATA[https://windsurf.com/show-auth-token]]></description><category></category></item><item><title><![CDATA[css实现拼图样式，响应不同屏幕宽度]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/153835590</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/153835590</guid><author>qq_37215621</author><pubDate>Fri, 24 Oct 2025 17:26:37 +0800</pubDate><description><![CDATA[Vue响应式拼图布局实现 该代码实现了一个响应式拼图布局，通过Less变量和Vue的模板条件渲染实现。核心特点包括： 动态尺寸计算：基于视口宽度自动计算小图和大图的尺寸，保持1.46的宽高比 复杂布局逻辑：使用浮动和绝对定位实现拼图效果 条件渲染：根据图片索引(index)应用不同的布局样式 响应式设计：适配不同屏幕尺寸，元素间距自动调整 Less预处理器的变量计算功能是关键，通过定义基准尺寸(@--item-small-width)推导出其他元素的尺寸，实现布局的联动响应。]]></description><category></category></item><item><title><![CDATA[TypeScript封装工具函数：从图片中提取主色调和平均色调]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/153817971</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/153817971</guid><author>qq_37215621</author><pubDate>Fri, 24 Oct 2025 11:37:03 +0800</pubDate><description><![CDATA[提取主色调(getDominantColor)和平均色调(getAverageColor)。通过Canvas API获取图片像素数据，主色调算法统计颜色频率，平均色调计算RGB平均值，均跳过透明像素。代码包含RGB转十六进制的辅助函数rgbToHex。使用时需注意跨域问题，并建议对图片进行适当缩放以提高性能。适用于需要获取图片主题色或整体色调的场景。]]></description><category></category></item><item><title><![CDATA[laya报错：GET http://xxx/bin/%22%22 404（Not Found）]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/153066489</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/153066489</guid><author>qq_37215621</author><pubDate>Wed, 15 Oct 2025 21:10:23 +0800</pubDate><description><![CDATA[本文解决了UI组件因空字符串导致图片报错的问题。当hScrollBarSkin属性被设置为空字符串时，系统尝试获取不存在的图片资源，产生404错误。解决方案是直接删除该属性的空字符串赋值，或在TypeScript代码中将UI元素的hScrollBarSkin属性置空（this.list.hScrollBarSkin = &quot;&quot;），这样既消除了报错，又保持了左右滑动的功能效果。问题根源在于错误的空字符串图片路径设置。]]></description><category></category></item><item><title><![CDATA[Vue和React怎么选？全面比对]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152668471</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152668471</guid><author>qq_37215621</author><pubDate>Tue, 07 Oct 2025 22:58:43 +0800</pubDate><description><![CDATA[Vue和React的核心差异对比：Vue采用渐进式框架设计，提供模板语法和响应式API，学习曲线平缓；React基于JSX语法和手动状态管理，更适合复杂应用开发。性能方面，Vue精准更新组件，React依赖虚拟DOM。Vue适合快速开发和中小项目，React更适用于大型应用和跨平台需求。2025年趋势显示React下载量更高，但Vue在中文社区更友好。建议根据团队经验和项目需求选择，新手可从Vue入门，求职则优先掌握React。两者均为工业级方案，掌握核心思想更具优势。]]></description><category></category></item><item><title><![CDATA[Vue3路由跳转传参及接参]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152136705</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152136705</guid><author>qq_37215621</author><pubDate>Tue, 07 Oct 2025 16:57:51 +0800</pubDate><description><![CDATA[Vue3中Vue Router传参有三种方式：1) 路径参数（动态路由），通过冒号定义参数并在组件中用useRoute获取；2) 查询参数（Query），通过URL问号传参，适合可选参数；3) 状态参数（State），参数不暴露在URL中但刷新会丢失。路径参数适合必要标识，查询参数用于过滤条件，状态参数需配合状态管理工具持久化。示例展示了三种传参方式的定义、传递和接收方法，建议在setup语法糖中使用useRoute替代this.$route。]]></description><category></category></item><item><title><![CDATA[浏览器缓存导致代码不更新？一招解决部署后用户仍看到旧页面的问题]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152140490</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152140490</guid><author>qq_37215621</author><pubDate>Mon, 29 Sep 2025 10:08:35 +0800</pubDate><description><![CDATA[方案效果适用场景文件名哈希永久解决前端工程化项目HTTP缓存头控制精准控制需服务器权限Meta标签部分生效临时补救方案最佳实践：入口HTML禁用缓存，静态资源使用哈希文件名 + 长期缓存，达到「秒级更新」+「高性能」的平衡！]]></description><category></category></item><item><title><![CDATA[全面解决：浏览器兼容性问题]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152139843</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152139843</guid><author>qq_37215621</author><pubDate>Mon, 29 Sep 2025 10:07:43 +0800</pubDate><description><![CDATA[当网页在不同浏览器（如 Chrome、Firefox、Safari、Edge）或同一浏览器的不同版本上出现布局错乱、功能失效、样式异常等现象时，即为浏览器兼容性问题。核心原因包括：  
1. **渲染引擎差异**：如 WebKit（Safari）、Blink（Chrome）、Gecko（Firefox）  
2. **API 支持不一致**：如 ES6 语法、WebGL 等  
3. **CSS 解析偏差**：如 Flexbox、Grid 布局的实现差异  ]]></description><category></category></item><item><title><![CDATA[JavaScript异步编程：告别回调地狱，拥抱Promise async/await]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152138716</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152138716</guid><author>qq_37215621</author><pubDate>Sun, 28 Sep 2025 10:51:08 +0800</pubDate><description><![CDATA[本文对比了前端异步编程的三种方案。回调函数嵌套会导致&quot;回调地狱&quot;，代码可读性和维护性差。Promise通过链式调用解决了嵌套问题，支持扁平化代码结构和统一错误处理。而async/await作为语法糖，基于Promise实现了同步式的异步代码书写方式，配合try/catch进一步简化了错误处理流程。三种方案中，Promise和async/await在可读性、错误处理和扩展性方面都表现更优，其中async/await尤其适合需要顺序执行异步操作的场景，同时保留非阻塞特性。]]></description><category></category></item><item><title><![CDATA[React/Vue组件状态更新失效]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152140369</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152140369</guid><author>qq_37215621</author><pubDate>Sun, 28 Sep 2025 10:50:30 +0800</pubDate><description><![CDATA[Can't perform a React state update on an unmounted component (React)
Avoid mutating a prop directly (Vue)]]></description><category></category></item><item><title><![CDATA[解决：跨域请求被浏览器阻止（CORS错误）]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152137818</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152137818</guid><author>qq_37215621</author><pubDate>Sat, 27 Sep 2025 09:12:51 +0800</pubDate><description><![CDATA[CORS问题源于浏览器安全机制，但通过服务器端设置或前端代理可高效解决。服务器配置是根本，开发环境代理是临时方案。遇到类似BUG时，先检查浏览器控制台错误，再针对性处理。]]></description><category></category></item><item><title><![CDATA[CSS布局塌陷（高度自适应失效）]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152140189</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152140189</guid><author>qq_37215621</author><pubDate>Sat, 27 Sep 2025 09:08:20 +0800</pubDate><description><![CDATA[布局塌陷的核心是使父元素包含浮动子元素。优先选用伪元素清除浮动或，现代项目可用。避免滥用固定高度，保持布局弹性。]]></description><category></category></item><item><title><![CDATA[解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG]]></title><link>https://blog.youkuaiyun.com/qq_37215621/article/details/152137592</link><guid>https://blog.youkuaiyun.com/qq_37215621/article/details/152137592</guid><author>qq_37215621</author><pubDate>Fri, 26 Sep 2025 22:20:37 +0800</pubDate><description><![CDATA[在现代前端开发中，CSS Flexbox布局因其灵活性和易用性被广泛采用。然而，许多开发者会遇到一个常见BUG：Flexbox布局在旧版浏览器（如Internet Explorer 10-11）中表现不一致，导致元素错位或尺寸计算错误。本文将一步步分析问题原因，提供可靠解决方案，并附上可即查即用的代码示例。]]></description><category></category></item></channel></rss>