- 博客(277)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
2067
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2604
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1367
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
3053
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
3201
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
5143
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
5850
原创 uniapp总结
本uni-app项目通过主包（含index、隐私协议）与业务分包分离，优化包体积并按需加载。核心在于main.js初始化全局状态（Pinia/Vuex），调用initApi自动生成接口配置，统一管理请求参数（路径、Query、Body类型）及HTTPS环境。组件层面采用easycom自动引入与c-*自定义组件结合，提升复用性；通过globalProperties注册全局方法（如$bypass、$storeDispatch），实现跨组件调用。父子通信依赖props/emit，组件间数据传递高效可控，整体实现高
2026-09-12 07:00:00
124
原创 uniapp vue3全局方法注册使用
通过引入封装的工具方法，将toast注册为全局属性$toast，并在组件中通过getCurrentInstance().proxy.$toast()调用。使用循环遍历globalProperties，统一注册为$前缀的全局方法，实现便捷访问，提升代码复用性与维护性。
2026-09-11 17:33:47
121
原创 uniapp如何封装自己的自研组件
组件开发中，c-navbar 通过 template 定义结构，props 实现外部控制，emits 通知事件，slot 支持内容插入，内部状态与方法处理逻辑，生命周期钩子响应行为，style 控制样式。如 <c-submit-btn @submit="handleSubmit">保存</c-submit-btn>，子组件触发 submit 事件时，父组件执行对应处理函数，实现组件间通信与数据流转。
2026-09-11 17:20:37
255
原创 uniapp的easycom自动组件注册机制
正则表达式 ^c-(.*) 用于匹配以 c- 开头的组件名，其中 (.*) 捕获 c- 后的所有内容，$1 即为该捕获内容。在配置中，"^custom-(.*)": "@/components/$1/index.vue" 表示所有 custom- 开头的组件将自动映射到 components 目录下对应文件。$1 代表第一个捕获组，实现动态路径替换，提升组件注册效率。
2026-09-10 23:18:04
247
原创 首部隔空控制小球移动
MediaPipeAI空间交互实验室基于手部21点检测，实现隔空移动、捏合点击、拖拽及悬停高亮等高级交互功能。系统支持双手识别，通过可调节灵敏度与稳定性参数优化体验，提供“隔空鼠标”“空中画板”等多模式操作，结合实时手势识别与状态反馈，打造沉浸式无接触人机交互环境。
2026-09-10 22:34:10
115
原创 arguments 对象
<think>我们根据内容生成摘要。内容是关于proxy.$storeDispatch的使用，通过arguments传递参数，最终调用Vuex的dispatch执行action。要求≤150字。</think>摘要：通过proxy.$storeDispatch封装this.$store.dispatch，利用arguments透传参数，调用时传入动作名和参数，经Vuex分发至对应Action执行。
2026-09-08 22:00:23
38
原创 uniapp 微信小程序请求规范
<think>我们只需要根据内容生成摘要，不超过150字。内容是技术描述，关于API管理、Vuex、请求适配等。需要提取核心要点。摘要应简洁。 final? 需要输出摘要。</think>本文介绍了将API接口统一注入Vuex管理的方案：通过initApi遍历接口配置，生成调用函数存入state.https，页面从Vuex获取请求方法。请求支持路径参数、Query和Body三种传参方式，并根据数据类型（JSON、表单、文件）自动设置请求头，适配了UniApp请求，实现了接口的集中配置
2026-09-07 23:40:23
630
原创 uniapp 微信小程序分包规范
<think>我们根据用户要求，生成≤150字的文章摘要。内容是关于小程序pages.json配置，包括主包放首页和隐私协议，分包按业务拆分，文件夹路径一致等。需精炼。</think>小程序pages.json配置要点：主包仅放启动相关页（首页、隐私协议），减少体积；业务页面放入分包按需加载。分包通过subPackages按业务拆分，每个业务一个分包。文件夹路径与页面路径保持一致，规范清晰。
2026-09-04 17:43:40
55
原创 加载glb模型html
这篇HTML文档实现了一个基于Three.js的GLB模型预览器，主要功能包括： 核心功能： 支持加载本地或远程GLB/GLTF格式3D模型 提供交互式3D视图操作（旋转/缩放/平移） 自动调整相机位置适应模型尺寸 显示加载进度条和状态信息 技术特点： 使用Three.js核心库及GLTFLoader扩展 包含轨道控制器(OrbitControls)实现用户交互 响应式布局适应不同屏幕尺寸 内置环境光、方向光和半球光照明系统 使用说明： 默认加载远程GLB模型 本地文件模式下需手动选择模型文件 界面显示加载
2026-06-03 18:50:43
59
原创 vue3全局方法注册以及全局方法注册
在Vue3项目中，全局方法和组件的注册方式主要有两种：1. 全局方法通过main.js的app.config.globalProperties挂载，或使用plugins/index.js通过app.use统一管理；2. 全局组件可在main.js通过app.component单独注册，或通过components/index.js使用app.use批量注册。这两种方式都能实现全局功能扩展，批量注册更便于维护，适合组件较多的项目。插件式管理使代码更模块化，推荐采用app.use方式组织全局资源。
2026-06-02 10:48:12
182
原创 流程图demo
这篇文章介绍了一个AGV任务流程可视化Demo的实现，主要特点包括： 交互功能：支持节点拖拽、画布平移缩放、节点选中切换等操作 可视化设计：采用主节点+子节点的树状结构，主节点显示绿色边框，子节点显示蓝色边框 状态展示：通过不同颜色的徽章区分任务状态（已完成、执行中、未执行等） 数据呈现：每个节点显示任务名称、时间、操作者、位置等详细信息 响应式布局：适配不同屏幕尺寸，支持平滑的动画过渡效果 该Demo完整模拟了AGV从任务下发到完成的整个流程，包含5个主流程节点和3个子节点分支，实现了工业场景下任务流程的
2026-05-25 10:32:14
172
原创 刻度尺纯代码
这篇文章介绍了一个使用纯HTML/CSS/JS实现的横向刻度尺组件。该组件具有以下特点： 通过灰色区域左右拖动实现交互 中间蓝色竖线标识当前刻度值 刻度范围0-300（对应0.0-30.0mmol/L） 包含三种高度的刻度线（主刻度、次刻度和小刻度） 每10个单位显示一个数值标签 实时显示当前内部刻度和换算后的mmol/L值 采用响应式设计，最大宽度420px 使用scroll事件监听实现数值更新
2026-05-06 09:42:11
219
原创 闪退问题总结（非 H5 扫码后“闪一下就退出/退回多层”）
扫码页面出现“闪退”现象是由于连续触发扫码成功回调导致多次执行返回操作。问题根源在于emitResult()方法中使用setTimeout延时返回，当快速连续扫码时会排队执行多个navigateBack()，造成连续退栈。解决方案是添加一次性锁机制，确保扫码成功逻辑只执行一次，可通过在NativeQrScan.vue的handleScan或scanCode.vue的emitResult中加锁实现。建议优化：扫码成功后关闭摄像头（设置canScan=false）以避免重复回调。
2026-04-30 16:11:41
49
原创 UniApp/微信小程序扫码后提示一闪而过？用 onShow 延迟弹窗（Toast/Modal）解决返回页显示太短问题
扫码功能优化方案：解决提示信息闪退问题。当扫码后立即返回上一页时，当前页面的提示信息（如Toast）会因页面销毁而无法完整显示。解决方案采用延迟提示机制：1. 将接口返回的状态信息暂存至pendingToastMsg变量；2. 在页面onShow生命周期中触发提示显示，并添加setTimeout确保渲染稳定；3. 提示显示后清空缓存。该方法确保用户返回上一页后能完整查看提示信息，提升交互体验。核心代码使用Vue3的ref和uni-app的onShow实现信息暂存与延迟展示。
2026-04-30 16:09:56
239
原创 Cursor 是什么?前端使用
Cursor是一款基于VSCode的智能代码编辑器，集成了AI对话、跨文件编辑和智能补全功能，适合开发者进行日常编码、项目维护和重构工作。它通过@引用功能实现多文件联动，建议打开项目根目录以获得更好的AI支持。核心功能包括Chat对话、多文件编辑Agent、智能补全和内联修改。用户需注意模型选择对任务处理的影响，并通过规则文件规范输出风格。使用时需注重代码自检和测试，避免安全风险。Cursor的价值在于将AI深度集成到开发流程中，但需结合具体任务和规则来发挥最佳效果。
2026-04-19 18:00:06
528
原创 摄像头检测环境光
该代码实现了一个智能二维码扫描组件，主要功能包括：1. 动态检测环境亮度，当光线不足时自动提示开启闪光灯；2. 提供完整的扫码界面，包含扫描框、扫描线动画和操作指引；3. 支持闪光灯手动开关功能；4. 包含亮度检测、相机权限申请、扫码成功回调等完整逻辑。组件采用双阈值检测避免频繁切换UI，并针对不同平台做了兼容处理，适用于各类小程序和H5环境。
2026-04-09 14:02:16
46
原创 小程序云函数 vs 传统前后端分离（阿里云）原理解析
本文对比了微信小程序开发的两种架构模式：微信原生云开发和传统前后端分离部署。微信云开发提供完整的Serverless体系，无需自建服务器，通过云函数直接操作云数据库，且自动完成用户鉴权。开发流程简单，只需编写和部署云函数即可。而传统方式需要自行搭建服务器、实现鉴权和API接口，运维成本较高。腾讯云CloudBase作为Serverless平台，也提供类似功能。总体而言，云开发更适合快速开发的小程序项目，成本低且易于维护。
2026-03-28 23:01:44
375
原创 二维码完整代码
这段HTML代码实现了一个CSS3风格的二维码扫描器界面。主要特点包括：1) 使用线性渐变创建网格背景；2) 中央扫描框采用绿色边框设计；3) 添加了动态扫描线动画效果；4) 四个角落有特殊装饰角标。整体采用绿色科技风格，扫描线通过CSS动画实现上下移动效果，模拟真实的二维码扫描过程。代码结构简洁，仅使用HTML和CSS实现，无需JavaScript。
2026-03-26 14:28:38
34
原创 雷达扫描 + 点击启动 + 模拟 WiFi 扫描结果）
本文展示了一个WiFi雷达扫描的网页界面设计。界面采用深色背景配以蓝绿色元素，包含一个动态雷达扫描动画和WiFi列表显示功能。核心组件包括：1) 雷达动画效果，通过CSS实现波纹扩散和扇形扫描；2) 扫描按钮触发动画和模拟数据获取；3) WiFi列表展示扫描结果，包含信号强度标识。整个设计简洁直观，通过CSS动画和JavaScript交互模拟了真实的WiFi扫描过程。
2026-03-25 10:07:39
39
原创 vue3中台框架解析
摘要： 本文总结了Vue表单校验与组件通信的常用方法。1. 表单校验使用formRef.value.validate()整体校验或validateField('name')单字段校验；2. 子传父通过defineEmits定义事件，父组件监听@事件名；3. 调用子组件方法需用ref并defineExpose导出；4. 新增/编辑共用弹窗，通过id判断操作类型，提交后通过eventBus触发父组件刷新列表。
2026-03-03 11:03:47
199
原创 Tree-shaking 是啥？
文章摘要：Tree-shaking是一种优化技术，能够通过静态分析代码的依赖关系，在打包时只包含实际使用的功能模块。例如在使用Vue时，如果只引入ref功能，打包结果就不会包含整个Vue API，从而显著减小最终打包体积。这种按需引入的方式通过ES模块语法实现，是现代前端工程优化的重要方法。
2026-03-02 15:30:35
128
原创 表格扁平化数据合并
本文实现了一个基于Element Plus的表格组件，用于展示医疗订单数据。主要特点包括： 使用el-table展示分组数据，左侧列（用法、频次、计划时间）通过span-method方法实现跨行合并 右侧操作列（操作、操作人、时间、备注）展示详细记录 支持数据扁平化处理，保留分组索引信息 包含时间格式化功能，优化了表格样式（表头背景、溢出省略等） 采用Vue3的script setup语法和TypeScript类型定义 该组件适用于需要展示分组数据与明细操作记录的场景，如医疗订单跟踪系统。
2026-02-25 10:58:38
132
原创 Element Plus表单验证rules
该代码实现了一个表单验证规则：当repeatType为1（单次）时，周期天数（value）可不填；否则必须填写周期天数，否则报错"请输入周期天数"。通过callback()表示验证通过，callback(new Error("xxx"))表示验证失败。该验证在输入框失去焦点（blur）时触发，确保非单次任务必须设置执行周期。
2026-02-24 15:21:55
182
原创 第二个到d3.js
摘要：本文展示了一个使用D3.js创建的水波式曲线柱状图实现。该图表具有动态波动效果，通过正弦函数模拟水波运动，使柱状图呈现波浪形轮廓。实现特点包括：1) 使用D3的曲线生成器创建波浪效果；2) 添加交互式工具提示显示数值；3) 每2秒随机更新数据并重新渲染；4) 持续动画效果使柱子保持波动状态。图表采用暗色主题设计，包含坐标轴和响应式过渡动画，展示了D3.js在数据可视化中的动态效果实现能力。
2026-02-07 08:00:00
311
原创 第一个d3.js
本文展示了一个使用D3.js实现的曲线柱状图可视化效果，突出了D3.js与ECharts的核心区别在于其高度定制化能力。通过D3.js实现了：1）带平滑曲线的柱状图绘制；2）交互式提示框功能；3）动态数据更新时的过渡动画效果；4）完全自定义的图形渲染方式。该示例特别强调D3.js能够实现ECharts等高级图表库难以完成的特殊可视化效果，通过直接操作SVG元素和精确控制动画过渡，展现了D3.js在数据可视化领域的强大灵活性。
2026-02-06 09:50:30
324
原创 第一个Cesium demo
这是一个使用Cesium库创建3D地球视图的HTML示例代码。主要功能包括：1)初始化Cesium地球视图；2)设置西安的经纬度坐标(108.948024,34.263161)；3)在地图上添加一个红色标记点并标注"西安"文字；4)镜头以2秒动画效果飞向标记点。代码通过CDN引入Cesium库，创建了全屏显示的地图容器，并配置了基本视图控件。
2026-02-06 08:58:28
141
原创 前端怎么知道用户勾选了哪几行？
本文介绍了在后台管理系统中如何通过Element Plus表格实现批量操作选中行的功能。主要步骤包括：1）通过<el-table-column type="selection">添加多选框列；2）使用selection-change事件监听选中变化；3）将选中行数据存入变量；4）通过map和filter提取有效的患者ID。最终实现将选中行ID传递给后端进行批量操作的目的，适用于批量删除、批量出院等常见管理需求。
2026-01-27 12:16:08
255
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人