- 博客(204)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
1562
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2332
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1277
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
2779
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
2963
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
4911
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
5091
原创 《浏览器原生 Lazy 与 Intersection Observer 图片懒加载对比》
本文对比了原生lazy loading与IntersectionObserver两种图片懒加载方案。原生方案简单易用，适合少量图片场景，但存在阈值不可控、不支持背景图等局限。IntersectionObserver方案更灵活，支持自定义加载阈值、提前加载和动画效果，特别适合长列表和复杂场景。通过实验对比可见，原生方案在浏览器控制下可能一次性加载过多图片，而Observer方案能精确按需加载，提供更流畅的滚动体验，但实现复杂度稍高。
2025-08-27 17:03:48
287
原创 Vue 登录页高低分辨率背景图优化实现
本文介绍了一种Vue登录页图片优化方案，通过低分辨率占位图+高分辨率图片懒加载提升用户体验。主要内容包括：1) 使用低分辨率图片实现快速首屏渲染；2) 在mounted钩子中创建Image对象异步加载高分辨率图片；3) 通过动态class切换实现背景图平滑过渡效果。核心代码展示了Vue的class绑定语法和图片预加载机制，当高分辨率图加载完成后切换状态触发CSS过渡动画。该方案在保证视觉效果的同时优化了页面加载性能，且不影响原有业务逻辑实现。
2025-08-27 16:19:41
230
原创 抽奖系统（html+css+js）
本文介绍了一个炫酷的随机点名系统网页应用。该系统具有以下特点：1）支持添加姓名到名单池；2）点击"开始点名"按钮会随机快速显示名单中的姓名；3）点击"停止"按钮会随机选中一个姓名并伴有彩带特效和闪烁动画；4）界面采用黑色背景配渐变色按钮，姓名显示超大字体并带有动态缩放效果；5）系统包含彩带粒子动画效果，从页面中心向外扩散。该应用适合课堂点名、抽奖等场景，通过丰富的视觉效果增强用户体验。
2025-08-23 07:00:00
284
原创 姓名寿命趣味预测
这是一个趣味姓名寿命预测网页应用。用户输入姓名后，系统会基于姓名长度和Unicode编码随机生成60-100岁之间的寿命预测，并伴有数字滚动动画和彩色礼花特效。页面采用黑色背景和渐变色按钮，具有现代感的设计风格。该应用纯属娱乐，不具科学依据，主要展示前端动画效果和交互功能。
2025-08-23 06:45:00
496
原创 抽奖圆盘升级版（html+css+js）
摘要：这是一个网页抽奖转盘功能的HTML实现代码。页面包含一个彩色转盘（分为6个扇形区域，分别显示不同水果图标）和一个抽奖按钮。点击按钮后，转盘会随机旋转并最终停在某个奖项上，结果会以动画特效显示。代码实现了转盘旋转动画、抽奖结果提示、闪烁效果和彩带庆祝动画等功能。所有交互效果通过JavaScript控制，包括随机选取奖项、平滑旋转过渡和视觉反馈效果。整个抽奖过程具有完整的视觉反馈，增强了用户体验。
2025-08-22 08:30:00
165
原创 转盘抽奖（html+css+js）
摘要：这是一个基于HTML/CSS/JavaScript实现的趣味抽奖转盘网页应用。转盘采用六种水果emoji作为奖品选项，通过conic-gradient实现多彩扇形效果。点击"抽奖"按钮后，转盘会随机旋转5圈后停止，显示中奖结果。代码实现了平滑的旋转动画效果，并确保每次旋转都能准确指向随机选中的奖品。整个设计具有视觉吸引力，适合作为小型网页游戏或促销活动使用。
2025-08-22 08:00:00
243
原创 3D 环形旋转图片轮播（纯html,css,js）
这段HTML代码实现了一个3D环形旋转图片展示效果。通过CSS 3D变换和JavaScript动态生成卡片元素，创建了一个包含8张图片的环形旋转画廊。主要特点包括：深色径向渐变背景、卡片悬停放大效果、自动旋转动画（30秒/圈）以及3D透视视觉效果。代码结构清晰，包含HTML框架、CSS样式和JavaScript动态生成逻辑，适合用于网页图片展示或作品集展示场景。
2025-08-21 15:44:48
684
原创 升级版本彩虹翻翻乐
这是一个名为"彩虹翻牌乐多关卡版"的HTML5记忆配对游戏。游戏采用渐变彩虹色设计，包含10个逐渐增加难度的关卡（从2x2到8x8网格）。玩家需翻转卡片匹配相同表情符号，游戏会记录用时和步数，提供音效和粒子特效增强体验。关卡完成后显示成绩并解锁下一关，通关后会有特殊庆祝效果。游戏采用响应式设计，适合各种设备，包含进度条、计时器和步骤计数器等功能。
2025-08-18 18:21:52
106
原创 彩虹翻牌乐
《彩虹翻牌乐终极版》是一款记忆配对类网页游戏。游戏采用3x3卡片布局，包含5种水果emoji图案（其中一个是特殊卡）。玩家需要翻开卡片寻找相同图案配对，当所有8张卡片成功配对后获胜。游戏具有计时、步数统计功能，以及进度条显示配对完成度。特色功能包括特殊卡会随机翻开另一张卡片、连击特效、胜利弹窗提示和彩色粒子动画效果。游戏界面采用响应式设计，包含卡片翻转动画和音效反馈，整体以彩虹渐变色为主题，视觉效果活泼生动。
2025-08-18 18:10:27
219
原创 深入理解 uni-app 的 uni.createSelectorQuery()
uni.createSelectorQuery()是uni-app中用于查询节点信息的核心API，可获取节点尺寸、位置、滚动状态及组件上下文。它支持链式调用.select()、.selectAll()等方法选择节点，并通过.boundingClientRect()、.scrollOffset()等方法获取详细信息。该API适用于动态布局、滚动监听、组件操作等场景，需注意在mounted/onReady后调用，且支付宝小程序和nvue存在兼容性限制。通过.exec()可批量执行查询，返回结果顺序与查询顺序一致
2025-08-13 17:30:14
822
原创 《前端60问：从设备判断到性能优化全解》
本文总结了前端开发中的60个常见技术问题及解决方案，涵盖设备检测、性能优化、用户交互、文件处理、错误监控等多个方面。主要内容包括：1）通过navigator.userAgent判断设备类型；2）使用防抖/节流优化高频操作；3）navigator.sendBeacon实现可靠数据上报；4）实现电梯导航、拖拽等交互功能；5）长任务统计和性能监控方法；6）大文件切片上传策略；7）错误定位与Git调试技巧；8）国际化、灰度发布等工程化实践；9）微前端架构和React优化方案。这些解决方案涉及浏览器API、网络请求、
2025-08-08 16:59:41
1065
原创 使用 PowerShell 检查端口通信（含打开方式与命令详解）可以使用带端口的ping
摘要 本文介绍使用PowerShell的Test-NetConnection命令检查端口通信的方法。主要内容包括：两种打开PowerShell的方式（开始菜单搜索和Win+R快捷键）；命令基本语法"Test-NetConnection -ComputerName <目标地址> -Port <端口号>"。该命令适用于Windows系统下的网络调试和服务部署场景，可快速验证端口可达性。
2025-08-07 09:13:23
278
原创 项目打包为 self-contained 可执行包在（国产 Linux）中配置为后台服务，支持自动启动、崩溃重启、远程访问
本文介绍了将.NET程序部署到Linux-ARM64系统的完整步骤：1）编译生成自包含发布包（使用--self-contained参数）；2）传输到目标系统并赋执行权限；3）配置systemd服务实现开机自启和进程守护。重点解释了主程序.dll文件的作用机制、自包含发布的意义，以及systemd服务的配置要点（包括工作目录设置、自动重启策略等）。通过这五个步骤，可实现.NET应用在麒麟系统上的稳定运行，类似Windows服务或Node.js的PM2守护进程。
2025-08-06 09:38:52
398
原创 MySQL 在麒麟系统上部署使用 + DBeaver 远程连接 + SQL 数据导入完整流程
本文提供了在麒麟系统上部署MySQL 8.0+并配置远程连接的完整指南。主要内容包括：MySQL安装与启动、root用户远程权限设置、监听IP配置、防火墙端口开放、SQL文件导入步骤，以及使用DBeaver远程连接的详细配置方法。文档还列出了常见错误及其解决方案，如访问被拒绝、连接失败等问题。适用于国产操作系统环境，帮助用户快速实现MySQL数据库的远程访问与管理。操作步骤清晰，包含命令行和SQL语句示例，便于技术人员参考实施。
2025-08-05 16:39:53
475
原创 如何使用 DBeaver 连接 MySQL 数据库
本文介绍了在DBeaver中连接MySQL数据库的完整步骤：1)启动DBeaver后新建MySQL连接；2)填写服务器地址、端口、认证信息等连接参数；3)测试连接并下载必要驱动；4)保存配置后即可连接数据库进行操作。同时提供了SQL编辑器使用说明和密码错误、连接拒绝等常见问题的解决方法。该指南适用于麒麟系统及其他跨平台环境，帮助用户快速建立MySQL数据库连接并进行管理操作。
2025-08-04 18:15:27
229
原创 安装MySQL可视化管理工具DBeaver教程
本文介绍了在国产麒麟系统上安装MySQL可视化管理工具DBeaver的详细教程。DBeaver作为一款跨平台的图形化数据库工具，支持多种数据库，界面友好且功能丰富。安装步骤包括导入GPG公钥、添加APT源、更新包列表和安装社区版。通过DBeaver，用户可以方便地管理MySQL数据库，执行SQL编辑、数据浏览等操作。该教程为麒麟系统用户提供了更高效的数据库管理方案，替代传统的命令行操作方式。
2025-08-04 17:42:51
309
原创 详细解释obj.__ob__
Vue通过检查对象是否具有__ob__属性来判断是否为响应式对象。响应式对象（如通过data选项或this.$set创建的）会自动被添加__ob__属性。直接创建的普通对象没有__ob__，即使通过$set修改也不会触发视图更新。判断时Vue只关注对象本身是否具有__ob__，而不关心其具体属性。
2025-08-02 08:00:00
174
原创 Vue 响应式核心原理梳理
Vue响应式原理核心机制是通过数据劫持和依赖收集实现的。初始化时，Vue递归遍历data对象，使用Object.defineProperty为每个属性添加getter/setter，并创建对应的Dep依赖管理器。当组件渲染时访问数据触发getter，Dep会收集当前Watcher；数据变更时setter会通知Dep触发所有关联Watcher的update方法，重新渲染视图。整个过程实现了数据变化自动驱动视图更新，其中Dep负责依赖管理，Watcher作为中间桥梁连接数据和视图更新。
2025-08-02 08:00:00
237
原创 Vue.set 响应式原理详解：源码级逐行带入实战解析
Vue2的响应式系统通过Vue.set实现动态添加响应式属性，核心流程如下：1) 检查目标是否为数组并处理；2) 若属性已存在直接赋值；3) 判断是否为响应式对象（含__ob__）；4) 调用defineReactive添加getter/setter，创建Dep依赖收集器；5) 通过ob.dep.notify()触发视图更新。整个过程通过Object.defineProperty将新属性转为响应式，并建立属性与依赖的关联机制，确保数据变化时可自动更新视图。
2025-08-01 12:04:03
1334
原创 Vue 实现老人定位平滑移动动画（附完整源码）
本文介绍了在智慧养老系统中实现设备定位数据平滑移动动画的方法。通过Vue+JavaScript结合requestAnimationFrame和自定义缓动函数，实现了设备在地图上的路径平滑移动效果。系统接收后端定位坐标后，利用smoothMoveAlongPath函数拆分路径，调用smoothMove按速度逐帧移动，并采用easeInOut缓动曲线控制动画节奏。核心代码展示了如何计算移动距离、持续时间，以及通过缓动函数实现先快后慢的自然运动效果。最后提供了可直接运行的HTML示例，演示了从固定路径点到目标位置
2025-08-01 10:08:56
334
原创 Vue 示例代码（平滑移动 + 匀速）
该代码实现了一个设备位置平滑移动的演示效果。使用Vue3的Composition API，通过reactive创建响应式设备位置数据，包含两个初始点位(A001和B002)。点击按钮触发simulateMove函数，使用requestAnimationFrame实现动画效果，采用easeInOutQuad插值曲线使移动更平滑自然。移动速度由distance/speed*1000计算得出，确保不同距离的点位以相同速度移动。界面采用CSS定位，包含600x500px的容器和圆形头像标记，点击按钮位于底部居中位置
2025-07-28 09:49:47
129
原创 Three.js 实战：开启阴影、灯光旋转与阴影清晰度设置详解
本文详细介绍了在Three.js中实现阴影效果的关键方法。主要包括：1)启用阴影渲染器和灯光投射；2)设置物体阴影投射和接收属性；3)实现灯光动态旋转产生变化阴影；4)通过调整shadowmap分辨率提升阴影清晰度。文章提供了完整代码示例，重点讲解了renderer.shadowMap.enabled、castShadow/receiveShadow等核心参数的设置方法，以及如何通过数学函数实现灯光动态移动，最后总结了提高阴影质量的优化技巧。
2025-07-24 08:00:00
306
原创 旋转加载进度条+完整代码
摘要：该HTML代码创建了一个双边框旋转加载动画，包含一个固定在视窗中央的半透明背景层和一个旋转的双色圆环。圆环由外圈的浅灰色和内圈的蓝色组成，通过CSS动画实现360度连续旋转效果。页面加载时显示该动画，3秒后自动隐藏并弹出"模型加载完成"提示，可用于网页加载等待状态。代码简洁，包含完整的HTML结构、CSS样式和JavaScript控制逻辑。
2025-07-22 08:00:00
206
原创 百分比进度条+完整代码
这篇文章展示了一个动态进度条的HTML实现。代码创建了一个渐变色进度条（橘色渐变），包含百分比显示。进度条容器宽度设为80%，带有圆角和阴影效果。JavaScript部分通过定时器模拟进度增长，每50毫秒增加1%直至100%。进度条宽度和百分比文本同步更新，完成后自动停止。该实现简洁美观，适合用于网页加载或任务进度展示场景。
2025-07-21 16:22:11
359
原创 THREE+gltf模型或者glb模型过大DRACO压缩和解压引入
本文介绍了如何使用Three.js中的GLTFLoader和DRACOLoader加载DRACO压缩的3D模型。通过创建加载器实例、设置解码器路径、关联加载器，最终加载压缩后的GLB模型文件。DRACO压缩能有效减小模型体积，提升加载速度。需要注意的是，模型只需压缩一次，重复压缩不仅无效还可能导致损坏。文末提供了模型加载后的处理示例，展示了如何获取模型场景数据。
2025-07-21 12:24:39
365
原创 Three.js 实战：使用 PBR 贴图打造真实地面材质
本文介绍了在Three.js中使用PBR材质贴图创建真实地面效果的方法。通过MeshStandardMaterial配合五种贴图(map、aoMap、roughnessMap、normalMap、displacementMap)模拟物理材质特性，并详细说明了各贴图作用及使用注意事项，包括UV设置、几何体细分数要求等。文章还提供了免费PBR贴图资源网站，帮助开发者获取专业材质贴图。
2025-07-16 23:35:00
382
原创 Three.js如何处理浏览器窗口尺寸变化：WebGL 渲染与摄像机视角更新
这段代码实现了浏览器窗口大小变化时调整WebGL渲染的功能。通过window.innerWidth/innerHeight获取新尺寸，调用renderer.setSize()更新画布大小。同时调整camera.aspect宽高比并调用updateProjectionMatrix()更新投影矩阵，确保3D场景正确映射到2D屏幕且不会失真。这些操作共同保证了窗口尺寸变化时WebGL渲染的正确显示。
2025-07-16 16:21:20
206
原创 Three.js实现点击射线采集点生成自定义曲线老人按照曲线行走
基于Three.js的3D老人路径导航系统实现 摘要：本项目使用Vue3和Three.js构建了一个3D场景中的老人路径导航系统。主要功能包括：1) 通过GLTFLoader加载场景和老人模型；2) 使用鼠标点击地面生成导航路径点；3) 利用CatmullRomCurve3创建平滑路径曲线；4) 实现老人沿路径自动行走动画。系统采用Raycaster进行鼠标拾取，通过AnimationMixer控制老人行走动画，并支持环境贴图加载和实时渲染。代码结构包含场景初始化、模型加载、动画控制等模块，实现了完整的3D
2025-07-15 17:06:17
378
原创 从顶点到画面：Three.js如何用WebGL绘制3D图形
本文介绍了使用Three.js创建3D几何体的基本方法。通过BufferGeometry和BufferAttribute设置顶点坐标和颜色数据，构建了一个由两个三角形组成的正方形平面。顶点坐标范围为-1到1，z轴固定为1；顶点颜色采用RGB值实现颜色渐变。使用MeshBasicMaterial材质并开启线框模式，最终组合成一个可渲染的网格模型。文中还解答了关于顶点数据格式、BufferAttribute作用以及BufferGeometry与PlaneGeometry区别等常见问题，为自定义3D模型提供了基础
2025-07-15 08:00:00
768
原创 Three.js如何实现帧率无关的动画系统：基于 Delta-Time 的动画驱动
摘要：帧率无关动画技术是现代前端和游戏开发中确保动画流畅性的关键。通过基于时间而非帧率更新动画（如使用时间差delta），解决了不同设备帧率波动导致的动画速度不一致问题。示例代码展示了Three.js中通过AnimationMixer和时钟差值实现帧率无关动画的方法，使动画在不同性能设备上都能保持稳定自然的播放效果。
2025-07-14 11:26:49
122
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人