- 博客(268)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
2032
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2584
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1357
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
3048
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
3183
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
5134
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
5794
原创 加载glb模型html
这篇HTML文档实现了一个基于Three.js的GLB模型预览器，主要功能包括： 核心功能： 支持加载本地或远程GLB/GLTF格式3D模型 提供交互式3D视图操作（旋转/缩放/平移） 自动调整相机位置适应模型尺寸 显示加载进度条和状态信息 技术特点： 使用Three.js核心库及GLTFLoader扩展 包含轨道控制器(OrbitControls)实现用户交互 响应式布局适应不同屏幕尺寸 内置环境光、方向光和半球光照明系统 使用说明： 默认加载远程GLB模型 本地文件模式下需手动选择模型文件 界面显示加载
2026-06-03 18:50:43
44
原创 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
165
原创 流程图demo
这篇文章介绍了一个AGV任务流程可视化Demo的实现，主要特点包括： 交互功能：支持节点拖拽、画布平移缩放、节点选中切换等操作 可视化设计：采用主节点+子节点的树状结构，主节点显示绿色边框，子节点显示蓝色边框 状态展示：通过不同颜色的徽章区分任务状态（已完成、执行中、未执行等） 数据呈现：每个节点显示任务名称、时间、操作者、位置等详细信息 响应式布局：适配不同屏幕尺寸，支持平滑的动画过渡效果 该Demo完整模拟了AGV从任务下发到完成的整个流程，包含5个主流程节点和3个子节点分支，实现了工业场景下任务流程的
2026-05-25 10:32:14
163
原创 刻度尺纯代码
这篇文章介绍了一个使用纯HTML/CSS/JS实现的横向刻度尺组件。该组件具有以下特点： 通过灰色区域左右拖动实现交互 中间蓝色竖线标识当前刻度值 刻度范围0-300（对应0.0-30.0mmol/L） 包含三种高度的刻度线（主刻度、次刻度和小刻度） 每10个单位显示一个数值标签 实时显示当前内部刻度和换算后的mmol/L值 采用响应式设计，最大宽度420px 使用scroll事件监听实现数值更新
2026-05-06 09:42:11
213
原创 闪退问题总结（非 H5 扫码后“闪一下就退出/退回多层”）
扫码页面出现“闪退”现象是由于连续触发扫码成功回调导致多次执行返回操作。问题根源在于emitResult()方法中使用setTimeout延时返回，当快速连续扫码时会排队执行多个navigateBack()，造成连续退栈。解决方案是添加一次性锁机制，确保扫码成功逻辑只执行一次，可通过在NativeQrScan.vue的handleScan或scanCode.vue的emitResult中加锁实现。建议优化：扫码成功后关闭摄像头（设置canScan=false）以避免重复回调。
2026-04-30 16:11:41
35
原创 UniApp/微信小程序扫码后提示一闪而过？用 onShow 延迟弹窗（Toast/Modal）解决返回页显示太短问题
扫码功能优化方案：解决提示信息闪退问题。当扫码后立即返回上一页时，当前页面的提示信息（如Toast）会因页面销毁而无法完整显示。解决方案采用延迟提示机制：1. 将接口返回的状态信息暂存至pendingToastMsg变量；2. 在页面onShow生命周期中触发提示显示，并添加setTimeout确保渲染稳定；3. 提示显示后清空缓存。该方法确保用户返回上一页后能完整查看提示信息，提升交互体验。核心代码使用Vue3的ref和uni-app的onShow实现信息暂存与延迟展示。
2026-04-30 16:09:56
207
原创 Cursor 是什么?前端使用
Cursor是一款基于VSCode的智能代码编辑器，集成了AI对话、跨文件编辑和智能补全功能，适合开发者进行日常编码、项目维护和重构工作。它通过@引用功能实现多文件联动，建议打开项目根目录以获得更好的AI支持。核心功能包括Chat对话、多文件编辑Agent、智能补全和内联修改。用户需注意模型选择对任务处理的影响，并通过规则文件规范输出风格。使用时需注重代码自检和测试，避免安全风险。Cursor的价值在于将AI深度集成到开发流程中，但需结合具体任务和规则来发挥最佳效果。
2026-04-19 18:00:06
485
原创 摄像头检测环境光
该代码实现了一个智能二维码扫描组件，主要功能包括：1. 动态检测环境亮度，当光线不足时自动提示开启闪光灯；2. 提供完整的扫码界面，包含扫描框、扫描线动画和操作指引；3. 支持闪光灯手动开关功能；4. 包含亮度检测、相机权限申请、扫码成功回调等完整逻辑。组件采用双阈值检测避免频繁切换UI，并针对不同平台做了兼容处理，适用于各类小程序和H5环境。
2026-04-09 14:02:16
37
原创 小程序云函数 vs 传统前后端分离（阿里云）原理解析
本文对比了微信小程序开发的两种架构模式：微信原生云开发和传统前后端分离部署。微信云开发提供完整的Serverless体系，无需自建服务器，通过云函数直接操作云数据库，且自动完成用户鉴权。开发流程简单，只需编写和部署云函数即可。而传统方式需要自行搭建服务器、实现鉴权和API接口，运维成本较高。腾讯云CloudBase作为Serverless平台，也提供类似功能。总体而言，云开发更适合快速开发的小程序项目，成本低且易于维护。
2026-03-28 23:01:44
324
原创 二维码完整代码
这段HTML代码实现了一个CSS3风格的二维码扫描器界面。主要特点包括：1) 使用线性渐变创建网格背景；2) 中央扫描框采用绿色边框设计；3) 添加了动态扫描线动画效果；4) 四个角落有特殊装饰角标。整体采用绿色科技风格，扫描线通过CSS动画实现上下移动效果，模拟真实的二维码扫描过程。代码结构简洁，仅使用HTML和CSS实现，无需JavaScript。
2026-03-26 14:28:38
28
原创 雷达扫描 + 点击启动 + 模拟 WiFi 扫描结果）
本文展示了一个WiFi雷达扫描的网页界面设计。界面采用深色背景配以蓝绿色元素，包含一个动态雷达扫描动画和WiFi列表显示功能。核心组件包括：1) 雷达动画效果，通过CSS实现波纹扩散和扇形扫描；2) 扫描按钮触发动画和模拟数据获取；3) WiFi列表展示扫描结果，包含信号强度标识。整个设计简洁直观，通过CSS动画和JavaScript交互模拟了真实的WiFi扫描过程。
2026-03-25 10:07:39
29
原创 vue3中台框架解析
摘要： 本文总结了Vue表单校验与组件通信的常用方法。1. 表单校验使用formRef.value.validate()整体校验或validateField('name')单字段校验；2. 子传父通过defineEmits定义事件，父组件监听@事件名；3. 调用子组件方法需用ref并defineExpose导出；4. 新增/编辑共用弹窗，通过id判断操作类型，提交后通过eventBus触发父组件刷新列表。
2026-03-03 11:03:47
192
原创 Tree-shaking 是啥？
文章摘要：Tree-shaking是一种优化技术，能够通过静态分析代码的依赖关系，在打包时只包含实际使用的功能模块。例如在使用Vue时，如果只引入ref功能，打包结果就不会包含整个Vue API，从而显著减小最终打包体积。这种按需引入的方式通过ES模块语法实现，是现代前端工程优化的重要方法。
2026-03-02 15:30:35
122
原创 表格扁平化数据合并
本文实现了一个基于Element Plus的表格组件，用于展示医疗订单数据。主要特点包括： 使用el-table展示分组数据，左侧列（用法、频次、计划时间）通过span-method方法实现跨行合并 右侧操作列（操作、操作人、时间、备注）展示详细记录 支持数据扁平化处理，保留分组索引信息 包含时间格式化功能，优化了表格样式（表头背景、溢出省略等） 采用Vue3的script setup语法和TypeScript类型定义 该组件适用于需要展示分组数据与明细操作记录的场景，如医疗订单跟踪系统。
2026-02-25 10:58:38
125
原创 Element Plus表单验证rules
该代码实现了一个表单验证规则：当repeatType为1（单次）时，周期天数（value）可不填；否则必须填写周期天数，否则报错"请输入周期天数"。通过callback()表示验证通过，callback(new Error("xxx"))表示验证失败。该验证在输入框失去焦点（blur）时触发，确保非单次任务必须设置执行周期。
2026-02-24 15:21:55
173
原创 第二个到d3.js
摘要：本文展示了一个使用D3.js创建的水波式曲线柱状图实现。该图表具有动态波动效果，通过正弦函数模拟水波运动，使柱状图呈现波浪形轮廓。实现特点包括：1) 使用D3的曲线生成器创建波浪效果；2) 添加交互式工具提示显示数值；3) 每2秒随机更新数据并重新渲染；4) 持续动画效果使柱子保持波动状态。图表采用暗色主题设计，包含坐标轴和响应式过渡动画，展示了D3.js在数据可视化中的动态效果实现能力。
2026-02-07 08:00:00
308
原创 第一个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
319
原创 第一个Cesium demo
这是一个使用Cesium库创建3D地球视图的HTML示例代码。主要功能包括：1)初始化Cesium地球视图；2)设置西安的经纬度坐标(108.948024,34.263161)；3)在地图上添加一个红色标记点并标注"西安"文字；4)镜头以2秒动画效果飞向标记点。代码通过CDN引入Cesium库，创建了全屏显示的地图容器，并配置了基本视图控件。
2026-02-06 08:58:28
136
原创 前端怎么知道用户勾选了哪几行？
本文介绍了在后台管理系统中如何通过Element Plus表格实现批量操作选中行的功能。主要步骤包括：1）通过<el-table-column type="selection">添加多选框列；2）使用selection-change事件监听选中变化；3）将选中行数据存入变量；4）通过map和filter提取有效的患者ID。最终实现将选中行ID传递给后端进行批量操作的目的，适用于批量删除、批量出院等常见管理需求。
2026-01-27 12:16:08
246
原创 Vue3 前端实战：用 Day.js 处理时间 + el-tag 条件渲染状态标签
本文介绍了在医疗管理系统中使用Vue+Element Plus处理患者信息的两种关键技术：Day.js时间库和el-tag条件渲染。Day.js简化了时间处理，支持格式化、比较等操作，便于模板直接使用；el-tag通过v-if条件渲染实现不同状态的颜色区分。两者结合可优雅处理入院时间、状态显示等需求，提升代码可读性和维护性，适用于医疗、排班等需要时间判断和状态展示的系统开发。
2026-01-20 07:00:00
551
原创 博客原代码纯前端直接跑
PureBlog是一个响应式博客管理系统，支持桌面和移动端自适应。主要功能包括：1) 响应式布局，在移动端自动切换为抽屉式侧边栏；2) 文章管理（创建、编辑、导入导出）；3) Markdown内容支持；4) 标签分类和搜索功能；5) 暗黑/明亮主题切换；6) 管理员登录系统。采用纯前端实现，数据存储在localStorage中，包含示例文章展示移动端适配效果。
2026-01-15 09:34:46
59
原创 uniapp+动态设置顶部导航栏使用详解
指定，也可以在运行时通过 API 动态修改。运行时修改常用于：根据路由参数动态显示标题、异步获取数据后生成标题、国际化（i18n）场景、或者同一页面在不同情境下要显示不同标题时使用。可自行封装为 Promise 以便在 async/await 逻辑中使用。回调参数：与其它 uni 接口一致，支持 success/fail/complete 三个回调。在 uni-app 中，页面标题（导航栏中间显示的文字）既可以在编译期通过。title：目标标题字符串（各平台可能会在显示长度上做截断或调整）。
2026-01-14 15:24:38
166
原创 单点登录总结速通
单点登录(SSO)通过统一身份认证中心(IdP)实现多系统免登录。用户首次登录时，IdP下发HttpOnly安全Cookie，后续访问其他系统时浏览器自动携带该Cookie完成认证。关键点包括：1) Cookie仅在同域名下自动携带，避免跨站劫持；2) 采用一次性code换取token机制确保安全性；3) 必须存在客户端管理系统控制接入权限，防止未授权系统获取登录凭证。SSO通过集中认证和浏览器自动处理Cookie实现了便捷安全的登录体验。
2026-01-13 08:00:00
54
原创 单点登录（SSO）的正确理解与实现
本文介绍了单点登录（SSO）的核心概念与实现要点。SSO的本质是将登录功能集中到统一身份中心（IdP），业务系统只需消费身份凭证而非自行认证。文章澄清了常见误区：SSO不是简单的Cookie共享或OAuth2授权，并详细解析了标准SSO流程中身份中心与业务系统的交互机制。重点指出了三大实现陷阱：业务系统存储密码、前端长期保存Token、JWT校验缺失，同时强调前端应仅负责跳转和回调传递。最后探讨了单点登出的多种方案组合，指出SSO成功的关键在于登录职责的集中化和各系统对身份中心的统一信任。
2026-01-12 17:36:21
836
原创 身份证号脱敏的正确实现
摘要： 在 Uni-app/Vue 中实现身份证号脱敏时，需注意避免常见错误，如对非字符串使用 slice 或将带参函数误用为 computed。正确做法是：列表或动态数据使用 methods 定义脱敏函数（支持传参和空值保护），单对象展示可用 computed（依赖响应式状态）。核心原则是：computed 用于状态派生值，methods 处理带参逻辑。医疗/金融等场景需确保展示层脱敏（如“前6后4+*”），同时保留原始数据用于交互。
2026-01-12 16:53:50
505
原创 Vue3 实现后台管理系统跳转大屏自动登录功能
文章摘要： 本文介绍了后台管理系统一键跳转大屏页面并自动登录的实现方案。通过window.open打开大屏窗口，利用postMessage跨窗口通信传递登录凭证，结合Vue3的Pinia状态管理持久化登录状态。关键步骤包括：1）管理端定时发送加密凭证；2）大屏端监听消息并校验；3）调用登录接口后更新状态；4）通过动态DOM实现全局Loading效果。该方案解决了跨系统重复登录问题，提升用户体验，代码示例包含完整的前端实现与兼容性处理。（150字）
2026-01-05 15:28:56
475
原创 常见前端面试题：浏览器缓存机制（通俗版）
浏览器缓存方式对比：Cache-Control（设置缓存时间，优先级最高）、Expires（设置过期时间，较老方式）、ETag（文件唯一标识）和Last-Modified（文件修改时间）。前两者控制缓存有效期，后两者用于服务器验证缓存是否有效（返回304状态码时使用缓存）。静态资源适合完全缓存，动态资源需服务器配合实现协商缓存。
2025-12-22 17:36:23
671
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人