- 博客(64)
- 收藏
- 关注
RSS订阅原创 React Native 双端一体工程，如何实现分端运行与分端打包？
本文探讨了React Native项目中实现"分端打包"的工程实践方案。针对需要同时支持手机端和设备端运行的应用场景，文章提出了一套完整的双端工程链路，重点解决以下核心问题： 工程架构设计： 采用单一仓库管理两套运行形态 通过环境变量区分不同端模式 复用公共代码同时避免两端污染 关键技术实现： 运行期分端：通过.env文件定义模式开关，动态选择JS入口和应用壳 构建期分端：利用Gradle flavor生成不同APK，处理原生层差异 Metro配置：按需打包当前端所需代码 工程实践： 提
2026-04-07 18:29:23
283
原创 像ChatGPT一样逐字输出：React + TypeScript 流式接收与“打字机”效果实现方案
本文介绍了一种在React+TypeScript项目中实现AI助手流式响应与打字机效果的技术方案。针对用户期望实时看到模型思考过程的需求，文章提出双核心解决方案：1) 通过fetch+ReadableStream读取SSE-like行流数据，处理chunk边界与JSON解析；2) 使用纯函数决策器控制打字机节奏，实现逐字渐显效果。方案包含完整的模块化架构，包括流式解析工具、打字机算法和React状态管理，并支持结构化结果的增量输出。核心代码展示了如何拼接buffer、处理半行JSON，以及通过20ms间隔、
2026-04-03 16:38:21
356
原创 从 dev 到 prod：Web 项目请求接口配置治理完全指南
本文梳理了一个React+TypeScript项目中多环境接口配置的实践方案。项目涉及4类接口：自研HTTP、自研WebSocket、兼容WebSocket和第三方HTTP，每种都有独立的封装层。关键改造是将生产环境地址从固定主机改为运行时动态拼接，新增了地址解析层统一处理HTTP/WS地址。开发环境通过Vite代理转发请求，而生产环境需要前端自行拼接绝对地址或依赖反向代理。文章详细介绍了动态地址拼接的实现细节，包括使用location.hostname而非host来支持固定端口配置，以及HTTP/WS地址
2026-04-02 17:43:16
352
原创 React + Node.js 实战：用豆包端到端实时语音大模型 API 落地web纯语音助手
本文介绍了一个基于React+Next.js和Node.js+NestJS的纯语音实时助手项目。前端采用状态机驱动设计，专注于实时语音交互体验，包含麦克风采集、音频播放和WebSocket通信模块。后端作为代理层连接豆包语音API，处理协议转换、状态管理和数据持久化。项目采用三层架构（浏览器-业务后端-语音API），通过独立路由和精简UI确保交互流畅性，特别适合展厅、驾驶舱等场景。关键技术包括音频Worklet处理、WebSocket状态同步和实时语音协议转换，实现了从语音采集到TTS播报的完整闭环。
2026-04-01 16:15:31
447
原创 从“网页感”到“原生感”：Web 端适配触屏交互的完整解决方案
本文针对触屏终端开发中的网页适配问题，提出了一套工程化解决方案。通过分析浏览器默认交互与终端需求的差异，建立了分层治理体系：全局样式层处理误选中、滚动条隐藏等基础问题；全局触摸层管理手势识别、长按菜单等事件；受控滚动层实现稳定滚动体验。方案特别强调输入控件白名单机制和Overlay锁滚策略，确保在收紧全局交互的同时保留必要原生功能。最终实现目标是消除网页感，打造接近原生应用的触屏体验。文中还提供了浏览器全屏快捷键等实用技巧，并采用Mermaid图表清晰展示技术架构。
2026-03-17 16:34:16
397
原创 深入解析 WebSocket 语音交互：状态流转、表情联动与音频上下行处理实践
本文介绍了基于WebSocket的语音交互系统实现方案。系统采用文本控制消息与二进制音频帧并行的设计，通过状态机管理连接和交互流程。前端包含连接管理、音频处理和状态展示三个核心模块，分别负责WebSocket通信、音频编解码/采集/播放，以及UI状态反馈。协议设计上，文本消息处理控制逻辑，二进制帧传输Opus音频数据。系统实现了完整的语音交互链路，包括连接握手、语音采集、ASR识别、LLM推理、TTS播报等环节，并支持中断机制。该方案通过分层架构实现了功能解耦，在Flutter技术栈上整合了多种音频处理库，
2026-03-10 11:01:59
500
原创 深入解析机器人语音链路中的 AEC：系统回声消除与软件门控的组合实践
本文介绍了一套机器人语音交互中的声学回声消除（AEC）组合方案。该方案采用三层架构：底层使用Android系统级AEC进行初步处理；中层通过Flutter/Dart缓存下行音频作为参考信号，进行相关性判定与门控；上层结合近讲直通、远讲突增等策略优化打断体验。关键参数集中配置，便于调优。系统级AEC优先采用VOICE_COMMUNICATION模式，软件AEC则通过环形缓冲存储参考音频，利用相关性检测拦截残余回声。整体设计兼顾算法效果、设备兼容性和交互体验，有效解决了机器人"自言自语"问题
2026-03-10 10:28:07
397
原创 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
1249
原创 React Native项目（Android ）集成虹软 ArcFace（人脸识别增值版 5.0 Java）
RN+Android本地人脸识别优化方案 本文针对RN+Android本地人脸识别开发中的常见痛点，提出了一套系统化解决方案： 配置优化：采用"配置文件优先+接口兜底"策略，解决密钥硬编码问题，提升安全性和运维灵活性 架构分层：明确划分职责边界，RN层负责流程控制，Kotlin层专注引擎处理，实现代码解耦 故障预防：内置超时机制、错误码体系、脱敏日志和缓存兜底，显著提升系统可靠性 方案亮点： 完整的Mermaid流程图展示识别链路 原生层模块化设计（6个核心Kotlin类） RN侧三层封
2026-02-24 16:24:25
925
原创 自动化“联系我们”：纯前端接入飞书群机器人消息通知实践
本文介绍了一种纯前端实现的"联系我们"表单自动化通知方案。该方案通过前端直接调用飞书群机器人Webhook，实现用户提交表单后实时推送消息到业务群，无需后端参与。 方案核心特点： 前端完成表单校验和消息组装 直接POST请求飞书机器人Webhook 成功跳转提示页，失败展示错误信息 适用于轻量级线索收集场景 技术实现要点： 使用Vue组件处理表单逻辑 通过feishu.js工具类构造消息体 密钥文件单独管理并忽略提交 完整流程包含校验、发送、成功/失败处理 该方案具有接入简单、链路短的优
2026-02-12 13:37:00
673
原创 React Native 集成 TRTC实时音视频实战指南
React Native 侧通过 SDK 采集/渲染音视频流，业务层再结合 WebSocket 指令、机器人硬件事件实现在线巡检与客服会话。可以将这条链路理解为"配置 → 权限 → 入会 → 音视频渲染 → 任务控制"的闭环：前端直接从配置文件 读取 sdkAppId、roomId 与 userSig；在加入房间前，统一请求摄像头与麦克风权限；入会成功后由统一的 Hook 负责维护用户列表、摄像头、扬声器以及远端首帧渲染；当 WebSocket 推送机器人任务或对端挂断时，组件即可根据事件快速切换状态。
2025-11-21 15:17:30
558
5
原创 讯飞 OCR 图片识别与解析完整指南（python）
本文档提供了接入讯飞OCR图片识别服务的完整指南，10分钟即可实现智能解析。主要内容包括： 开通服务获取API密钥，配置环境变量； 安装依赖启动后端服务，通过API上传图片测试识别； 解析返回数据结构（文本和表格），表格以三维数组形式存储； 配置解析规则提取关键信息，支持多规则并行执行和自动评分排序； 提供常见问题排查和进阶扩展建议。适用于工时单识别、票据提取等场景，覆盖从接入到解析的全流程。
2025-11-14 11:27:35
1270
原创 React Native App 图表绘制完整实现指南
本文介绍了在React Native中实现数据可视化图表的完整方案。该方案基于victory-native图表库，支持折线图、柱状图、双折线图等多种图表类型，并具备交互功能（点击、Tooltip）、自定义样式和性能优化。文章详细讲解了技术选型、架构设计、核心组件实现(包括折线图、柱状图、双折线图)以及具体代码实现步骤。该方案适合需要展示和分析数据的移动应用场景，提供响应式设计和高效的渲染性能。
2025-11-06 11:50:47
911
原创 React Native App 自动检测版本更新完整实现指南
本文介绍了React Native应用中实现自动版本检测和更新的完整方案。该方案采用分层架构设计，包含VersionManager核心工具类、useVersionCheck Hook和VersionUpdateDialog UI组件三大模块。功能上支持自动检查版本更新、强制更新判断、智能重试机制、应用状态监听等核心能力，并提供美观的用户界面。实现步骤包括创建版本API服务、开发版本管理工具、构建检查Hook和更新对话框、最后集成到应用入口。文章还提供了版本API服务和VersionManager工具类的详细
2025-11-04 16:31:49
757
原创 React Native 蓝牙开发实践：从权限配置到设备连接完整指南
React Native实现BLE蓝牙设备接入需要分层架构设计，分为Android原生层、RN桥接层、蓝牙管理器封装层和应用层。关键点包括：处理Android不同版本的权限差异（Android 12+需要新权限BLUETOOTH_SCAN/CONNECT，10-11需位置权限），原生模块实现扫描连接等核心功能，运行时动态权限检查，以及通过事件系统实现原生与JS层通信。
2025-11-03 17:04:43
1091
原创 React Native 项目中 WebSocket 的完整实现方案【完善版】
WebSocket 是一种网络通信协议，它允许客户端和服务器之间建立持久的双向连接。与传统的 HTTP 请求-响应模式不同，WebSocket 连接一旦建立，双方都可以主动发送数据，无需等待对方的请求。这就像是建立了一条"数字高速公路"🛣️，数据可以双向快速流动！WebSocket 协议最初是为了解决 Web 应用中实时通信的需求而设计的。在 WebSocket 出现之前，开发者通常使用轮询（Polling）或长轮询（Long Polling）来实现实时通信，但这些方法就像是"不停地敲门问有没有新消息
2025-10-18 10:46:48
948
1
原创 Uniapp 微信小程序打包分包
在 uniapp 开发跨端适配微信小程序时，经常会遇到打包超过微信标准大小的情况，这个时候就无法上传成功、发布小程序，于是就需要实现分包。微信小程序包核心要求： 1. 主包和分包分别不能超过2MB。2. 总包不使用分包时，不能超过2MB；使用分包时，不超过30MB。3. 静态不能超过200KB。 4. tabBar的页面必须在主包内。与此对应的，可以考虑一些应对措施，大的静态资源从服务器请求而不是本地存储，小程序代码按照业务逻辑划分为多个独立的子包，在构建时打包成不同的分包，用户在使用时按需加载。
2025-07-29 17:26:44
1102
原创 uniapp 自定义组件库内样式 微信小程序端不生效解决
摘要：Uniapp+Wot UI跨端开发中的样式隔离解决方案 在Uniapp+Vue3+Wot UI开发中，微信小程序端的样式隔离会导致自定义组件样式失效。通过配置defineOptions中的styleIsolation: 'shared'并配合:deep()选择器，可解决H5和小程序端样式不一致的问题。文章详细介绍了该方案的技术实现，包括核心代码、应用效果和完整组件代码，同时扩展说明了defineOptions和styleIsolation的相关知识。该方案有效保证了跨端开发中UI组件样式的一致性。
2025-07-23 20:14:20
2129
1
原创 CSS flex布局 列表单个元素点击 本行下插入详情独占一行
在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表 展示详情，可以考虑 flex 布局 + position relative 定位。
2025-02-16 21:13:44
1446
原创 uniapp 微信小程序获取当前环境（开发、体验版、正式）
在实际开发过程中，会需要根据当前的版本切换到对应的环境（测试、正式），如果每次开发者手动改路径，出错率比较高，于是就需要自动适配。（但是微信审核的时候，可能会因为不是正式版本的数据而驳回）。自定义环境配置 package.json、uni.getAccountInfoSync()、wx.getAccountInfoSync()、__wxConfig.envVersion。第一种方式，配置好后，即可自动切换数据。剩下的三种都是根据获取的环境进行判断 导出，其他地方进行使用即可。
2025-01-21 10:42:41
2466
原创 Uniapp 微信小程序检测新版本并更新
在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。主要会使用到uni.canIUse(‘getUpdateManager’) 、uni.getUpdateManager() 、updateManager的onCheckForUpdate()、onUpdateReady() 、applyUpdate() 、onUpdateFailed()。
2024-12-22 13:56:55
2167
原创 Uniapp 微信小程序获取微信昵称、头像
因实际需求，需要本小程序支持用户修改默认的头像、用户名，其中还需支持获取微信账号的头像、昵称。原本可直接获取昵称、头像的 wx.getUserInfo与 open-type=“getUserInfo” 获取用户个人信息（头像、昵称、性别与地区），权限已经被微信收回。具体可查看微信官方文档，但是微信单独提供了接口来支持替换此功能为了页面显示效果和功能实现，需要使用 button包裹住头像，button 配置 相关属性，chooseavatar 内接收、处理图片路径。
2024-12-08 14:36:01
4309
原创 Uniapp 微信小程序分享 - 自定义绘制分享图片
因实际需求，需要实现微信小程序自定义分享，根据当前数据动态生成（绘制）分享卡片的图片。为了实现绘制分享卡片，核心需要使用。先来看一下效果：注意：绘制图片必须需要专门使用获取图片的path后，再使用绘制，否则直接用图片路径绘制不成功，会成默认的分享图。
2024-12-04 21:39:01
2528
2
原创 Uniapp 微信小程序分享 - 自定义卡片内容 + 参数携带 接收
因实际需求，需要实现微信小程序自定义分享（自定义分享卡片标题、图片、小程序路径、参数等）。为了实现自定义分享，需要关于内入参、出参，可查看官方文档。。下面分享配置分两种情况：普通情况（纯手写分享配置）、使用了uview-plus mixin mpShare情况。因本小程序使用了uview-plus组件，其内部封装了 share对象，外部 onShareAppMessage 内返回的配置对象不会生效，需要设置uview-plus内的share对象。
2024-12-04 19:23:05
1679
原创 Uniapp 微信小程序内打开web网页
实际业务中有时候会需要在本微信小程序内打开web页面，这时候可以封装一个路由页面专门用于此场景。在路由跳转的时候携带路由参数，拼接上web url，接收页面进行参数接收即可。
2024-12-01 14:05:02
1522
原创 Uniapp 使用自定义字体
uniapp 使用自定义字体。为了更好的还原UI图片效果，往往需要使用特殊字体，引入字体包。因实际业务运行平台在微信小程序上，对发布包的项目文件大小有限制，项目中某些比较大的静态资源需要放在服务器上来远程加载，比如图片、字体包。
2024-12-01 13:43:36
1145
原创 Uniapp 微信小程序跳转第三方小程序（全屏、半屏）
因实际需求，需要实现从本小程序跳转至第三方小程序，根据业务场景会有全屏、半屏的跳转，此处记录如何实现。因为uniapp此类方法都是基于原生微信方法实现的，可直接根据微信官方文档查阅使用即可。
2024-12-01 12:50:41
3149
2
原创 Mac hombrew安装python zsh: command not found: python
最近在配置新电脑的开发环境，安装python后，python命令会不生效，提示zsh: command not found: python，于是整理出这篇博客。从开始安装python到配置路径、配置别名，全部包含。
2024-10-20 12:29:47
1046
原创 【配色网站分享】
个人比较喜欢收藏一些好看的插画、UI设计图和配色，于是有了此篇，推荐一些配色网站，希望能对自己和大家有些帮助。uiGradients主打渐变风网站；Adobe Color CCAdobe官方出品的配色工具，有多种配色模式和色彩规则可以选择；Colrd上传图片生成的配色方案；webgradients 小清新渐变风网站；color explorer上传图片后自动检测图片配色；color hunt实时更新受欢迎的配色方案；Nippon colors日本传统色谱网站；。。
2024-10-20 11:29:59
9830
原创 场景题 - 画三角形并只点击三角形触发事件
画一个三角形并仅点击三角形区域才会触发点击事件。画个三角形绑定点击事件（涉及点击区域）关于画三角形，是个老生常谈的问题，最常用的就是使用border来实现，这里提供更多更好用的方法，svg polygon绘制三角形、canvas、css clip-path:polygon( ) 裁剪可视区域，并结合 addEveentListener 实现仅点击三角形时触发事件。
2024-10-13 12:16:15
647
原创 Vue3新特性合集
Vue.js的最新版本，它带来了许多改进和新的特性，旨在提供更好的性能、更强的类型支持以及更灵活的组件开发方式。新特性有重写响应式数据（proxy）、VDOM重写、模板编译优化、diff算法、path flag静态节点、Fragment、Tree-shaking支持、Composition API、TS支持、异步组件写法、Teleport、Suspense、多事件等，体积更小 性能更好 更好的TS支持 更好的代码组织 更好的逻辑抽离 更多新功能。
2024-10-13 11:08:17
811
原创 mac安装homebrew和git
由于把自己的新mac拿来撸代码，开始环境搭建，安装各种工具和依赖，安装 git 需要先安装 homebrew，然后就遇到了 homebrew 安装失败的问题。又或者是究其原因就是无法快速访问外部网络下载安装包，解决方式可以是要成功访问外部网络或者下载国内的源安装包。。
2024-10-13 09:59:11
1034
原创 Web前端性能优化合集
自互联网兴起以来，从最初的静态网页到如今的动态交互、单页应用（SPA）、PWA（Progressive Web Apps）等，互联网技术正在飞速发展，随着用户体验成为核心竞争力之一，前端性能直接影响网站或应用的加载速度、交互流畅度，进而影响用户留存率和业务转化率。由此，前端性能优化极其重要，以下内容为学习一前端性能优化课程所做的xmind笔记。
2024-08-24 11:35:34
655
原创 Echarts大屏半饼图（自动轮播高亮、resize）
某些情况，大屏页面需要实现一些比较美观的图表，常用的图表插件有，此篇的实现效果为饼图和的结合体。这两种图具体实例可查看同时实现轮播高亮，采用定时循环操作，先调用的取消所有的高亮，再调用高亮指定数据。每次窗口大小改变时，进行监听，chart更新，调用resize方法，避免出现错乱效果。其中，需要注意到keep-alive 缓存特殊的两个阶段，activated(组件激活时) 和deactivated(组件停用时)
2024-05-14 16:17:58
912
原创 Vue在线预览文件（docx/xlsx/pdf）
在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render
2024-04-19 14:26:12
6664
4
原创 Web实现纯前端输出pdf打印 print
后台管理系统中，会常用到打印功能，打印一些表格数据、信息之类的。此处做个简单的打印示例。此功能模块，主要分为三个部分打印组件作为处理，将需求跟模板文件映射起来。1. 打印模板文件，提前编写好的数据展示模板；2. 打印组件，将模板文件名跟模板文件映射起来；3. 应用demo，实际应用。
2024-04-17 16:43:38
1405
原创 表单实战之分类多选实现
开发后台管理系统的过程中，会出现一些管理员配置功能的部分，比如一些开放接口权限的开通。分析一下，“开放接口权限的开通”，会有很多的权限可以开通，那就是多选。另外，开放接口肯定会进行分类，类别唯一。按类进行多选，再加上个全选的功能。支持多选的同时还需要分类，会有点复杂，就需要设计好数据结构，内部有具体类别的标识与选中的数据存储。至此，需求就分析完毕了。
2024-01-05 17:32:00
719
原创 多语言管理方案 - Excel导入与导出
前篇：结合本博客之前的国际化多语言的实现与实际业务场景，意识到人工在项目中手动配置、替换多语言花费的人力成本较高，于是衍生出其他的管理方案，解放双手，核心原理就是多语言配置文件与 Excel 文件相互转换、文件读写。因为Vika单词插入记录最多10条，此处就不演示直接与Vika进行多语言管理的实现，代码在博主本地，有需要的可以私。
2023-12-28 11:09:02
1110
原创 JS xlsx 数据导出/导入excel文件格式
在做后端开发管理实际业务开发中，有时会遇到处理导入、导出Excel文件的数据，比如多语言管理和报表数据。将前端数据中对象数组格式的数据与excel格式数据进行相互转换。既然时对 Excel 文件进行处理，自然需要插件了，比如 xlsx。于是，进行简单demo的实现与演示。
2023-12-27 14:47:30
1263
原创 纯前端利用emailJS发送邮件
因实际工作中有涉及到前端调用邮件发送的功能，了解到 EmailJS 插件，即出此文。需要在 EmailJS 官网中注册一个邮箱账号，并创建邮件发送服务和邮件模板，获取serviceID和templateID，进而实现功能。
2023-12-25 15:08:38
13060
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人