- 博客(281)
- 收藏
- 关注
RSS订阅
原创 VAM——小说动漫女神聚集地
vam全称是Virt-A-mate，由国外一家艺术家创作者众募网站patreon俗称红P（说实话真的厉害）的游戏制作组Meshed VR制作开发的3D游戏。这是一款现下最强的VR模拟器，集成了人物建模、关节物理、软件物理、皮肤碰撞还有画质渲染这一整套功能，角色可以通过VR控制器捕获和存储运动。你就想想电影头号玩家是什么感觉。
2024-08-09 08:14:24
24380
27
原创 从现在开始：让AI写代码，你只负责敲tab键
通义灵码可以根据你当前的代码上下文，自动补全你需要的代码，大大减少了你需要手动输入的代码量，提高了编码效率。通义灵码是一款非常实用的编码辅助工具，它能够帮助你快速解决编码中遇到的各种问题，让你的编码更加高效和愉悦。如果你是一名程序员，不妨尝试一下通义灵码，它一定会给你带来惊喜！
2024-04-25 18:36:12
1242
22
原创 webpack提升构建速度
前端项目随着时间推移和业务发展，页面可能会越来越多，或者功能和业务代码会越来越多，又或者依赖的外部类库会越来越多，这个时候原本不足为道的 webpack 构建时间消耗就会慢慢地进入我们的视野。
2023-11-12 09:05:48
2324
21
原创 CSS中calc(80vw - 100px)为什么不加空格会不生效？
运算符前后都需要保留一个空格，例如：`width: calc(100% - 100px)`； - 任何长度值都可以使用calc()函数进行计算； - calc()函数支持 "+", "-", "*", "/" 运算； - calc()函数使用标准的数学运算优先级规则；
2023-11-04 23:13:20
566
7
原创 uniapp中videojs、renderjs的使用
uniapp在APP端video层级最高，不能被其它覆盖，引入videojs实现，使用renderjs实现原生的DOM操作
2023-10-09 11:02:37
3488
原创 巧用浮动布局、解决高度塌陷实例分享
flex布局用的顺手了，会记不起用其它。其实每个属性都有使用的场景，本来想的是用flex布局和js动态判断解决的，后面用浮动3句代码就轻松解决了！
2023-07-14 07:08:56
575
14
原创 30多个小程序一键发布——miniprogram-ci
概述miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。miniprogram-ci 从 1.0.28 开始支持第三方平台开发的上传和预览，调用方式与普通开发模式无异。查看详情密钥及 IP 白名单配置使用 miniprogram-ci 前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单 开发者可选择打开 IP 白名单，
2023-07-03 12:52:10
6910
30
原创 ChatGPT微信开发，轻松拿捏
在人工智能领域，Ai已经是一个屡见不鲜的东西了，为什么这次openAi推出的chatGPT却异常的受人欢迎？其实这还得益于GPT模型。本文教程ChatGPT接入微信，小白也可轻松拿捏
2023-05-06 08:16:08
4440
23
原创 缺陷修改实践——replace函数的运用|思考？
replace函数的运用，代码设计，bug修改，replace巧妙用法，前端遇到问题解决问题，html属性，html格式富文本的替换，富文本的转义
2022-11-23 11:30:56
30396
253
原创 uniapp｜微信小程序获取当前城市名称--逆地址解析
uniapp/微信小程序获取当前城市名称逆地址解析，uniapp城市名称逆地址解析，坐标转换城市名称，坐标转换地址，地址解析，获取坐标地址信息，获取详细地址，获取地址名称，显示地址，显示地址详细地址信息，坐标逆地址解析，uni.getLocation，wx.getLocation，uniapp获取坐标，微信小程序获取坐标，小程序逆地址解析，腾讯地图逆地址解析
2022-09-07 08:00:00
16954
164
原创 在不可靠 aspect-ratio环境下，用 CSS 变量 + JS 保证图片稳定显示
在复杂的移动端 WebView 环境下，单纯依赖往往不够稳定。在 JS 中统一计算关键容器高度用style或把结果写成 CSS 变量在 Less / CSS 中复用这个变量，按业务需要的宽高比（如 10:18）计算宽高这种“JS 负责算数，CSS 负责表现”的分层方式，既保证了布局的稳定性，又保留了业务逻辑的灵活性，非常适合对比例要求高、受屏幕和系统差异影响大的展示场景。如需进一步调整（如隐藏比例系数、改用伪代码表示计算逻辑），请随时告知。
2026-04-05 22:24:05
86
原创 跨页面一次性状态传递中的 localStorage 时序问题排查与解决
同步 API 在特定运行时环境下表现得不够同步」+「页面可见性事件在老环境中的表现不稳定」的组合问题。给写入一点时间：写完不立即返回，或者写完读回校验。读取时允许短重试：可见时多读几次，消除短暂的可见性延迟。用更底层的事件兜底可见性pageshowpagehide组合，而不是单依赖高层封装。按照上述方式改造后，在老 iOS 机型上，“从子页面返回后偶发不执行自动操作”的问题会大幅缓解，日志中“存的值和取到的值不一致”的情况也会显著减少。
2026-04-05 22:11:16
210
原创 小米机型蒙层元素异常挤压变形问题解决
不要把“视觉透明”和“渲染无影响”等同透明背景仍可能触发额外的合成层，带来意想不到的副作用。多重z-index叠层动画 / 过渡动态 viewport（地址栏变化、半屏弹窗、系统 UI 动画）去掉上层透明背景声明减少!important强覆盖降低滤镜层复杂度（必要时降级）样式策略建议“内容层”尽量只负责内容，不额外声明无意义的背景将 blur / 遮罩职责集中在单一层，避免跨层竞争。
2026-04-05 22:04:37
182
原创 移除 Swipeable：根治老安卓 WebView 的渲染闪烁
移动端H5嵌套Tabs性能优化实践 在老版本安卓WebView(Android 11及以下)中，嵌套Tabs+左右滑动切换+大量图片网格的组合会导致严重的性能问题，表现为切换时页面闪烁、白屏和卡顿。经过多种优化尝试后，最终发现将内层Tabs的滑动切换功能改为纯点击切换是最有效的解决方案。这一改动虽然牺牲了滑动交互，但彻底消除了连续滑动带来的渲染压力，显著提升了老设备上的用户体验。文章详细分析了问题根因，总结了WebView渲染机制与优化边界，强调在性能受限环境下，适当降级交互比堆砌优化手段更为有效。
2026-04-05 21:57:21
100
原创 深入解析 iOS 上 fixed 底栏与滚动容器的手势冲突：从 H5 修复到原生根治
iOS 上 fixed 底栏与内部滚动容器的手势冲突，本质上是 iOS 触摸事件分发机制与滚动视图架构共同作用的结果。当 H5 采用固定定位来消除橡皮筋效果时，这种冲突尤为明显。通过原生层关闭 WebView 的 overscroll 效果（），可以从根源上缓解手势竞争，恢复流畅的滚动体验。对于前端开发者而言，理解这一机制有助于在遇到类似问题时，快速定位是布局问题还是系统行为，从而选择最优的解决路径。如果是混合开发项目，不妨与客户端同事沟通，将原生配置作为备选方案，以最小的改动获得最佳的用户体验。
2026-03-30 17:18:04
271
原创 别再让 100vh 坑你的底部按钮：“跳动”“闪一下”问题的排查与根治
通过这次排查，我们认识到：移动端 WebView 中的100vh并非我们想象的那样稳定，它会受到原生界面元素、系统弹窗等多种因素影响，产生临时中间态，进而引发依赖它的元素布局抖动。而使用 JavaScript 获取并写入 CSS 变量，能够将高度“固化”为一个像素常量，从根本上避免了因视口动态变化导致的重排。这个方案简单、兼容性好，且无需侵入复杂的或等 hack。如果你也遇到了底部按钮或全屏容器的“跳动、闪一下”问题，不妨试试用替代100vh，相信会收到立竿见影的效果。
2026-03-30 17:13:20
25
原创 2026年，HarmonyOS认证学习及考试
华为推出HarmonyOS应用开发者认证考试，分为基础认证和高级认证。基础认证要求掌握DevEco Studio、ArkTS等开发工具，高级认证需具备端云一体化开发等进阶能力。考试需实名认证，每月3次机会，80分合格。认证通过后可在"我的学堂"查看证书。提供真题解析资源帮助备考。
2026-03-02 14:09:20
1354
6
原创 css实现拼图样式，响应不同屏幕宽度
Vue响应式拼图布局实现 该代码实现了一个响应式拼图布局，通过Less变量和Vue的模板条件渲染实现。核心特点包括： 动态尺寸计算：基于视口宽度自动计算小图和大图的尺寸，保持1.46的宽高比 复杂布局逻辑：使用浮动和绝对定位实现拼图效果 条件渲染：根据图片索引(index)应用不同的布局样式 响应式设计：适配不同屏幕尺寸，元素间距自动调整 Less预处理器的变量计算功能是关键，通过定义基准尺寸(@--item-small-width)推导出其他元素的尺寸，实现布局的联动响应。
2025-10-24 17:26:37
295
7
原创 TypeScript封装工具函数：从图片中提取主色调和平均色调
提取主色调(getDominantColor)和平均色调(getAverageColor)。通过Canvas API获取图片像素数据，主色调算法统计颜色频率，平均色调计算RGB平均值，均跳过透明像素。代码包含RGB转十六进制的辅助函数rgbToHex。使用时需注意跨域问题，并建议对图片进行适当缩放以提高性能。适用于需要获取图片主题色或整体色调的场景。
2025-10-24 11:37:03
464
3
原创 laya报错：GET http://xxx/bin/%22%22 404（Not Found）
本文解决了UI组件因空字符串导致图片报错的问题。当hScrollBarSkin属性被设置为空字符串时，系统尝试获取不存在的图片资源，产生404错误。解决方案是直接删除该属性的空字符串赋值，或在TypeScript代码中将UI元素的hScrollBarSkin属性置空（this.list.hScrollBarSkin = ""），这样既消除了报错，又保持了左右滑动的功能效果。问题根源在于错误的空字符串图片路径设置。
2025-10-15 21:10:23
301
原创 Vue和React怎么选？全面比对
Vue和React的核心差异对比：Vue采用渐进式框架设计，提供模板语法和响应式API，学习曲线平缓；React基于JSX语法和手动状态管理，更适合复杂应用开发。性能方面，Vue精准更新组件，React依赖虚拟DOM。Vue适合快速开发和中小项目，React更适用于大型应用和跨平台需求。2025年趋势显示React下载量更高，但Vue在中文社区更友好。建议根据团队经验和项目需求选择，新手可从Vue入门，求职则优先掌握React。两者均为工业级方案，掌握核心思想更具优势。
2025-10-07 22:58:43
1377
1
原创 Vue3路由跳转传参及接参
Vue3中Vue Router传参有三种方式：1) 路径参数（动态路由），通过冒号定义参数并在组件中用useRoute获取；2) 查询参数（Query），通过URL问号传参，适合可选参数；3) 状态参数（State），参数不暴露在URL中但刷新会丢失。路径参数适合必要标识，查询参数用于过滤条件，状态参数需配合状态管理工具持久化。示例展示了三种传参方式的定义、传递和接收方法，建议在setup语法糖中使用useRoute替代this.$route。
2025-10-07 16:57:51
548
原创 浏览器缓存导致代码不更新？一招解决部署后用户仍看到旧页面的问题
方案效果适用场景文件名哈希永久解决前端工程化项目HTTP缓存头控制精准控制需服务器权限Meta标签部分生效临时补救方案最佳实践：入口HTML禁用缓存，静态资源使用哈希文件名 + 长期缓存，达到「秒级更新」+「高性能」的平衡！
2025-09-29 10:08:35
711
原创 全面解决：浏览器兼容性问题
当网页在不同浏览器（如 Chrome、Firefox、Safari、Edge）或同一浏览器的不同版本上出现布局错乱、功能失效、样式异常等现象时，即为浏览器兼容性问题。核心原因包括： 1. **渲染引擎差异**：如 WebKit（Safari）、Blink（Chrome）、Gecko（Firefox） 2. **API 支持不一致**：如 ES6 语法、WebGL 等 3. **CSS 解析偏差**：如 Flexbox、Grid 布局的实现差异
2025-09-29 10:07:43
128
原创 JavaScript异步编程：告别回调地狱，拥抱Promise async/await
本文对比了前端异步编程的三种方案。回调函数嵌套会导致"回调地狱"，代码可读性和维护性差。Promise通过链式调用解决了嵌套问题，支持扁平化代码结构和统一错误处理。而async/await作为语法糖，基于Promise实现了同步式的异步代码书写方式，配合try/catch进一步简化了错误处理流程。三种方案中，Promise和async/await在可读性、错误处理和扩展性方面都表现更优，其中async/await尤其适合需要顺序执行异步操作的场景，同时保留非阻塞特性。
2025-09-28 10:51:08
1091
8
原创 React/Vue组件状态更新失效
Can't perform a React state update on an unmounted component (React)Avoid mutating a prop directly (Vue)
2025-09-28 10:50:30
502
5
原创 解决：跨域请求被浏览器阻止（CORS错误）
CORS问题源于浏览器安全机制，但通过服务器端设置或前端代理可高效解决。服务器配置是根本，开发环境代理是临时方案。遇到类似BUG时，先检查浏览器控制台错误，再针对性处理。
2025-09-27 09:12:51
1408
原创 CSS布局塌陷（高度自适应失效）
布局塌陷的核心是使父元素包含浮动子元素。优先选用伪元素清除浮动或，现代项目可用。避免滥用固定高度，保持布局弹性。
2025-09-27 09:08:20
134
原创 解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG
在现代前端开发中，CSS Flexbox布局因其灵活性和易用性被广泛采用。然而，许多开发者会遇到一个常见BUG：Flexbox布局在旧版浏览器（如Internet Explorer 10-11）中表现不一致，导致元素错位或尺寸计算错误。本文将一步步分析问题原因，提供可靠解决方案，并附上可即查即用的代码示例。
2025-09-26 22:20:37
349
原创 解决Flexbox布局中元素无法居中的常见问题
Flexbox布局常见居中问题及解决方案：遇到水平/垂直居中失效时，需检查......并处理浏览器兼容性（如添加-webkit-前缀）。关键步骤包括：确保容器高度定义、使用开发者工具调试偏移量、添加响应式测试。完整代码示例展示了通过设置容器为flex并配合justify-content/align-items:center实现完美居中的方法。
2025-09-26 22:14:26
312
原创 LayaAir提示：版本不匹配!全局tsc(xxx)!=VS Code的语言服务(2.1.5)。可能出现不一致的编译错误
VS Code内置TypeScript版本与本......，确认版本号变更后重启LayaAir即可解决问题。该方案通过调整TypeScript版本来消除开发环境中的版本冲突。
2025-09-23 20:49:20
164
原创 解决vant Toast 在vue3中引入没有效果
Vant框架的Toast轻提示不显示常见原因有：1.样式冲突导致元素不可见；2.显式导入showToast函数时未自动加载样式。解决方案：......
2025-09-23 14:28:09
369
原创 问题解决：JavaScript的sort排序在安卓上表现不一致
在Android系统中，V8引擎7.0版本（对应Chrome 70+）对`Array.prototype.sort`的实现进行了重大优化，导致数组长度不同时表现不一致 JavaScript的sort排序在安卓手机表现不一致 h5上sort函数排序不同 Android上sort排序兼容性差异
2025-09-20 13:13:41
275
原创 Vue 开发常见报错及解决方案指南
本文总结了Vue开发中常见的10类报错，包括模板编译错误和运行时错误，并提供了详细的解决方案。主要涉及v-for缺少key、v-if与v-for混用、单根元素限制、访问undefined/null属性、事件未声明、直接修改props、无限循环更新等问题。针对每种错误，文章分析了产生原因，并通过代码示例对比错误和正确写法，特别说明了Vue2和Vue3的差异处理。这些解决方案能帮助开发者快速定位和修复Vue应用中的常见问题。
2025-09-20 12:39:53
529
原创 报错解决 ReferenceError: Can‘t find variable: setParamsToClient
JSBridge调用错误常见于混合应用开发中，当Vue页面尝试调用原生iOS提供的setParamsToClient等JS函数时，在纯浏览器开发环境下会报未定义错误。解决方案包括：1)在开发环境添加兼容性代码，模拟原生函数；2)在Vue组件中加入保护性检查；3)封装条件调用方法。这些方法既能保证开发环境正常运行，又不影响原生环境功能调用。通过环境适配处理，可有效解决混合应用开发中的JSBridge兼容性问题。
2025-09-17 10:19:18
346
原创 vue3videoPlay自定义视频播放器
本文介绍了一个基于Vue3的视频播放组件"vue3-video-play"，主要功能包括：支持HLS视频流播放和多种视频格式（MP4/WebM/Ogg）；提供播放/暂停、全屏、进度条控制等基础功能；支持倍速播放、镜像画面、关灯模式等高级设置；包含错误处理和加载状态显示。组件支持npm/yarn安装，提供详细的事件监听和自定义样式配置，适用于移动端和PC端。文章还展示了组件封装代码，包含视频封面、加载动画、错误提示等UI实现。
2025-09-16 14:27:45
405
1
原创 小程序获取视频第一帧
【小程序视频列表优化方案】针对小程序单页video组件最多5个的限制，可采用"图片替代视频"的解决方案：通过阿里云OSS的视频处理参数......将视频首帧转为封面图，用image组件展示任意数量封面。用户点击时再动态创建单个video组件播放，既规避限制又提升性能。该方案支持调整截帧时间点，且腾讯云、七牛云等平台均有类似功能，将资源消耗转移至云端，显著优化用户体验。
2025-09-16 13:52:51
447
原创 给图片url添加时间戳参数以防止缓存、清缓存
本文介绍了如何定义Vue全局指令v-timestamp来解决图片缓存问题。该指令在元素挂载时执行，自动为图片URL添加时间戳参数，强制浏览器重新加载图片而非使用缓存。实现方式是在main.ts中注册directive，通过querySelector获取img标签并修改src属性，添加当前时间戳作为查询参数。使用示例展示了如何在van-image组件上应用该指令，最终效果是图片请求不再走浏览器缓存，确保每次都能获取最新版本。这种方案简单有效地解决了前端图片缓存更新的常见问题。
2025-09-15 14:37:00
285
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人