u010194271的博客

原创 React Native (RN)项目在web、Android和IOS上运行

必须切换淘宝镜像,否则会一直拉取失败。

原创 快速删除node_modules文件夹，清缓存

/ 执行递归删除node_modules文件夹。// 安装 rimraf。

原创 web应用构建与部署的本质区别

构建（Build）：把你写的“源代码”加工成能运行的“成品”。部署（Deploy）：把这个“成品”放到服务器或应用环境中，让别人能访问或使用。

原创 Node.js 自动替换脚本工具：一键完成多项目批量修改与资源替换

在多品牌共用代码的工程中，「自动化」不是可选项，而是必须项。这个脚本解决了团队反复手动替换带来的低效与风险，实现了：一键切换 → 安全替换 → 自动备份 → 快速上线未来还可以进一步扩展：环境变量自动同步（.env 文件）Git 自动提交与打 tag自动上传新图片至 CDN想要源码的发私信小工具虽小，但能解决团队中反复出现的痛点问题。自动化不是炫技，而是提升团队协作效率与质量的关键。当你在复制粘贴项目时，请记得：能用代码解决的重复工作，绝不要手动做第二次。

原创 使用 Ant Design Pro CLI 快速创建前端中台项目

项目模板说明适合场景simple基础骨架，轻量、可定制适合自己搭建业务系统complete全功能后台模板，包含权限、布局、Mock适合学习和快速原型开发通过 @ant-design/pro-cli，你可以在几分钟内搭建一个现代化的中后台管理系统，无需从零配置 Umi、Ant Design、Layout 等依赖。

原创 主应用在 Qiankun 微前端架构中的功能划分与职责

主应用相当于整个系统的 “操作系统”，统一提供：登录、权限、导航、布局、国际化公共组件、通知、搜索、全局状态异常处理、日志和微应用挂载微应用只专注于 自身业务逻辑，无需重复实现这些系统级功能。

原创 51、STM32 与 ESP32 单片机全面对比：架构、性能与应用场景详解

芯片一句话总结51“老牌入门级单片机，性能最弱但易学。STM32“工业控制主力，稳定高性能。ESP32“IoT神器，自带 Wi-Fi + 蓝牙。

原创 前端常用的环境 API 清单

语言本身提供：Array、Object、String、Number、Math、Date、JSON、Promise 等浏览器提供：DOM、BOM、事件、fetch、WebSocket 等Node.js 提供：文件、网络、进程、Buffer 等。

原创 前端之轮播图代码优化

【代码】前端之轮播图代码优化。

原创 Angular 入门项目

样式 → .less / .css / .scss。需要匹配对应的node版本。测试 → .spec.ts。组件逻辑 → .ts。模板 → .html。

原创 前端全流程技术方案与落地实践——新项目与迭代项目指南

组件测试（React Testing Library / Vue Testing Library）前端缓存 / IndexedDB / LocalStorage / Service Worker。SSR / SSG（Next.js / Nuxt3）可选，用于 SEO 和首屏性能。迭代项目：现状分析 → 升级优化 → 新功能开发 → 上线 → 持续优化。React / Vue / Angular（根据团队技术栈选择）新项目：从零搭建 → 开发 → 上线 → 迭代优化。

原创 前端性能优化全流程指南：策略、工具与实践案例

本文概述前端性能优化策略与实践，包括资源压缩合并、懒加载、JS 执行优化、GPU 动画、缓存策略及网络请求优化，并结合 Chrome DevTools、Lighthouse 等工具分析瓶颈，提升页面加载速度与用户体验。

原创 高效的项目构建和优化之前端构建工具

前端构建工具 → 底层渲染优化 → 项目性能提升

原创 HTML 的底层原理

HTML 底层原理就是浏览器将文本文件“翻译”为可视化结构的过程：从 源代码 → 解析为 DOM → 计算样式 → 绘制到屏幕，期间由浏览器的 渲染引擎 完成一系列编译与图形渲染操作。

原创 前端底层原理与复杂问题映射表

了解浏览器底层原理，并不是为了背流程图，而是为了在 性能、渲染、兼容、安全、架构 五个维度上能够“从底层找到问题根因”。

原创 设计稿适配 → 响应式布局

问题是：常见的「设计稿适配 → 响应式布局」问题。你这个例子很典型：设计稿 720×1280（即 9:16 比例）在浏览器正常，但手机上错位。

原创 响应式布局中的定位技巧

背景图通过 img.bg-image + position:absolute;实现（这是唯一的绝对定位，因为它只是背景层）；用 .content 容器包裹文字与按钮部分，通过 flex-direction: column 实现上下结构；用 justify-content: space-between 让顶部内容（文字）与底部内容（按钮）自动拉开；所有主要内容都用 Flex 布局 + 内边距 padding 来控制，不依赖 top / bottom。

原创 【居中】相对定位 + 绝对定位 或 Flexbox 居中

方法特点相对 + 绝对定位精准控制文字位置，适合单行文字Flexbox容易适配多行文字，响应式方便。

原创 为什么绝对定位的 div 默认宽度只包裹内容，而不是撑满父容器？

绝对定位脱离文档流 → 不再“占据父容器宽度”块级元素默认撑满宽度是针对静态定位（文档流）而言绝对定位需要你指定 width 或 left/right 来控制宽度元素类型默认宽度行为块元素，静态定位自动撑满父容器宽度 (width:auto块元素，绝对定位默认 shrink-to-fit，只包裹内容绝对定位 + left/right撑满 left/right 间距。

原创 网页布局-文档流规则

文档流是浏览器默认的布局规则：元素按照 HTML 中出现的顺序排列，浏览器自动计算它们的位置、宽高。简单来说，就是 **网页元素在页面上自然“排队”**的方式。文档流就是浏览器默认“排队”规则：块级元素从上到下排列，行内元素从左到右排列，浮动/绝对定位/固定定位等会脱离文档流，用于精细控制布局。理解文档流 → 理解为什么 absolute 脱离流、float 会导致父元素高度塌陷前端布局很多问题都能追根溯源到文档流。

原创 Flexbox 与定位结合-实现更复杂布局

排列、对齐、间距可用 justify-content、align-items、flex-wrap 控制布局。

原创 彻底掌握 CSS 定位：深入理解 relative、absolute、fixed 与 sticky 的原理与实战

定位是 CSS 布局的核心之一。控制元素位置、层级、浮动、吸顶、悬浮、弹窗都离不开它。掌握定位 = 掌握网页布局的自由度。决定元素在页面中的位置计算方式。决定 top / right / bottom / left 是否生效。影响是否“脱离文档流”。属性是否脱离文档流相对谁定位是否随滚动移动常见用途relative❌ 否自身原位置✅ 是微调、父参考absolute✅ 是最近定位父元素✅ 是弹窗、提示框fixed✅ 是浏览器窗口❌ 否悬浮按钮sticky❌（部分）

原创 Flexbox

Flexbox 全称是 Flexible Box Layout（弹性盒子布局）。👉 它是一种 一维布局模型，用于在一行或一列上高效地排列、对齐和分配空间。用一句话说：Flexbox 让你可以很轻松地让元素水平垂直居中、自动对齐、按比例分布，而不用写很多复杂的 float、position 或 margin。

原创 浏览器的工作原理

JavaScript 引擎，也称为 ECMAScript 引擎，是浏览器用来解释和执行 JavaScript 代码的模块。在网页浏览器中，渲染引擎（也称为布局引擎或页面渲染器）负责解析用户请求的内容（如HTML、XML、图片等）并在浏览器窗口中将其正确展示。渲染引擎是负责取得网页的内容（HTML, XML, 图像等）、整理信息（如加上CSS等），以及计算网页的布局，然后输出到屏幕上。JavaScript 引擎用于解析和执行 JavaScript 代码，以便于浏览器可以处理用户交互、控制DOM和执行动画等。

原创 （四）Flutter插件之IOS插件开发

因为你在 DispatchQueue.global().async 异步线程里调用 completion，所以闭包必须标记为 @escaping。Runner 是 Xcode 项目名称，同时也是 默认 iOS App Target。在 Flutter 项目中，iOS 部分通常在 ios/Runner 目录下。里面包含了 Flutter iOS App 的入口代码和配置文件。如果闭包只在函数体内同步调用，则可以不写 @escaping。表示闭包 可以在函数返回后再被调用。在Xcode中打开对应的项目。

原创 （三）Flutter插件之Android插件开发-方案2

在上右图编写调试代码后，对应的代码会自动同步到上左图。在VSCode中打开对应的项目。在上右图编写,运行项目即为最新。具体代码参照上一篇文章。

原创 （二）Flutter插件之Android插件开发

将 apply plugin: ‘com.android.library’ 改成：apply plugin: ‘com.android.application’Flutter 插件（android/ 只是插件模块），现在希望让它变成 独立的 Android 应用，可以直接运行和调试。gradle.properties 支持androidx。在build.gradle 中加入外在最外层即可。Android的单元测试是满足不了的。

原创 （一）Flutter 插件项目demo预览图

原创 【Ruby 】脚本和自动化语言 常用的内容

Ruby 非常适合做 自动化脚本、文件批量处理、文本替换Flutter 插件的 update_plugin_name.rb 就用到：文件操作：File, FileUtilsYAML 解析：YAML字符串/正则替换：gsub!, match?循环遍历目录：Dir.glob。

原创 ruby 、gem 和 cocoapods的联系与区别

名称类型功能Ruby编程语言运行脚本、解析文件、操作 Xcode/DartgemRuby 包管理器安装、管理 Ruby 库或工具CocoaPodsRuby gemiOS 依赖管理工具，通过 Ruby/gem 安装CocoaPods 是一个 Ruby gemgem 是 Ruby 的工具，用来安装/管理 CocoaPodsRuby 是语言，运行 gem、运行脚本Ruby （语言）↓gem （包管理器）↓CocoaPods （gem 包，依赖管理工具）

原创 为什么称 OC 的 UIKit

所以 “OC 的 UIKit” 更像是历史称呼，现代更准确说法是 UIKit（传统 UI 框架），无论用 OC 还是 Swift 都可以。当时 iOS 的主要开发语言是 Objective-C (OC)，Swift 还不存在（Swift 2014 才发布）。OC 的 UIKit：历史上用 Objective-C 调用 UIKit 时的叫法。“OC 的 UIKit” = 强调 历史语言 + UIKit 框架。UIKit 是传统的、命令式、面向对象的 UI 框架。2️⃣ 为什么叫 “OC 的 UIKit”

原创 创建一个ios小组件项目

通过系统带的命令窗口 pod init pod install 添加podfile文件。小组件入口文件@main。主入口文件@main。

原创 android 16kb 内存适配

Android 11以下的手机才会有返回mac地址。把源代码拉取下来，重新打包aar，支持16kb。

原创 React中Class 组件 vs Hooks 对照

componentDidUpdate → useEffect(() => {…}, [依赖])componentWillUnmount → useEffect 的 清理函数👉 所以在 Hooks 中，所有生命周期逻辑都通过 useEffect 来表达，只是依赖数组的不同决定了它模拟哪一个生命周期。

原创 JavaScript 对象的解构

对象解构是提取对象属性的简便写法，避免了重复写 obj.xxx。支持默认值、重命名和嵌套结构。用得好，可以让代码更简洁、更易读。

原创 React 中 Context（上下文）介绍

它允许你在组件树中，不通过 props 一层层传递的情况下，直接把数据传给任意深层的子组件。解决了“逐层传递 props”导致的代码臃肿和维护困难的问题，也叫“props drilling”。Context 是 React 用来跨组件共享数据的方案避免了手动逐层传递 props适合共享主题、用户信息、表单状态等全局或半全局数据。

原创 React 中 useRef 使用方法

useRef() 用来创建一个在组件整个生命周期中持续存在的可变引用。修改 .current 不会引起组件重渲染。既可以拿来存 DOM 节点，也可以存任意数据。

原创 React 为什么要自定义 Hooks？

在实际开发中，组件里状态管理 + 副作用处理容易混乱和重复。自定义 Hook 可以让你：分离逻辑：把复杂逻辑提取成独立的函数。复用逻辑：多个组件共用同样的逻辑（如登录检测、滚动监听、节流防抖等）。减少重复：避免 copy-paste 多段 useEffect/useState。自定义 Hook 本质是用途把多个 Hook 组合封装为复用逻辑不返回 JSX，只返回数据或方法用于组件中调用让组件更干净、逻辑更清晰提高可维护性、可读性。

原创 情绪引爆模型

情况 建议一方先发火 尝试识别背后的情绪而非内容被冤枉或指责 尝试先共情再表达自己情绪上来了 主动请求暂停，事后再聊经常出现这种模式 建议平时增加沟通和换位练习如果你愿意，也可以告诉我更具体的情境，我可以帮你们模拟一段对话或提出缓和策略。家庭的幸福，有时候就靠关键的几句“会说话”。

原创 Android sdk 升级 34到35

将 Android SDK 从 33/34 升级到 35（Android 14 → Android 15） 涉及 compileSdk、targetSdk、buildTools 版本、依赖库兼容性等的更新。