- 博客(54)
- 收藏
- 关注
RSS订阅原创 React Native 集成 TRTC实时音视频实战指南
React Native 侧通过 SDK 采集/渲染音视频流，业务层再结合 WebSocket 指令、机器人硬件事件实现在线巡检与客服会话。可以将这条链路理解为"配置 → 权限 → 入会 → 音视频渲染 → 任务控制"的闭环：前端直接从配置文件 读取 sdkAppId、roomId 与 userSig；在加入房间前，统一请求摄像头与麦克风权限；入会成功后由统一的 Hook 负责维护用户列表、摄像头、扬声器以及远端首帧渲染；当 WebSocket 推送机器人任务或对端挂断时，组件即可根据事件快速切换状态。
2025-11-21 15:17:30
478
5
原创 讯飞 OCR 图片识别与解析完整指南（python）
本文档提供了接入讯飞OCR图片识别服务的完整指南，10分钟即可实现智能解析。主要内容包括： 开通服务获取API密钥，配置环境变量； 安装依赖启动后端服务，通过API上传图片测试识别； 解析返回数据结构（文本和表格），表格以三维数组形式存储； 配置解析规则提取关键信息，支持多规则并行执行和自动评分排序； 提供常见问题排查和进阶扩展建议。适用于工时单识别、票据提取等场景，覆盖从接入到解析的全流程。
2025-11-14 11:27:35
1094
原创 React Native App 图表绘制完整实现指南
本文介绍了在React Native中实现数据可视化图表的完整方案。该方案基于victory-native图表库，支持折线图、柱状图、双折线图等多种图表类型，并具备交互功能（点击、Tooltip）、自定义样式和性能优化。文章详细讲解了技术选型、架构设计、核心组件实现(包括折线图、柱状图、双折线图)以及具体代码实现步骤。该方案适合需要展示和分析数据的移动应用场景，提供响应式设计和高效的渲染性能。
2025-11-06 11:50:47
830
原创 React Native App 自动检测版本更新完整实现指南
本文介绍了React Native应用中实现自动版本检测和更新的完整方案。该方案采用分层架构设计，包含VersionManager核心工具类、useVersionCheck Hook和VersionUpdateDialog UI组件三大模块。功能上支持自动检查版本更新、强制更新判断、智能重试机制、应用状态监听等核心能力，并提供美观的用户界面。实现步骤包括创建版本API服务、开发版本管理工具、构建检查Hook和更新对话框、最后集成到应用入口。文章还提供了版本API服务和VersionManager工具类的详细
2025-11-04 16:31:49
698
原创 React Native 蓝牙开发实践：从权限配置到设备连接完整指南
React Native实现BLE蓝牙设备接入需要分层架构设计，分为Android原生层、RN桥接层、蓝牙管理器封装层和应用层。关键点包括：处理Android不同版本的权限差异（Android 12+需要新权限BLUETOOTH_SCAN/CONNECT，10-11需位置权限），原生模块实现扫描连接等核心功能，运行时动态权限检查，以及通过事件系统实现原生与JS层通信。
2025-11-03 17:04:43
1034
原创 React Native 项目中 WebSocket 的完整实现方案【完善版】
WebSocket 是一种网络通信协议，它允许客户端和服务器之间建立持久的双向连接。与传统的 HTTP 请求-响应模式不同，WebSocket 连接一旦建立，双方都可以主动发送数据，无需等待对方的请求。这就像是建立了一条"数字高速公路"🛣️，数据可以双向快速流动！WebSocket 协议最初是为了解决 Web 应用中实时通信的需求而设计的。在 WebSocket 出现之前，开发者通常使用轮询（Polling）或长轮询（Long Polling）来实现实时通信，但这些方法就像是"不停地敲门问有没有新消息
2025-10-18 10:46:48
877
1
原创 Uniapp 微信小程序打包分包
在 uniapp 开发跨端适配微信小程序时，经常会遇到打包超过微信标准大小的情况，这个时候就无法上传成功、发布小程序，于是就需要实现分包。微信小程序包核心要求： 1. 主包和分包分别不能超过2MB。2. 总包不使用分包时，不能超过2MB；使用分包时，不超过30MB。3. 静态不能超过200KB。 4. tabBar的页面必须在主包内。与此对应的，可以考虑一些应对措施，大的静态资源从服务器请求而不是本地存储，小程序代码按照业务逻辑划分为多个独立的子包，在构建时打包成不同的分包，用户在使用时按需加载。
2025-07-29 17:26:44
1021
原创 uniapp 自定义组件库内样式 微信小程序端不生效解决
摘要：Uniapp+Wot UI跨端开发中的样式隔离解决方案 在Uniapp+Vue3+Wot UI开发中，微信小程序端的样式隔离会导致自定义组件样式失效。通过配置defineOptions中的styleIsolation: 'shared'并配合:deep()选择器，可解决H5和小程序端样式不一致的问题。文章详细介绍了该方案的技术实现，包括核心代码、应用效果和完整组件代码，同时扩展说明了defineOptions和styleIsolation的相关知识。该方案有效保证了跨端开发中UI组件样式的一致性。
2025-07-23 20:14:20
1951
1
原创 CSS flex布局 列表单个元素点击 本行下插入详情独占一行
在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表 展示详情，可以考虑 flex 布局 + position relative 定位。
2025-02-16 21:13:44
1423
原创 uniapp 微信小程序获取当前环境（开发、体验版、正式）
在实际开发过程中，会需要根据当前的版本切换到对应的环境（测试、正式），如果每次开发者手动改路径，出错率比较高，于是就需要自动适配。（但是微信审核的时候，可能会因为不是正式版本的数据而驳回）。自定义环境配置 package.json、uni.getAccountInfoSync()、wx.getAccountInfoSync()、__wxConfig.envVersion。第一种方式，配置好后，即可自动切换数据。剩下的三种都是根据获取的环境进行判断 导出，其他地方进行使用即可。
2025-01-21 10:42:41
2305
原创 Uniapp 微信小程序检测新版本并更新
在开发微信小程序过程中，会经常发布新的版本，与此同时，需要正在使用的用户进行更新才可以正常使用。于是，需要及时检测是否有新版本、应用更新版本。主要会使用到uni.canIUse(‘getUpdateManager’) 、uni.getUpdateManager() 、updateManager的onCheckForUpdate()、onUpdateReady() 、applyUpdate() 、onUpdateFailed()。
2024-12-22 13:56:55
2089
原创 Uniapp 微信小程序获取微信昵称、头像
因实际需求，需要本小程序支持用户修改默认的头像、用户名，其中还需支持获取微信账号的头像、昵称。原本可直接获取昵称、头像的 wx.getUserInfo与 open-type=“getUserInfo” 获取用户个人信息（头像、昵称、性别与地区），权限已经被微信收回。具体可查看微信官方文档，但是微信单独提供了接口来支持替换此功能为了页面显示效果和功能实现，需要使用 button包裹住头像，button 配置 相关属性，chooseavatar 内接收、处理图片路径。
2024-12-08 14:36:01
4185
原创 Uniapp 微信小程序分享 - 自定义绘制分享图片
因实际需求，需要实现微信小程序自定义分享，根据当前数据动态生成（绘制）分享卡片的图片。为了实现绘制分享卡片，核心需要使用。先来看一下效果：注意：绘制图片必须需要专门使用获取图片的path后，再使用绘制，否则直接用图片路径绘制不成功，会成默认的分享图。
2024-12-04 21:39:01
2436
2
原创 Uniapp 微信小程序分享 - 自定义卡片内容 + 参数携带 接收
因实际需求，需要实现微信小程序自定义分享（自定义分享卡片标题、图片、小程序路径、参数等）。为了实现自定义分享，需要关于内入参、出参，可查看官方文档。。下面分享配置分两种情况：普通情况（纯手写分享配置）、使用了uview-plus mixin mpShare情况。因本小程序使用了uview-plus组件，其内部封装了 share对象，外部 onShareAppMessage 内返回的配置对象不会生效，需要设置uview-plus内的share对象。
2024-12-04 19:23:05
1589
原创 Uniapp 微信小程序内打开web网页
实际业务中有时候会需要在本微信小程序内打开web页面，这时候可以封装一个路由页面专门用于此场景。在路由跳转的时候携带路由参数，拼接上web url，接收页面进行参数接收即可。
2024-12-01 14:05:02
1489
原创 Uniapp 使用自定义字体
uniapp 使用自定义字体。为了更好的还原UI图片效果，往往需要使用特殊字体，引入字体包。因实际业务运行平台在微信小程序上，对发布包的项目文件大小有限制，项目中某些比较大的静态资源需要放在服务器上来远程加载，比如图片、字体包。
2024-12-01 13:43:36
1105
原创 Uniapp 微信小程序跳转第三方小程序（全屏、半屏）
因实际需求，需要实现从本小程序跳转至第三方小程序，根据业务场景会有全屏、半屏的跳转，此处记录如何实现。因为uniapp此类方法都是基于原生微信方法实现的，可直接根据微信官方文档查阅使用即可。
2024-12-01 12:50:41
2985
2
原创 Mac hombrew安装python zsh: command not found: python
最近在配置新电脑的开发环境，安装python后，python命令会不生效，提示zsh: command not found: python，于是整理出这篇博客。从开始安装python到配置路径、配置别名，全部包含。
2024-10-20 12:29:47
977
原创 【配色网站分享】
个人比较喜欢收藏一些好看的插画、UI设计图和配色，于是有了此篇，推荐一些配色网站，希望能对自己和大家有些帮助。uiGradients主打渐变风网站；Adobe Color CCAdobe官方出品的配色工具，有多种配色模式和色彩规则可以选择；Colrd上传图片生成的配色方案；webgradients 小清新渐变风网站；color explorer上传图片后自动检测图片配色；color hunt实时更新受欢迎的配色方案；Nippon colors日本传统色谱网站；。。
2024-10-20 11:29:59
6368
原创 场景题 - 画三角形并只点击三角形触发事件
画一个三角形并仅点击三角形区域才会触发点击事件。画个三角形绑定点击事件（涉及点击区域）关于画三角形，是个老生常谈的问题，最常用的就是使用border来实现，这里提供更多更好用的方法，svg polygon绘制三角形、canvas、css clip-path:polygon( ) 裁剪可视区域，并结合 addEveentListener 实现仅点击三角形时触发事件。
2024-10-13 12:16:15
628
原创 Vue3新特性合集
Vue.js的最新版本，它带来了许多改进和新的特性，旨在提供更好的性能、更强的类型支持以及更灵活的组件开发方式。新特性有重写响应式数据（proxy）、VDOM重写、模板编译优化、diff算法、path flag静态节点、Fragment、Tree-shaking支持、Composition API、TS支持、异步组件写法、Teleport、Suspense、多事件等，体积更小 性能更好 更好的TS支持 更好的代码组织 更好的逻辑抽离 更多新功能。
2024-10-13 11:08:17
782
原创 mac安装homebrew和git
由于把自己的新mac拿来撸代码，开始环境搭建，安装各种工具和依赖，安装 git 需要先安装 homebrew，然后就遇到了 homebrew 安装失败的问题。又或者是究其原因就是无法快速访问外部网络下载安装包，解决方式可以是要成功访问外部网络或者下载国内的源安装包。。
2024-10-13 09:59:11
976
原创 Web前端性能优化合集
自互联网兴起以来，从最初的静态网页到如今的动态交互、单页应用（SPA）、PWA（Progressive Web Apps）等，互联网技术正在飞速发展，随着用户体验成为核心竞争力之一，前端性能直接影响网站或应用的加载速度、交互流畅度，进而影响用户留存率和业务转化率。由此，前端性能优化极其重要，以下内容为学习一前端性能优化课程所做的xmind笔记。
2024-08-24 11:35:34
629
原创 Echarts大屏半饼图（自动轮播高亮、resize）
某些情况，大屏页面需要实现一些比较美观的图表，常用的图表插件有，此篇的实现效果为饼图和的结合体。这两种图具体实例可查看同时实现轮播高亮，采用定时循环操作，先调用的取消所有的高亮，再调用高亮指定数据。每次窗口大小改变时，进行监听，chart更新，调用resize方法，避免出现错乱效果。其中，需要注意到keep-alive 缓存特殊的两个阶段，activated(组件激活时) 和deactivated(组件停用时)
2024-05-14 16:17:58
883
原创 Vue在线预览文件（docx/xlsx/pdf）
在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render
2024-04-19 14:26:12
6571
3
原创 Web实现纯前端输出pdf打印 print
后台管理系统中，会常用到打印功能，打印一些表格数据、信息之类的。此处做个简单的打印示例。此功能模块，主要分为三个部分打印组件作为处理，将需求跟模板文件映射起来。1. 打印模板文件，提前编写好的数据展示模板；2. 打印组件，将模板文件名跟模板文件映射起来；3. 应用demo，实际应用。
2024-04-17 16:43:38
1345
原创 表单实战之分类多选实现
开发后台管理系统的过程中，会出现一些管理员配置功能的部分，比如一些开放接口权限的开通。分析一下，“开放接口权限的开通”，会有很多的权限可以开通，那就是多选。另外，开放接口肯定会进行分类，类别唯一。按类进行多选，再加上个全选的功能。支持多选的同时还需要分类，会有点复杂，就需要设计好数据结构，内部有具体类别的标识与选中的数据存储。至此，需求就分析完毕了。
2024-01-05 17:32:00
698
原创 多语言管理方案 - Excel导入与导出
前篇：结合本博客之前的国际化多语言的实现与实际业务场景，意识到人工在项目中手动配置、替换多语言花费的人力成本较高，于是衍生出其他的管理方案，解放双手，核心原理就是多语言配置文件与 Excel 文件相互转换、文件读写。因为Vika单词插入记录最多10条，此处就不演示直接与Vika进行多语言管理的实现，代码在博主本地，有需要的可以私。
2023-12-28 11:09:02
1083
原创 JS xlsx 数据导出/导入excel文件格式
在做后端开发管理实际业务开发中，有时会遇到处理导入、导出Excel文件的数据，比如多语言管理和报表数据。将前端数据中对象数组格式的数据与excel格式数据进行相互转换。既然时对 Excel 文件进行处理，自然需要插件了，比如 xlsx。于是，进行简单demo的实现与演示。
2023-12-27 14:47:30
1218
原创 纯前端利用emailJS发送邮件
因实际工作中有涉及到前端调用邮件发送的功能，了解到 EmailJS 插件，即出此文。需要在 EmailJS 官网中注册一个邮箱账号，并创建邮件发送服务和邮件模板，获取serviceID和templateID，进而实现功能。
2023-12-25 15:08:38
12874
2
原创 JS Web页面指定元素保存为pdf文件
在实际业务开发中，经常需要实现将页面中的echarts图表和统计数据一键保存为pdf文件。这涉及到两个阶段功能：1. 将页面某部分内容截取出来，成为图片格式（类似于截图）；2. 将图片保存为pdf文件。于是，此处需要**html2canvas.js** 和 **jspdf.js** 两个插件。首次，需要安装此两个js插件。插件安装好后，进行引入。明确需要打印的元素、操作事件，接下来就是插件调用与逻辑处理了。需要将报表内容以图片、pdf文件的形式通过邮件发送给指定客户，此处扩展发送邮件相关内容。
2023-12-20 16:55:09
910
原创 Axios http请求拦截、封装
在实际项目开发中，请求后端接口都需要去调用http，目前常用的基于promise的网络请求库。但是实际应用时，还是需要进行封装处理，配置ip、超时时间、请求拦截、响应拦截等操作。此处涉及以下几个方面：1. 基本配置 2. 参数处理 3. request拦截器 4. response拦截器。
2023-12-13 15:27:59
444
原创 Vue自定义指令 - 权限
vue有自定义指令的功能，开发者可根据实际业务需求自定义各种功能的指令，其中常出现就的就有鉴权指令。登录时获取用户信息，包含权限列表，存储到store中。每次使用自定义权限指令时，代码都会跟store中的权限列表内权限做比对，有权限则显示该元素，否则删除其节点（其子节点也会被删除）。
2023-12-10 17:47:18
254
原创 RSA加密与解密之JSEncrypt
RSA加密算法是一种非对称加密算法，有公钥、私钥，长度越长 加密强度越大，高于768位的密钥相对比较安全，所以被广泛使用。使用公钥加密的数据，利用私钥进行解密。使用私钥加密的数据，利用公钥解密。前端放A公钥、B密钥。服务端放B公钥、A密钥。服务端用B公钥加密数据传给前端，前端用B密钥解密。
2023-12-10 17:23:37
1512
原创 JS web页面实现全屏/退出全屏
部分项目在开发过程中，会有全屏功能的需求，实现指定元素全屏显示，比如数据大屏等。于是，本篇来通过调用浏览器原生API实现此功能组件。流程为进入页面，元素本为非全屏模式，监听页面全屏状态。点击全屏icon，判断浏览器是否支持全屏且目标元素存在且浏览器全屏事件存在，条件成立，调用浏览器接口。点击退出全屏icon，判断浏览器是否支持全屏且全屏元素存在且浏览器退出全屏事件存在，条件成立，调用浏览器接口。维护 isFull 字段，控制全屏icon的显示。
2023-12-06 10:31:28
752
1
原创 Vue-i18n国际化多语言-在线表格翻译
经了解，可是通过在线表格的方式，拉取最新的多语言，在编译前执行已经封装好的操作，便可直接替换已有翻译，降本提效。于是，有了这篇文章。原理：在编译前，拉取在线表格数据，替换本地多语言配置文件。Vika，NodeJS，在线表格。除此之外，还可对本地excel进行多语言翻译数据读取。
2023-11-01 16:02:36
770
4
原创 VUE3+Ant Design Vue+TS实现当前语言切换组件
当涉及到国际化的内容时，系统往往需要配有多套语言翻译文件，并支持当前语言环境的获取和切换当前语言功能，随之整个系统将切换成对应的多语言。直接在需要应用的地方引入并使用就可以，不需要传任何参数，组件自身会根据当前语言环境自动获取当前语言。
2023-10-26 14:45:21
505
1
原创 VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）
VUE3+Ant Design Vue+TS实现手机号输入组件（带区号）。因实际业务需求，频繁需要使用手机号输入，包含区号的选择。此组件为区号、手机号输入组件，开放出常用配置项与onChange事件。可单独使用，也可以结合表单使用。
2023-10-26 11:28:35
2109
1
原创 VSCode 实用插件分享
此篇用来记录、分享四个简单好用的 VSCode插件，非常具有实用性。 1. any-rule：正则表达式 2. Code Spell checker：拼写检查 3. TODO Highlight：待做高亮 4. Path Intellisense：路径自动补全
2023-09-21 11:29:57
962
1
原创 VUE2局部触发全局loading（provide/inject）
当前有个需求，是路由内部某个组件发生某些操作时，开启/关闭全局（整个页面）的loading效果。在收到这个需求时，考虑到关键点在于跨组件通信，于是想到以下这些方法并进行分析可行性，props、$emit、Event Bus 、Vuex、provide、inject、slots、Ref / Reactive、useAttrs、Pinia，通过以上分析，认为provide/inject的方式比较方便快捷（更熟悉），于是通过此方式实现。
2023-09-21 10:40:33
442
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人