Lstmxx的空间

问题描述在微信小程序开发中，我们通常通过页面生命周期回调函数 onLoad 的第一个参数来获取页面 URL 中的 query 参数。微信小程序框架会自动解析 URL 中的查询字符串，并将其作为参数传递给页面。 然而，当 query 参数值中包含等号(=)字符时，微信小程序的解析机制会出现问题，导致参数值被错误截断。 问题案例原始小程序链接： 1pages/index/index?skin_id=jzWddAEWvD&channel_id=1639617&product_type=5&appid=wx3cc2cddf09969268&short_link_code=3==qMsxn&product_id=81 实际解析结果： short_link_code 被解析为 3 期望值应为 3==qMsxn 这种解析错误会导致后续业务逻辑失败，例如使用错误的短链码获取长链接时会失败。 问题原因分析微信小程序的 URL 解析机制与浏览器解析有差异，以下是浏览器解析结果。 可以看出，在浏览器中解析是正常的。 解决方案修改参数生成逻辑：在对微信小程序通 ...

Sorry, your browser doesn't support embedded videos. 问题描述当用户在输入手机号后，自动获取验证码功能会将焦点从手机号输入框切换到验证码输入框，导致 blur 和 focus 事件被多次触发，从而引发 window.scrollTo 定位异常。 window.scrollTo 的适配为适配 iOS 设备，在 input 的 blur 和 focus 事件上绑定 window.scrollTo，以便在键盘弹出时，页面元素能够正确上移。实现代码如下： 1234567export function handleInputScroll(isBlur: boolean) { if (isBlur) { window.scrollTo(0, CacheData.cacheScroll) } else { CacheData.cacheScroll = window.screenY }} 解决方案setTimeout 尝试最初的思路是通过增加延迟（se ...

引言：我们与 YApi 的“爱恨情仇”在现代前后端分离的开发模式中，API 文档是连接前后端的桥梁。YApi 以其直观、易用的特性，成为了许多团队的首选。然而，对于前端开发者来说，一个普遍的痛点随之而来：我们不得不花费大量时间，手动将 YApi 上的接口定义，逐字逐句地翻译成项目中的 TypeScript 类型（Interfaces/Types）。 这项工作不仅枯燥、重复，而且极易出错。一个字段的拼写错误、一个数据类型的遗漏，都可能导致难以追踪的 Bug。当后端接口频繁变更时，这种维护成本更是呈指数级增长。我们不禁思考：这种高度模式化的重复性劳动，是否可以被彻底自动化？AI 大模型（LLM）能否理解 YApi 的 JSON 定义，并为我们编写出高质量、可维护的类型代码？ 为了终结这场“爱恨情仇”，yapi-mcp-server 诞生了。它是一个小巧而强大的命令行工具，旨在将 YApi 定义自动化生成为 TypeScript 代码。本文将完整分享它的设计思路、技术实现和开发过程中的心得体会。 一、项目核心特性yapi-mcp-server 的核心目标是成为开发者工具箱中的一把利器，让类型 ...

1.引言在桌面应用开发中，本地视频的高效加载与播放是提升用户体验的关键。本文介绍如何通过 Electron 的协议处理器与 Node.js 流式 API，实现高性能的本地视频加载方案。 自定义协议流传输的优势 特性 文件路径 Blob 流式传输 内存占用 高（线性增长） 极高（全量驻留） 低（动态分片） 大文件支持 ❌ ❌ ✅ 首帧时间 慢 慢 快 拖拽播放 卡顿 卡顿 流畅 内存泄漏风险 中 高 低 2. 核心实现原理2.1 协议层架构设计123456sequenceDiagram Renderer->>Main: 请求 media://id.mp4 Main->>FileSystem: 创建可读流 FileSystem->>Main: 返回文件流 Main->>Renderer: 流式传输响应 2.2 关键技术选型 Electron Protocol API：注册自定义协议替代file:// Node.js Stream：实现分块读取与传输 HTTP Range：支持视频播放器范 ...

前言几个月前读完了《你不知道的 javascript 上卷》，笔记整理了但是一直忘记发了，今天有空就发了吧。 这本书对于想深入了解 js作用域、闭包、类和原型等原理和运行规则的人，我是非常推荐的。

bt-downloader是一个基于webtorrent和electron的磁力链下载器。 项目地址：https://github.com/Lstmxx/bt-downloader 技术栈 框架：electron + vite + Vue3 + Typescript 前端持久化 pinia 磁力链下载：webtorrent UI：TailwindCSS PrimeVue 数据库: better-sqlite3 ORM: Typeorm 配置保存：electron-store 对于想上手 electron 的朋友，可以看看 webtorrentwebtorrent 是一个基于 WebRTC 的磁力链下载客户端。对比 Aria2 的优势在于 webtorrent 使用 js 写的，同时也有对应的 types 包，所以对于 electron 开发会比较友好。 better-sqlite3对于桌面端应用的数据库选择，一般是选择 sqlite3。而 better-sqlite3 要比 sqlite3 性能好一些，所以选择了 better-sqlite3 ORM 方面则选择了 Typeorm ...

前言最近遇到一个需求，需要将批量选择的图片，批量一个个下载。 触发单个下载在浏览器中触发下载，我们可以借用 a 元素来触发。 12345678910111213141516const downloadFile = async (url: string, name: string) => { const res = await fetch(url); const blob = await res.blob(); const strList = url.split('.'); const type = strList[strList.length - 1]; const downUrl = window.URL.createObjectURL(blob); const downloadElement = document.createElement('a'); document.body.appendChild(downloadElement); downloadElement.href = downUrl; downloadElem ...

前言前段时间实现了一个使用 opencvjs 将印花图与 mask 图原图进行正片叠底的效果，印花使用四方连续的形式拼接，大概效果如下图所示 测试反馈说生成图时操作会变得卡顿，于是便开始着手优化了。 找到问题打开 performance 录下操作，发现有长任务需要优化。 可以发现有一个比较长的任务，我们看看调用栈分析一下哪个函数时间比较长。从图上可以发现整个 task 主要耗时的函数有 getSourceMatAndMaskMat 和 mergeImage 两个。查看一下 render 函数 拆分 long task对于主线程中的长任务可以使用在  Promise  中调用  setTimeout 的方式让出主线程。 12345export function yieldToMain() { return new Promise((resolve) => { setTimeout(resolve, 0); });} 在两个函数之间加上 yieldToMain 再录一次操作发现顺利拆分了 那么继续看看 getSourceM ...

前言最近遇到了一个需求，要将算法的标签品类数据以树形的形式回显到后台管理页面上。通过和后端的沟通，决定了通过 parentCode 和 categoryCode 来让前端组成树形结构。通过接口获取的数据是这样的： 其中当节点为 root 节点时，parentCode 为空字符串。知道数据长啥样，我们就可以构建着手构建树了。 格式化数据树形结构首先我们要先确定树中的 node 类型应该是长怎么样的，明显我们只需要将数据关联起来，而原数据我们希望原封不动保留，所以我们可以用 ts 来定义一下数据结构 123export type Tree<T> = T & { children?: Tree<T>[];}; 知道数据结构长啥样就可以着手写一下函数了。 编写函数在 js 中对象中，变量存储的是对象的引用（地址），我们利用这个特性，便可以通过一次遍历来构建出一颗树。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474 ...

常见的日志库pino性能高比较小的日志库 winston性能好而且大而全的日志库，一般用于生产。 npm: winston npm: nest-winston winston 文件相关库 npm: winston-daily-rotate-file filters在 nestjs 中，filters 是用来捕获程序中发生的错误。它可以用来 收集错误，生成日志 格式化错误，返回给用户 内置 HTTP 异常在@nestjs/common 中有着常用的 HttpException 来提供给开发人员使用，通过 throw new 对应的 Exception 来触发。 获取 request ip 地址的库npm: request-ip 自定义 logger 模块和 filters首先使用 nest cli 来创建模块 1nest g mo logs 编写 logger 模块 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { Module
...