芭拉拉小魔仙-优快云博客

原创 Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题

将 TUICallKit 使用分包集成之后，主包中的 vendor,js 会变得非常大，这也是目前遇到的痛点问题。这是因为 uniapp 打包小程序在 Vue2 和 Vue3 上打包机制存在差异。Vue2 使用 webpack 打包，独立分包中都会有单独的 vendor,js 不存在包体积问题。Vue3 使用 vite。没有找到解决方案，改用vue2了。vue2分包不占用主包体积。打包，分包中的依赖会被打入主包中，造成主包体积过大问题。操作后主包的vendor.js依旧很大。

2025-04-03 11:28:49 307

原创《Postcss - pxtorem在Vue3中实现自适应原理与实践》

Postcss - pxtorem是一个PostCSS插件，它的主要作用是将CSS中的px单位转换为rem单位。在网页开发中，rem是一个相对单位，它是相对于根元素（html元素）的字体大小来计算的。通过将px转换为rem，我们可以方便地实现页面在不同设备屏幕尺寸下的自适应。

2024-12-04 15:09:23 1034 1

原创浏览器数据存储方法深度剖析：LocalStorage、IndexedDB、Cookies、OPFS 与 WASM - SQLite

1994 年由网景公司引入的 Cookies，主要用于存储小型键值数据，在会话管理、个性化和跟踪等方面发挥着重要作用。它不仅存储在客户端，还会随每个 HTTP 请求发送到服务器，因此其存储容量有限，通常每个 Cookie 不超过 4KB（RFC - 6265 规定）。虽然其存储的数据量小，但由于是 Web 的重要基础特性，在性能优化方面一直备受关注，如 Chromium 的共享内存版本控制和异步 CookieStore API。

2024-12-03 14:18:58 1271

原创深入理解 Viewport Meta 标记及其基本属性的使用场景

Viewport（视口）是用户在网页上能够看到的区域。而viewport meta标记则是HTML中用于控制视口的设置。它位于标签内部，通过它我们可以告诉浏览器如何对页面进行缩放和布局，从而适配不同的设备屏幕。

2024-11-28 08:38:13 783

原创 Ajax、Fetch、Axios、XMLHttpRequest 的关系与区别

XMLHttpRequest 是一种用于在 Web 浏览器和服务器之间进行异步数据传输的 API。它算得上是早期实现浏览器端异步请求的核心技术，通过它可以在不刷新整个页面的情况下，向服务器发送 HTTP 请求并获取响应数据，然后借助 JavaScript 来对获取到的数据进行操作，进而更新页面的部分内容。例如，早期的网页中实现简单的动态加载更多内容的功能，很多就是依靠 XMLHttpRequest 来发送请求获取新数据并展示的。

2024-11-27 11:48:01 1480

原创【CSS】纯CSS Loading动画组件

【代码】【CSS】纯CSS Loading动画组件。

2024-10-18 11:33:00 467

原创【CSS】纯css3螺旋状loading加载特效

css3 螺旋Loading特效

2024-10-11 11:29:25 523

原创 Vue3 Typescript 前端页面5min后无操作自动退出至登录页面

前端页面5min无操作，弹出弹窗提示用户系统将在30s后退出，30s后系统自动退出至登录页面。

2024-09-30 09:35:57 839 1

原创实现语音合成的三种方法：HTML5 Web Speech 、speak-tts、百度语音合成

在前端开发中，文字转语音（Text-to-Speech, TTS）技术是一种非常实用的功能，广泛应用于教育、商业、娱乐以及无障碍辅助等多个领域。和speak-tts，并对比它们的优缺点及适用场景。

2024-09-27 10:44:38 4302 3

原创用CSS 方式设置 table 样式

在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。

2024-09-09 09:01:46 1568

原创解决苹果手机通过getUserMedia唤起摄像头出现黑屏问题

在iOS设备上，用户必须明确授权网站或应用访问摄像头。如果用户在首次请求时没有授权，或者之后更改了权限设置，那么摄像头将无法正常工作。API 要求在安全的上下文中使用，即你的网页必须通过HTTPS协议提供。如果你的网站还在使用HTTP，那么你需要将其升级到HTTPS。虽然大多数现代浏览器（包括Safari）都支持这一API，但最好还是在。之前，用户已经授权了摄像头访问权限。首先，确保你正在使用的浏览器支持。上检查最新的兼容性信息。

2024-09-06 17:19:00 839

原创揭秘开发者效率飞升的秘密武器：选择合适的编程工具

选择合适的编程工具是提升开发者工作效率的关键。无论是智能的代码编辑器、强大的版本控制工具，还是那些让我们事半功倍的自动化脚本，它们都在各自的领域发挥着不可替代的作用。通过不断学习和尝试新的工具和技术，我们可以不断优化自己的工作流程，实现效率的飞升。希望每位开发者都能找到适合自己的秘密武器，在软件开发的道路上越走越远。

2024-09-06 11:45:00 1181

原创 navigator.mediaDevices.getUserMedia检查用户的摄像头是否可用，虚拟摄像头问题

API 提供了这一功能，它允许你请求访问用户的媒体设备，如摄像头和麦克风。虽然这个API本身主要用于获取媒体流，但你可以通过尝试获取摄像头流来间接检查摄像头是否可用。通过stream.getVideoTracks()，获取当前设备，发现是虚拟摄像头的问题。如果成功，我们会在控制台中打印一条消息，并可以将视频流绑定到一个。在Web开发中，检查用户的摄像头是否可用是一个常见的需求，尤其是在需要视频聊天或录制视频的应用程序中。如果失败，我们会捕获错误并根据错误的类型显示相应的消息给用户。

2024-09-06 11:23:34 730

原创 React、Vue.js 和 Angular主流前端框架介绍与选择指南

在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。

2024-09-04 15:52:14 1410

原创 Vue3 + TypeScript 实现防抖（Debounce）和节流（Throttle）

在Vue3项目中结合TypeScript使用防抖（Debounce）和节流（Throttle）技术，可以有效提升应用的性能和用户体验，尤其是在处理频繁触发的事件（如滚动、窗口大小调整、输入框内容变化等）时。下面将详细介绍这两种技术的原理、使用方法以及适用场景。

2024-09-04 13:47:25 1607

原创前端之路，与大师同行：不容错过的技术大牛博客精选

前端程序员在不断提升自己的过程中，需要关注多个方面，包括技术能力的提升、职业素养的增强以及持续学习的态度。以下是一些具体的建议：深入学习基础技术：关注新技术和趋势：实战项目经验：代码质量和性能优化：团队合作和沟通能力：持续学习和自我提升：解决问题的能力：设定学习目标：制定学习计划：实践和应用：反思和总结：《CSS世界三部曲》（包括《CSS世界》、《CSS选择器世界》、《CSS新世界》）《JavaScript高级程序设计（第4版）》《JavaScript权威指南（犀牛书）》《ES6标准入门（第三版）》《高性能

2024-09-03 14:31:38 1293 1

原创 ES6 reduce方法详解：示例、应用场景与实用技巧

在JavaScript中，reduce方法是一个非常强大的数组方法，它允许你将数组中的元素归并（reduce）为单个值。reduce方法执行一个由你提供的reducer函数（归并函数），将其结果汇总为单一的返回值。

2024-09-03 11:07:48 1908

原创 ES6中新增的Set方法详解

在ES6（ECMAScript 2015）中，Set是一种新的数据结构，它提供了一种存储任何类型唯一值的方式，无论是原始值还是对象引用。本文将详细介绍Set的特点、解决的问题、使用场景以及使用方法。

2024-08-30 08:52:01 492

原创 Promise：JavaScript 中的异步编程解决方案

在JavaScript中，Promise是一种用于异步编程的对象，它提供了一种更优雅的方式来处理异步操作的成功和失败，相比传统的回调函数方法，Promise让代码更加简洁、易读、易维护。本文将详细介绍Promise的特点、用法以及它解决的问题。

2024-08-29 17:54:20 475

原创全能型AI“草莓”的未来展望：多样性VS专业性，谁将引领市场潮流？

这款AI从解决深奥的数学问题到驾驭复杂多变的营销策略，展现出了前所未有的多样性和适应性，引发了业界对于AI发展方向的深刻讨论：全能型AI是否真的代表了未来的趋势？而对于专业型AI来说，则需要在保持专业性的同时，关注跨领域的融合与创新，以适应不断变化的市场需求。隐私与伦理：随着AI应用范围的扩大，如何确保用户数据的安全和隐私，以及避免潜在的伦理问题，成为全能型AI发展过程中不可忽视的挑战。定制化服务：针对特定行业或场景的需求，专业型AI可以提供更加精准和个性化的解决方案，满足客户的特殊需求。

2024-08-29 14:59:23 331

原创 CSS中的align-content属性：实现垂直居中的新方式

在CSS中，align-content属性原本主要用在Flexbox和Grid布局中，用于控制交叉轴（crossaxis）上内容的对齐方式。但在2024年，浏览器开始支持在默认布局（flowlayout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。align-content属性的引入为CSS的垂直居中问题提供了一个全新的解决方案。通过使用这一属性，我们可以在默认布局中轻松实现内容的垂直居中，而无需依赖Flexbox、Grid或其他复杂的布局方式。

2024-08-28 09:51:36 1991 1

原创在URL链接中指定浏览器跳转到PDF文件的指定页码

在Web开发中，经常需要处理各种类型的文件交互，包括PDF文件。有时，我们可能希望当用户点击一个链接时，浏览器能够直接打开PDF文件并跳转到文件的特定页码。虽然HTML标准本身并不直接支持在URL中指定PDF的页码，但我们可以通过一些技巧和工具来实现这一功能。

2024-08-24 09:45:00 637

原创 CSS @layer：深入理解与实战应用

layer 是CSS中一个强大的特性，它允许开发者以更加灵活和高效的方式来组织和控制样式。通过合理使用@layer，可以显著提高CSS代码的可维护性、性能和可定制性。随着浏览器对@layer支持的不断完善，我们有理由相信，它将在未来的Web开发中扮演更加重要的角色。@layer说明。

2024-08-24 09:15:00 1334

原创在网易云音乐服务器故障事件中提升应急处理能力的探讨

为了提升团队的应急处理能力，网易云音乐可以定期组织模拟演练，模拟真实故障场景以检验团队的响应速度和解决方案的有效性。演练结束后，及时组织复盘总结会议，分析存在的问题和不足，并提出改进措施。网易云音乐此次服务器故障事件虽然给用户和企业带来了一定的影响，但也为我们提供了宝贵的经验和教训。通过构建有效的危机应对机制、加强技术培训与分享、模拟演练与复盘总结以及培养团队协作精神等措施，我们可以不断提升团队的应急处理能力，在未来的技术风暴中站稳脚跟，为用户提供更加稳定、可靠的服务。

2024-08-23 13:55:50 624

原创平衡的艺术：编码与学习的双螺旋

在快速迭代的编程世界中，找到日常编码与自我提升的平衡并非易事，但它却是每一位程序员职业生涯中不可或缺的一部分。通过设定明确的目标、利用碎片时间学习、将学习成果融入工作、建立学习社群以及保持好奇心和勇气，我们可以在繁忙的编码工作与个人成长之间架起一座友谊、互利的桥梁。让我们在追求技术的道路上不断前行，共同迎接更加辉煌的未来。

2024-08-23 13:48:41 440

原创深入理解 structuredClone：JavaScript 的深拷贝解决方案

是一个全局函数，用于创建对象的深拷贝。与浅拷贝不同，深拷贝会递归地复制对象的所有嵌套属性，确保原始对象和拷贝对象之间没有任何引用关系。

2024-08-21 14:31:58 911

原创 JavaScript 中的深拷贝新宠：structuredClone() 函数详解

在 JavaScript 中，处理对象拷贝时，我们经常会遇到浅拷贝（shallow copy）和深拷贝（deep copy）的概念。浅拷贝只复制对象的第一层属性，如果属性值是引用类型（如对象、数组等），则只复制引用而不复制对象本身，这可能会导致原始数据被意外修改。而深拷贝则递归地复制对象及其所有子属性，确保原始数据和拷贝数据完全独立。传统上，JavaScript 没有内置直接进行深拷贝的函数，开发者通常需要自己编写深拷贝函数或使用第三方库（如 lodash 的 _.cloneDeep()）。

2024-08-21 14:12:58 1081

原创【Vue3】 navigator.mediaDevices 实现翻转摄像头

【Vue3】 navigator.mediaDevices 实现翻转摄像头。

2024-08-12 14:02:15 390

原创【Vue3】使用clipboard.js实现一键复制文本内容

【代码】【Vue3】使用clipboard.js实现一键复制文本内容。

2024-08-07 17:20:33 364

原创【Vue3】 typescript element-plus使用el-upload组件实现，上传一张图片并显示图片，根据图片url获取图片base64编码

【代码】【Vue3】 typescript element-plus使用el-upload组件实现，上传一张图片并显示图片，根据图片url获取图片base64编码。

2024-08-07 16:54:03 374

原创【Vue3】 typescript 实现开启摄像头并拍照，拍照图片回显，获取图片的 Base64 字符串并上传

【代码】【Vue3】 typescript 实现开启摄像头并拍照，拍照图片回显，获取图片的 Base64 字符串并上传。

2024-08-07 15:14:04 346

原创【vue3】iframe的使用，实现跨域交互，互访内容和方法

父页面引用子页面iframe

2024-07-03 09:38:36 3376

原创【javascript】数据精度丢失问题

JavaScript中存在小数点精度丢失的问题是由于其使用的浮点数表示方式。JavaScript采用的是双精度浮点数表示法，也称为IEEE 754标准，它使用64位来表示一个数字，其中52位用于表示有效数字，而其他位用于表示符号、指数和特殊情况。由于使用有限的位数来表示无限的小数，JavaScript无法准确地表示某些小数。其中一个典型的示例是0.1，它在二进制中是一个无限循环的小数。当我们将0.1这样的小数转换为二进制进行存储时，存在近似表示的误差，因此在进行计算时会出现精度丢失的问题。

2024-06-28 16:03:49 1383