- 博客(232)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
1793
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2487
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1314
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
2948
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
3085
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
5020
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
5309
原创 自动寻路完整版本demo（可上传图片版本）
摘要：该Vue组件实现了一个基于图片的路径规划系统，支持上传地图图片和遮罩图片，通过亮度阈值或遮罩自动生成障碍物网格。核心功能包括A寻路算法、路径平滑处理、动态障碍物检测和重规划，以及交互式障碍物绘制。组件提供可视化网格展示、实时路径动画和多种参数调节选项，适用于游戏开发或机器人路径规划等场景。技术亮点包括基于canvas的图片处理、最小堆优化的A算法和LOS(视线)路径平滑算法。
2025-12-11 10:47:38
55
原创 自动寻路demo(完整代码直接可跑)
本文介绍了一个基于Vue2的路径查找演示组件，实现了A*算法(8方向)寻路功能。主要特点包括： 采用MinHeap优化A*算法性能 支持LOS(视线)平滑路径处理 使用requestAnimationFrame实现流畅动画 提供交互功能： 点击设置目标点(红点) Shift+拖动绘制障碍物 随机/示例/清空障碍物按钮 停止动画按钮 组件包含完整的网格系统(可调单元格大小)、路径平滑处理、动态障碍物检测和重规划机制。界面显示网格尺寸、路径点数和动画状态等信息。 该演示展示了前端实现路径查找算法的完整解决方案，
2025-12-11 10:35:31
286
原创 CSS 文本描边最稳方案：多重 text-shadow 实现清晰黑描边
在前端页面中，当文字内容处于复杂背景（如视频画面、图片区域）之上时，白色字体很容易与背景混合导致不清晰。左上、右上、左下、右下 4 个角方向。描边厚度：由偏移量（如 2px）决定。无模糊：确保边缘硬朗，不会糊成光晕。是最有效的增强可读性的方法。上、下、左、右 4 个方向。
2025-12-10 18:02:36
234
原创 在可拖动的预览播放器里 —— 「只要全屏按钮且拖动不触发暂停」的工程化实现
本文提出了一套针对监控/看护类应用中视频预览窗口的优化方案，主要解决两个常见痛点：1）去除原生控制栏仅保留全屏功能；2）防止拖动时误触导致视频暂停。方案采用Vue实现，包含以下核心功能：自定义全屏按钮、阻止视频点击暂停事件、兼容各浏览器全屏API、拖拽窗口功能实现，并提供了完整的HTML5视频全屏样式处理。技术实现上通过事件捕获阻止默认行为、跨浏览器全屏API适配、UI回退方案等，确保在主流浏览器中都能稳定运行。该组件还支持HLS流媒体播放，并提供了完整的初始化和销毁逻辑。
2025-12-10 11:25:22
123
原创 Three.js进行3D渲染（完整代码）
本文介绍了一个基于Three.js和GSAP的3D照片云圣诞树网页应用。该应用具有以下功能特点： 用户可上传多张照片(最多24张)生成3D照片云 提供两种展示模式：合拢(照片环绕圣诞树)和散开(照片随机分布) 支持点击照片放大查看，按Esc键退出放大模式 实现了简易相机控制(旋转/缩放/惯性效果) 包含装饰球体和灯光效果，营造节日氛围 响应式设计适配不同设备屏幕 技术实现上使用了Three.js进行3D渲染，GSAP处理动画过渡，通过自定义相机控制替代了OrbitControls依赖。
2025-12-08 09:45:49
318
原创 “RTMP 怎么在 Web 端最简单、最省事地播放？
现代浏览器已全面淘汰Flash，导致RTMP协议无法直接播放。解决方案是将RTMP流转为HLS（m3u8）格式：通过FFmpeg等工具在服务器端转换协议，再使用hls.js前端库实现网页播放。具体流程为：RTMP推流→服务器转HLS→前端通过hls.js加载m3u8文件播放。这种转换方案既解决了浏览器兼容性问题，又保留了低延迟直播特性。
2025-12-04 15:31:12
266
原创 浏览器如何播放流媒体m3u8格式
摘要：主流浏览器（Chrome/Edge/Firefox）无法直接播放m3u8文件，因其不原生支持HLS协议。Safari内置HLS解析能力可直接播放。hls.js通过解析m3u8清单、下载TS分片、转码为fMP4格式，利用MediaSource API实现浏览器播放。HLS是苹果提出的流媒体协议，m3u8作为播放清单文本文件记录分片信息。完整流程包含：获取m3u8→解析清单→下载分片→格式转换→MSE传输→视频播放。示例代码演示了hls.js的完整实现方案，包含错误处理和兼容性检测。
2025-12-04 15:11:52
466
原创 垂直列表滚动无缝滚动衔接（完整代码）
本文实现了一个无限滚动的表格组件，包含表头和自动滚动的内容区。组件特点包括：1) 支持自定义行高、列数、滚动速度等参数；2) 使用双列表渲染实现无缝循环滚动；3) 鼠标悬停暂停滚动；4) 响应式设计，自动适应尺寸变化。技术实现上采用CSS Grid布局、requestAnimationFrame动画和ResizeObserver监听，提供了点击行回调接口。样式方面设计了渐变色背景和悬停效果，确保表格数据清晰展示。该组件适用于需要持续展示动态数据的场景，如报警信息展示等。
2025-12-01 11:51:03
93
原创 基于 TRTC 打造uniapp微信小程序实时音视频对讲
本文介绍了使用uni-app编译到微信小程序，结合TRTC SDK实现音视频通话的完整方案。主要内容包括： 技术栈：uni-app + trtc-wx-sdk + live-pusher/live-player组件 核心功能实现： TRTC房间进出管理 本地推流创建与启动 远端流动态渲染 主/次窗口切换 可拖拽小窗功能 15秒自动挂断机制 MQTT接口联动 开发要点： 必须真机测试 需开启构建npm或静态引入SDK 后端需提供TRTC房间参数 实现细节： 通过v-if控制大小窗口切换 使用movable-v
2025-11-24 15:28:34
182
原创 更新原生小程序封装（新增缓存订阅）完美解决
MQTT客户端封装实现 该代码实现了基于WebSocket的MQTT客户端封装，主要功能包括： 连接管理：支持自动重连、超时处理 订阅/取消订阅：支持连接前缓存订阅请求 消息发布：支持字符串和JSON格式消息 回调管理：为每个topic维护消息回调函数 状态检测：提供连接状态查询接口 使用方式： 全局管理：在app.js中onShow连接，onHide断开 页面级别：调用subscribe订阅特定topic并处理消息 特性： 自动处理连接中断和恢复 支持消息队列(QoS 0) 提供详细的连接状态日志 包含身
2025-11-13 11:51:18
258
原创 使用 Three.js 和本地 Draco Loader 高效加载压缩 GLB 模型
Draco 是 Google 开发的 3D 几何压缩库，可以将几何数据压缩到原来的 10~30% 左右，同时支持顶点、法线、纹理坐标压缩。Three.js 提供了来解析压缩的 GLB/GLTF 模型。但在本地开发时，使用 CDN 可能会遇到跨域限制或404，因此建议把 Draco 文件放在项目的public目录下。
2025-09-27 16:57:14
278
原创 Three.js 中如何给 3D 模型添加文字标签？
本文介绍了在Three.js中实现3D文字标签的Canvas方案。通过Canvas绘制圆角矩形和文本，转换为Three.js纹理后创建Sprite对象，使标签成为真正的3D元素。相比HTML方案，这种方法能让标签跟随3D场景旋转缩放，更适合需要标签与模型紧密配合的场景。文章提供了完整的代码实现，包括创建文字标签函数和添加标签到场景的方法，可自定义文字颜色、背景、边框等样式。
2025-09-16 15:03:32
444
原创 备份threedemo
本文摘要：该代码实现了一个基于Vue3和Three.js的3D场景交互应用，包含模型加载、环境贴图、路径动画等功能。主要特点：1) 使用GLTFLoader加载压缩模型，通过DRACOLoader优化模型加载；2) 创建可点击的地板平面实现鼠标拾取；3) 实现老人模型沿CatmullRom曲线路径平滑移动；4) 添加环境贴图增强场景真实感；5) 集成GSAP库实现相机动画效果。代码结构清晰，包含场景初始化、模型加载、动画控制等模块，通过生命周期钩子管理资源加载和释放。
2025-09-13 11:01:14
97
原创 2025/9/12今日面试题+JavaScript 执行机制升级+答案
【摘要】本文解析JavaScript异步代码执行顺序。题目包含async/await、Promise和setTimeout，输出顺序为DACFHBGE。解析要点：1）同步代码优先执行（DACFH）；2）微任务（Promise.then和await后续）先于宏任务执行（BG）；3）最后执行setTimeout宏任务（E）。关键点在于await会将后续代码包装为微任务，事件循环顺序为同步→微任务→宏任务。该题型是面试常见考点，考察对异步机制的理解深度。（149字）
2025-09-13 07:00:00
731
原创 综合 Tab + 模拟 AI 聊天 Demo
摘要：这是一个综合Tab页+模拟AI聊天的Demo页面，采用大厂风格设计。主要功能包括：1）可拖拽切换的标签页，支持浏览器、AI聊天和BI报表三种类型；2）模拟AI聊天功能，包含打字效果和随机回复；3）BI报表展示，使用Chart.js生成柱状图；4）标签页可拖出窗口独立显示。整体采用现代化UI设计，包含圆角、阴影等视觉效果，实现了一个简洁实用的多标签页应用。
2025-09-12 14:21:08
114
原创 多楼层室内定位可视化 Demo（A*路径避障）
摘要：该代码实现了一个基于Three.js的多楼层室内定位可视化演示系统，包含3D场景构建、A路径规划和动态避障功能。系统通过分层网格地图模拟建筑楼层，随机生成障碍物和蓝牙信标，并使用红色小球作为移动终端演示路径规划过程。用户可通过界面按钮切换不同楼层视图，系统自动计算当前位置到目标信标的最优路径，并实时更新移动轨迹。核心算法采用A寻路，考虑网格通行性和曼哈顿距离启发式评估，实现了高效的障碍规避功能。整个演示在浏览器中运行，支持交互式视角调整和响应式布局。
2025-09-11 18:11:35
675
原创 Three.js r146 + OrbitControls
本文展示了一个基于Three.js的室内定位可视化Demo。该Demo创建了一个3D场景，包含5层半透明楼板，并添加了方向光源和定位标签(人员/资产)。通过OrbitControls实现场景交互控制，支持窗口大小自适应。代码使用CDN引入Three.js库，简洁地实现了基础的3D室内定位可视化功能。
2025-09-11 17:02:02
118
原创 2025/9/9今日面试题+JavaScript 执行机制+答案
摘要： 该代码演示了JavaScript事件循环的执行顺序。输出结果为：start→end→promise1→promise2→setTimeout。原因：1）同步代码（start/end）优先执行；2）Promise.then属于微任务，在当前宏任务结束后立即执行；3）setTimeout回调作为宏任务，需等待微任务队列清空后执行。体现了JS事件循环“执行宏任务→清空微任务→下一轮宏任务”的核心机制。
2025-09-09 17:04:36
317
原创 登录流程小白解析（单 token & 双 token）
本文对比了小程序和Web端的登录流程设计。小程序采用单token方案，通过wx.login()自动获取新token，用户无感知；Web端推荐双token机制（Access+Refresh Token），Access Token过期时用Refresh Token自动续期，提升用户体验。两者区别在于：小程序单token简化流程，Web端双token兼顾安全与体验。文末提供了小程序请求封装示例，实现token过期自动刷新。核心思想是不同场景选用合适方案，小程序重便捷，Web端重安全与长效。
2025-09-09 07:00:00
470
原创 # 小程序 & Web 登录流程完整解析
本文通俗解析小程序和Web登录流程，适合小白理解：小程序登录通过wx.login获取code，后端换取session_key和openid生成token返回前端存储；Web登录用户输入账号密码，后端生成短期Access Token和长期Refresh Token，前端存储并实现自动刷新。文中对比两种存储方式（Cookie/localStorage）的优缺点，强调密码安全需哈希加盐存储，并建议Access Token存内存或HttpOnly Cookie。核心区别在于小程序采用单token自动续期，Web使用
2025-09-08 17:29:07
1416
原创 小程序获取手机号完整流程 弹出框获取电话号码
微信小程序获取手机号完整流程： 前提：小程序需已注册审核，后端支持session_key存储； 前端：通过<button open-type="getPhoneNumber">触发授权弹窗，获取加密数据encryptedData和iv； 后端解密：使用AES-128-CBC算法结合session_key解密数据（Node.js示例）； 结果返回：解密后手机号传回前端显示。流程需用户授权，拒绝时提示。核心步骤：授权→加密数据传输→后端解密→展示。
2025-09-08 16:19:05
316
原创 官网模仿html全部代码
NeXAir是一家专注影像创作设备的科技品牌，提供航拍无人机、手持云台相机等硬件产品及云端协作生态服务。其旗舰产品AirX Pro配备4/3 CMOS传感器、5.1K拍摄能力和46分钟续航，同时推出CreatorCloud云端素材管理平台和教育编程套件EduLab。品牌主张"灵感飞行，创作无界"，通过一体化硬件+云端方案帮助用户实现电影级创作，并设有社区计划支持创作者成长。官网采用暗色设计风格，突出产品性能参数和应用场景展示。
2025-09-03 15:56:13
135
原创 官网示例完整代码
本文展示了一个现代化企业官网的HTML代码实现，包含以下几个核心模块：1. 响应式导航栏，支持移动端菜单切换；2. 全屏英雄区，带有粒子动画背景和渐变色彩；3. 功能展示区，包含三个卡片式布局；4. 案例展示区，采用悬停光效设计；5. 联系表单和页脚。代码运用了Tailwind CSS框架，实现了视差滚动、粒子动画、卡牌悬停特效等多种交互效果，整体设计简洁现代，响应式布局适配各种设备。技术亮点包括Canvas粒子动画、CSS过渡效果和Intersection Observer实现的滚动动画。
2025-09-03 15:13:34
373
原创 网格布局用法
这是一个菜品电商网页的HTML代码实现，包含以下核心功能：1.网格布局展示10类菜品；2.点击菜品可查看详情（名称、描述、价格）；3.购物车功能：添加商品、修改数量、删除商品；4.数据存储使用localStorage；5.响应式设计，支持移动端查看。主要交互包括返回首页、加入购物车、下单结算等操作，整体采用简洁现代的设计风格，主色调为红色(#FF6B6B)。
2025-09-03 14:56:44
122
原创 如何把 Windows 文件传到麒麟 Linux
摘要：本文介绍如何在Windows与银河麒麟Linux V10间通过SSH传输文件。首先确认系统类型（Debian/Ubuntu系），使用apt install openssh-server安装服务，启动并检查状态（systemctl status ssh）。需放行防火墙22端口。推荐使用WinSCP建立SFTP连接，拖拽文件即可上传。常见问题包括服务未启动、防火墙拦截或密码错误。通过SSH可实现安全便捷的文件传输。
2025-09-02 14:58:23
1528
原创 《浏览器原生 Lazy 与 Intersection Observer 图片懒加载对比》
本文对比了原生lazy loading与IntersectionObserver两种图片懒加载方案。原生方案简单易用，适合少量图片场景，但存在阈值不可控、不支持背景图等局限。IntersectionObserver方案更灵活，支持自定义加载阈值、提前加载和动画效果，特别适合长列表和复杂场景。通过实验对比可见，原生方案在浏览器控制下可能一次性加载过多图片，而Observer方案能精确按需加载，提供更流畅的滚动体验，但实现复杂度稍高。
2025-08-27 17:03:48
374
原创 Vue 登录页高低分辨率背景图优化实现
本文介绍了一种Vue登录页图片优化方案，通过低分辨率占位图+高分辨率图片懒加载提升用户体验。主要内容包括：1) 使用低分辨率图片实现快速首屏渲染；2) 在mounted钩子中创建Image对象异步加载高分辨率图片；3) 通过动态class切换实现背景图平滑过渡效果。核心代码展示了Vue的class绑定语法和图片预加载机制，当高分辨率图加载完成后切换状态触发CSS过渡动画。该方案在保证视觉效果的同时优化了页面加载性能，且不影响原有业务逻辑实现。
2025-08-27 16:19:41
344
原创 抽奖系统（html+css+js）
本文介绍了一个炫酷的随机点名系统网页应用。该系统具有以下特点：1）支持添加姓名到名单池；2）点击"开始点名"按钮会随机快速显示名单中的姓名；3）点击"停止"按钮会随机选中一个姓名并伴有彩带特效和闪烁动画；4）界面采用黑色背景配渐变色按钮，姓名显示超大字体并带有动态缩放效果；5）系统包含彩带粒子动画效果，从页面中心向外扩散。该应用适合课堂点名、抽奖等场景，通过丰富的视觉效果增强用户体验。
2025-08-23 07:00:00
346
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人