- 博客(76)
- 收藏
- 关注
RSS订阅原创 从 TRTC Demo 到独立音视频服务：React + TRTC Web SDK 服务化实践
本文以 React + TRTC Web SDK v5 项目实践为案例，讲解如何将实时音视频能力从传统 SDK 集成模式，封装为可被外部业务系统快速接入的 iframe 服务。文章围绕邀请参数生成、音视频发布、远端观看三个服务入口，拆解 URL 参数、TRTC 生命周期、postMessage 通信、浏览器权限、安全设计和部署注意事项，帮助团队构建可复用、低耦合、易维护的 Web 音视频服务化方案。
2026-07-21 15:44:09
388
原创 Windows 双网卡配置教程：WiFi 上网 + 网线直连硬件设备通信
Windows双网卡配置指南：同时上网和直连硬件设备 本文针对Windows 10/11用户提供双网卡配置方案，解决同时连接互联网和直连硬件设备时的网络冲突问题。核心要点： 网络拓扑分离：WiFi负责上网（自动获取IP），有线网卡专用于连接硬件（手动设置与硬件同网段的静态IP，不设网关） 关键配置：有线网卡必须留空默认网关和DNS，避免干扰默认路由 优先级设置：通过调整接口跃点数（WiFi设为10，有线设为50）确保上网流量优先走无线 验证步骤：检查IP配置→测试硬件连通性（ping）→验证应用端口→确认上
2026-07-06 17:47:45
618
原创 Vue3 + Electron 实战：从 Web 项目到 Windows .exe 安装包完整指南
Vue3 项目结合 Electron 桌面化面临的核心问题与解决方案： 桌面化必要性 浏览器运行与 Electron 不同：需处理多窗口、本地文件加载（file://）、.exe交付等场景，Electron 补齐了桌面端能力（如窗口控制、多屏适配）。 关键问题与解决方案 白屏问题：因绝对路径资源加载失败，需在 Vite 配置 base: './' 改为相对路径。 路由失效：file:// 环境无服务端重定向，推荐使用 hash 路由，主进程通过 loadFile 的 hash 参数打开页面。 API 分裂：
2026-07-06 17:20:31
482
原创 React接入WebRTC实时视频实践
本文介绍了在React中使用WebRTC实现实时视频播放的核心流程，包括连接建立、SDP协商、视频流接收与渲染等关键步骤。文章详细解析了RTCPeerConnection的创建、Offer/Answer交换机制，以及如何将媒体流绑定到video元素进行播放。通过代码示例展示了WebRTC在React中的完整实现链路，包括状态管理、会话复用和组件渲染等模块的协同工作方式。
2026-06-12 14:38:32
445
4
原创 MentorPi A1 底盘接入开发实践：让自研Web系统接管机器人底盘
ROS2机器人控制接口设计与接入实践 本文探讨了如何在不重写底盘控制逻辑的前提下，通过ROS2标准化接口实现Web控制端对MentorPi A1机器人底盘的有效接管。文章首先分析了阿克曼底盘的运动特性与控制需求，提出基于ROS2的分层架构设计，将Web控制端与硬件解耦。详细解析了关键ROS2 Topic（如/cmd_vel、/odom）、Service和参数配置，特别说明了底盘控制、里程计、激光雷达和视频流的数据通路。针对阿克曼底盘特性，提供了基于linear.x+angular.z的控制协议设计范例和具体
2026-06-02 16:21:51
563
原创 AI Agent 核心概念全景图：Prompt、RAG、微调、Tool Call、状态机、Workflow 与 MCP
本文从工程落地视角系统梳理 AI Agent 的核心概念，重点讲清 Prompt、RAG、微调、Tool Call、状态机、Workflow 与 MCP 各自解决什么问题、边界在哪里，以及它们在真实系统中如何协作。文章通过架构图、流程图和运维分析场景示例，帮助读者建立一张完整的 Agent 能力地图，避免将知识检索、行为固化、任务编排和工具接入混为一谈，为后续做技术选型、系统设计和项目落地提供清晰参考。
2026-04-28 16:02:16
710
原创 深入理解 MCP（Model Context Protocol）：从实例看懂下一代 AI 工具协议
MCP（Model Context Protocol）是连接AI模型与外部工具的标准通信协议，旨在解决AI工具生态中的接口碎片化问题。它通过标准化工具描述、调用格式和结果返回，实现高效的多工具协同。MCP架构包含大语言模型、网关层和能力服务单元，支持企业级安全治理、审计合规和权限控制。典型案例包括GitHub版本查询、Jira工单创建等。MCP不仅提升AI执行能力，还简化了工具扩展流程，是下一代AI系统落地的关键协议。
2026-04-23 18:35:02
545
原创 从零搭建可落地的 RAG 基座：概念、架构设计、工程实现与实践复盘
本文基于真实项目经验，提出了一种工程化的RAG（检索增强生成）落地策略。不同于直接构建完整问答系统，作者主张优先搭建独立的KB-RAG基座，将文档上传、解析、切片、向量化、检索等核心环节拆解为可独立验证的模块。项目采用NestJS+Next.js架构，通过异步工作流处理文档入库，并设计了专门的调试页面验证检索效果。文章强调RAG的真正价值在于让系统基于私有知识库生成可靠答案，而非简单接入大模型。文中详细展示了技术架构、数据流程和关键实现细节，包括混合使用ORM与原生SQL管理向量数据的实用方案，为团队实施R
2026-04-23 17:17:21
519
原创 AI 聊天中的流式渲染 Markdown 实现：代码高亮与 Mermaid 图表
本文基于一个真实的 Vue 3 项目，梳理了 AI 聊天场景下 Markdown 富内容渲染的完整落地方案。文章重点不是“接一个库”，而是如何把 markdown-it、DOMPurify、highlight.js 和 Mermaid 组合成一条稳定的工程链路：先解析 Markdown，再做安全清洗，随后通过 v-html 挂载到页面，并在挂载后补充代码复制、引用联动和 Mermaid 图表渲染。文中结合真实组件与工具函数，详细说明了代码块高亮、语言识别、图表占位与回退策略，以及 v-html 场景下样式和
2026-04-15 11:05:51
646
原创 AI 聊天中的流式渲染 Markdown实现：代码高亮与 Mermaid 图表
本文基于一个真实的 React + TypeScript 项目，梳理 AI 聊天场景下 MarkdownMessage 的完整实现链路：上游如何通过 fetch + ReadableStream 消费 SSE 流式响应，并将文本稳定追加到 assistant 消息；下游如何使用 react-markdown、remark-gfm 与 rehype-sanitize 完成安全的 Markdown 渲染；代码块又如何借助自定义 CodeBlock 组件实现语言识别、语法高亮和复制功能。同时，文章也覆盖了 Me
2026-04-14 18:23:03
569
原创 Flutter 录制视频+大文件上传 MinIO + NodeJS落库
本文介绍了视频上传功能的技术实现方案，针对移动端和一体机终端常见的三大痛点：文件体积大、上传链路长、接口契约漂移。基于Flutter+Node.js项目实践，提出直传MinIO对象存储的方案，避免应用服务器中转压力。前端负责视频录制、切片上传和状态管理，后端处理预签名、状态追踪和元数据落库。方案采用multipart分片上传，确保大文件传输稳定性，并通过前后端严格契约和持久化状态记录保障数据一致性。详细拆解了从录制到落库的完整流程，包括技术选型、模块分工和关键代码结构。
2026-04-09 16:39:46
504
原创 AI 聊天流式交互基础：SSE、EventSource 与 ReadableStream
本文围绕 AI 聊天中的流式交互展开，系统梳理了 SSE、EventSource 与 fetch + ReadableStream 的概念、区别和适用场景，解释它们分别解决“如何返回”“如何接收”“如何掌控整条链路”的问题。文章进一步拆解真实业务中的前后端协作流程，说明后端如何持续返回增量数据，前端如何解析 chunk、维护 buffer，并把内容持续追加到同一条消息上。同时还覆盖停止生成、断线重试、断点续接等关键能力，并给出面向实际项目的选型建议，帮助开发者构建更稳定、可控的流式聊天体验。
2026-04-08 17:41:46
750
原创 React Native 双端一体工程，如何实现分端运行与分端打包？
本文探讨了React Native项目中实现"分端打包"的工程实践方案。针对需要同时支持手机端和设备端运行的应用场景，文章提出了一套完整的双端工程链路，重点解决以下核心问题： 工程架构设计： 采用单一仓库管理两套运行形态 通过环境变量区分不同端模式 复用公共代码同时避免两端污染 关键技术实现： 运行期分端：通过.env文件定义模式开关，动态选择JS入口和应用壳 构建期分端：利用Gradle flavor生成不同APK，处理原生层差异 Metro配置：按需打包当前端所需代码 工程实践： 提
2026-04-07 18:29:23
552
原创 像ChatGPT一样逐字输出：React + TypeScript 流式接收与“打字机”效果实现方案
本文介绍了一种在React+TypeScript项目中实现AI助手流式响应与打字机效果的技术方案。针对用户期望实时看到模型思考过程的需求，文章提出双核心解决方案：1) 通过fetch+ReadableStream读取SSE-like行流数据，处理chunk边界与JSON解析；2) 使用纯函数决策器控制打字机节奏，实现逐字渐显效果。方案包含完整的模块化架构，包括流式解析工具、打字机算法和React状态管理，并支持结构化结果的增量输出。核心代码展示了如何拼接buffer、处理半行JSON，以及通过20ms间隔、
2026-04-03 16:38:21
551
原创 从 dev 到 prod：Web 项目请求接口配置治理完全指南
本文梳理了一个React+TypeScript项目中多环境接口配置的实践方案。项目涉及4类接口：自研HTTP、自研WebSocket、兼容WebSocket和第三方HTTP，每种都有独立的封装层。关键改造是将生产环境地址从固定主机改为运行时动态拼接，新增了地址解析层统一处理HTTP/WS地址。开发环境通过Vite代理转发请求，而生产环境需要前端自行拼接绝对地址或依赖反向代理。文章详细介绍了动态地址拼接的实现细节，包括使用location.hostname而非host来支持固定端口配置，以及HTTP/WS地址
2026-04-02 17:43:16
410
原创 React + Node.js 实战：用豆包端到端实时语音大模型 API 落地web纯语音助手
本文介绍了一个基于React+Next.js和Node.js+NestJS的纯语音实时助手项目。前端采用状态机驱动设计，专注于实时语音交互体验，包含麦克风采集、音频播放和WebSocket通信模块。后端作为代理层连接豆包语音API，处理协议转换、状态管理和数据持久化。项目采用三层架构（浏览器-业务后端-语音API），通过独立路由和精简UI确保交互流畅性，特别适合展厅、驾驶舱等场景。关键技术包括音频Worklet处理、WebSocket状态同步和实时语音协议转换，实现了从语音采集到TTS播报的完整闭环。
2026-04-01 16:15:31
1241
原创 从“网页感”到“原生感”：Web 端适配触屏交互的完整解决方案
本文针对触屏终端开发中的网页适配问题，提出了一套工程化解决方案。通过分析浏览器默认交互与终端需求的差异，建立了分层治理体系：全局样式层处理误选中、滚动条隐藏等基础问题；全局触摸层管理手势识别、长按菜单等事件；受控滚动层实现稳定滚动体验。方案特别强调输入控件白名单机制和Overlay锁滚策略，确保在收紧全局交互的同时保留必要原生功能。最终实现目标是消除网页感，打造接近原生应用的触屏体验。文中还提供了浏览器全屏快捷键等实用技巧，并采用Mermaid图表清晰展示技术架构。
2026-03-17 16:34:16
599
原创 深入解析 WebSocket 语音交互：状态流转、表情联动与音频上下行处理实践
本文介绍了基于WebSocket的语音交互系统实现方案。系统采用文本控制消息与二进制音频帧并行的设计，通过状态机管理连接和交互流程。前端包含连接管理、音频处理和状态展示三个核心模块，分别负责WebSocket通信、音频编解码/采集/播放，以及UI状态反馈。协议设计上，文本消息处理控制逻辑，二进制帧传输Opus音频数据。系统实现了完整的语音交互链路，包括连接握手、语音采集、ASR识别、LLM推理、TTS播报等环节，并支持中断机制。该方案通过分层架构实现了功能解耦，在Flutter技术栈上整合了多种音频处理库，
2026-03-10 11:01:59
623
原创 深入解析机器人语音链路中的 AEC：系统回声消除与软件门控的组合实践
本文介绍了一套机器人语音交互中的声学回声消除（AEC）组合方案。该方案采用三层架构：底层使用Android系统级AEC进行初步处理；中层通过Flutter/Dart缓存下行音频作为参考信号，进行相关性判定与门控；上层结合近讲直通、远讲突增等策略优化打断体验。关键参数集中配置，便于调优。系统级AEC优先采用VOICE_COMMUNICATION模式，软件AEC则通过环形缓冲存储参考音频，利用相关性检测拦截残余回声。整体设计兼顾算法效果、设备兼容性和交互体验，有效解决了机器人"自言自语"问题
2026-03-10 10:28:07
526
原创 Python 文件解析： Excel / Word / PDF 的解析、处理、预览与下载
文件处理技术方案概述 本文介绍了一个通用的文件处理技术方案，支持多种文件格式（Excel、Word、PDF）的上传、解析、预览、编辑和下载功能。方案采用前后端分离架构： 后端（Python）： 使用FastAPI提供API接口 按文件扩展名路由到不同解析器 核心依赖：openpyxl（Excel）、python-docx（Word）、pymupdf（PDF） 可选OCR支持（pytesseract/paddleocr） 前端： 预览组件：xlsx（Excel）、mammoth（Word） 编辑组件：reac
2026-02-24 17:23:39
1597
原创 React Native项目（Android ）集成虹软 ArcFace（人脸识别增值版 5.0 Java）
RN+Android本地人脸识别优化方案 本文针对RN+Android本地人脸识别开发中的常见痛点，提出了一套系统化解决方案： 配置优化：采用"配置文件优先+接口兜底"策略，解决密钥硬编码问题，提升安全性和运维灵活性 架构分层：明确划分职责边界，RN层负责流程控制，Kotlin层专注引擎处理，实现代码解耦 故障预防：内置超时机制、错误码体系、脱敏日志和缓存兜底，显著提升系统可靠性 方案亮点： 完整的Mermaid流程图展示识别链路 原生层模块化设计（6个核心Kotlin类） RN侧三层封
2026-02-24 16:24:25
1311
原创 自动化“联系我们”：纯前端接入飞书群机器人消息通知实践
本文介绍了一种纯前端实现的"联系我们"表单自动化通知方案。该方案通过前端直接调用飞书群机器人Webhook，实现用户提交表单后实时推送消息到业务群，无需后端参与。 方案核心特点： 前端完成表单校验和消息组装 直接POST请求飞书机器人Webhook 成功跳转提示页，失败展示错误信息 适用于轻量级线索收集场景 技术实现要点： 使用Vue组件处理表单逻辑 通过feishu.js工具类构造消息体 密钥文件单独管理并忽略提交 完整流程包含校验、发送、成功/失败处理 该方案具有接入简单、链路短的优
2026-02-12 13:37:00
947
原创 React Native 集成 TRTC实时音视频实战指南
React Native 侧通过 SDK 采集/渲染音视频流，业务层再结合 WebSocket 指令、机器人硬件事件实现在线巡检与客服会话。可以将这条链路理解为"配置 → 权限 → 入会 → 音视频渲染 → 任务控制"的闭环：前端直接从配置文件 读取 sdkAppId、roomId 与 userSig；在加入房间前，统一请求摄像头与麦克风权限；入会成功后由统一的 Hook 负责维护用户列表、摄像头、扬声器以及远端首帧渲染；当 WebSocket 推送机器人任务或对端挂断时，组件即可根据事件快速切换状态。
2025-11-21 15:17:30
668
5
原创 讯飞 OCR 图片识别与解析完整指南（python）
本文档提供了接入讯飞OCR图片识别服务的完整指南，10分钟即可实现智能解析。主要内容包括： 开通服务获取API密钥，配置环境变量； 安装依赖启动后端服务，通过API上传图片测试识别； 解析返回数据结构（文本和表格），表格以三维数组形式存储； 配置解析规则提取关键信息，支持多规则并行执行和自动评分排序； 提供常见问题排查和进阶扩展建议。适用于工时单识别、票据提取等场景，覆盖从接入到解析的全流程。
2025-11-14 11:27:35
1748
原创 React Native App 图表绘制完整实现指南
本文介绍了在React Native中实现数据可视化图表的完整方案。该方案基于victory-native图表库，支持折线图、柱状图、双折线图等多种图表类型，并具备交互功能（点击、Tooltip）、自定义样式和性能优化。文章详细讲解了技术选型、架构设计、核心组件实现(包括折线图、柱状图、双折线图)以及具体代码实现步骤。该方案适合需要展示和分析数据的移动应用场景，提供响应式设计和高效的渲染性能。
2025-11-06 11:50:47
998
原创 React Native App 自动检测版本更新完整实现指南
本文介绍了React Native应用中实现自动版本检测和更新的完整方案。该方案采用分层架构设计，包含VersionManager核心工具类、useVersionCheck Hook和VersionUpdateDialog UI组件三大模块。功能上支持自动检查版本更新、强制更新判断、智能重试机制、应用状态监听等核心能力，并提供美观的用户界面。实现步骤包括创建版本API服务、开发版本管理工具、构建检查Hook和更新对话框、最后集成到应用入口。文章还提供了版本API服务和VersionManager工具类的详细
2025-11-04 16:31:49
836
原创 React Native 蓝牙开发实践：从权限配置到设备连接完整指南
React Native实现BLE蓝牙设备接入需要分层架构设计，分为Android原生层、RN桥接层、蓝牙管理器封装层和应用层。关键点包括：处理Android不同版本的权限差异（Android 12+需要新权限BLUETOOTH_SCAN/CONNECT，10-11需位置权限），原生模块实现扫描连接等核心功能，运行时动态权限检查，以及通过事件系统实现原生与JS层通信。
2025-11-03 17:04:43
1208
原创 React Native 项目中 WebSocket 的完整实现方案【完善版】
WebSocket 是一种网络通信协议，它允许客户端和服务器之间建立持久的双向连接。与传统的 HTTP 请求-响应模式不同，WebSocket 连接一旦建立，双方都可以主动发送数据，无需等待对方的请求。这就像是建立了一条"数字高速公路"🛣️，数据可以双向快速流动！WebSocket 协议最初是为了解决 Web 应用中实时通信的需求而设计的。在 WebSocket 出现之前，开发者通常使用轮询（Polling）或长轮询（Long Polling）来实现实时通信，但这些方法就像是"不停地敲门问有没有新消息
2025-10-18 10:46:48
1015
1
原创 Uniapp 微信小程序打包分包
在 uniapp 开发跨端适配微信小程序时，经常会遇到打包超过微信标准大小的情况，这个时候就无法上传成功、发布小程序，于是就需要实现分包。微信小程序包核心要求： 1. 主包和分包分别不能超过2MB。2. 总包不使用分包时，不能超过2MB；使用分包时，不超过30MB。3. 静态不能超过200KB。 4. tabBar的页面必须在主包内。与此对应的，可以考虑一些应对措施，大的静态资源从服务器请求而不是本地存储，小程序代码按照业务逻辑划分为多个独立的子包，在构建时打包成不同的分包，用户在使用时按需加载。
2025-07-29 17:26:44
1216
原创 uniapp 自定义组件库内样式 微信小程序端不生效解决
摘要：Uniapp+Wot UI跨端开发中的样式隔离解决方案 在Uniapp+Vue3+Wot UI开发中，微信小程序端的样式隔离会导致自定义组件样式失效。通过配置defineOptions中的styleIsolation: 'shared'并配合:deep()选择器，可解决H5和小程序端样式不一致的问题。文章详细介绍了该方案的技术实现，包括核心代码、应用效果和完整组件代码，同时扩展说明了defineOptions和styleIsolation的相关知识。该方案有效保证了跨端开发中UI组件样式的一致性。
2025-07-23 20:14:20
2309
1
原创 CSS flex布局 列表单个元素点击 本行下插入详情独占一行
在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表 展示详情，可以考虑 flex 布局 + position relative 定位。
2025-02-16 21:13:44
1467
原创 uniapp 微信小程序获取当前环境（开发、体验版、正式）
在实际开发过程中，会需要根据当前的版本切换到对应的环境（测试、正式），如果每次开发者手动改路径，出错率比较高，于是就需要自动适配。（但是微信审核的时候，可能会因为不是正式版本的数据而驳回）。自定义环境配置 package.json、uni.getAccountInfoSync()、wx.getAccountInfoSync()、__wxConfig.envVersion。第一种方式，配置好后，即可自动切换数据。剩下的三种都是根据获取的环境进行判断 导出，其他地方进行使用即可。
2025-01-21 10:42:41
2685
原创 Uniapp 微信小程序检测新版本并更新
在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。主要会使用到uni.canIUse(‘getUpdateManager’) 、uni.getUpdateManager() 、updateManager的onCheckForUpdate()、onUpdateReady() 、applyUpdate() 、onUpdateFailed()。
2024-12-22 13:56:55
2314
原创 Uniapp 微信小程序获取微信昵称、头像
因实际需求，需要本小程序支持用户修改默认的头像、用户名，其中还需支持获取微信账号的头像、昵称。原本可直接获取昵称、头像的 wx.getUserInfo与 open-type=“getUserInfo” 获取用户个人信息（头像、昵称、性别与地区），权限已经被微信收回。具体可查看微信官方文档，但是微信单独提供了接口来支持替换此功能为了页面显示效果和功能实现，需要使用 button包裹住头像，button 配置 相关属性，chooseavatar 内接收、处理图片路径。
2024-12-08 14:36:01
4469
原创 Uniapp 微信小程序分享 - 自定义绘制分享图片
因实际需求，需要实现微信小程序自定义分享，根据当前数据动态生成（绘制）分享卡片的图片。为了实现绘制分享卡片，核心需要使用。先来看一下效果：注意：绘制图片必须需要专门使用获取图片的path后，再使用绘制，否则直接用图片路径绘制不成功，会成默认的分享图。
2024-12-04 21:39:01
2671
2
原创 Uniapp 微信小程序分享 - 自定义卡片内容 + 参数携带 接收
因实际需求，需要实现微信小程序自定义分享（自定义分享卡片标题、图片、小程序路径、参数等）。为了实现自定义分享，需要关于内入参、出参，可查看官方文档。。下面分享配置分两种情况：普通情况（纯手写分享配置）、使用了uview-plus mixin mpShare情况。因本小程序使用了uview-plus组件，其内部封装了 share对象，外部 onShareAppMessage 内返回的配置对象不会生效，需要设置uview-plus内的share对象。
2024-12-04 19:23:05
1911
原创 Uniapp 微信小程序内打开web网页
实际业务中有时候会需要在本微信小程序内打开web页面，这时候可以封装一个路由页面专门用于此场景。在路由跳转的时候携带路由参数，拼接上web url，接收页面进行参数接收即可。
2024-12-01 14:05:02
1582
原创 Uniapp 使用自定义字体
uniapp 使用自定义字体。为了更好的还原UI图片效果，往往需要使用特殊字体，引入字体包。因实际业务运行平台在微信小程序上，对发布包的项目文件大小有限制，项目中某些比较大的静态资源需要放在服务器上来远程加载，比如图片、字体包。
2024-12-01 13:43:36
1205
原创 Uniapp 微信小程序跳转第三方小程序（全屏、半屏）
因实际需求，需要实现从本小程序跳转至第三方小程序，根据业务场景会有全屏、半屏的跳转，此处记录如何实现。因为uniapp此类方法都是基于原生微信方法实现的，可直接根据微信官方文档查阅使用即可。
2024-12-01 12:50:41
3464
2
原创 Mac hombrew安装python zsh: command not found: python
最近在配置新电脑的开发环境，安装python后，python命令会不生效，提示zsh: command not found: python，于是整理出这篇博客。从开始安装python到配置路径、配置别名，全部包含。
2024-10-20 12:29:47
1106
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人