自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

夏天的博客

分享前端技术文章和干货,进步的路上一起努力,也期待你的关注和点赞!

  • 博客(505)
  • 资源 (5)
  • 收藏
  • 关注

原创 回顾2023展望2024,追逐光成为光

再见,2023!你好,2024!愿新的一年,我们都能成为更好的自己!

2024-02-08 21:42:58 1648 5

原创 rust_hdc:用纯 Rust 重写鸿蒙设备连接器(HDC),一颗 3MB 二进制替代整个 C++ 工具链

协议层是性能敏感 + 安全敏感的:HDC 走 TCP/USB 批量传输,分包、握手、并发会话,Tokio 异步运行时天然匹配;跨平台一致性:macOS(IOKit)、Linux(libusb)、Windows、OHOS,同一套代码一个 flag 切换目标;产出即库:Rust 生态的 crate 分发让"工具"和"库"天然合一,crates.io 发布后即用。HDC 协议不大——核心 500 行 Rust 就能说清楚——但它连接的是整个鸿蒙开发者生态的日常。

2026-09-12 15:33:59 197

原创 把一个“三行 API“的老库鸿蒙化,我踩穿了四个坑:react-native-video-duration × RNOH 0.84 适配实录

是一个只有 1 个异步方法、无 codegen spec、走老架构访问的"古董级"三方库。Metro 根本打不进这个库—— 宿主的没包含 symlink 真实目录;是错的—— RNOH 0.84.3 真机上报的是'harmony',JS 三元分支直接走反;模块注册成功 ≠ 方法可见—— 纯 ArkTS 注册 + 裸的 delegate 不会暴露任何方法,必须补 C++methodMap_spec 类;hdc 非 root 写不进应用沙箱。

2026-09-07 07:05:25 198

原创 React Native 三方库鸿蒙适配实战:react-native-emoji-popup(Fabric 自定义组件)从 0 到 1

已实现——C++ Package 只需继承它① 手写 Descriptor)——注意:不要 import codegen 生成的 ETS.ts② 组件本体)——@Builder入口 +@Component@Builder// rnohContext 已废弃@Componentpublic ctx!// rnohContext 已废弃 } @ Component export struct EmojiPopupViewComponent {public ctx!

2026-09-06 21:52:17 258

原创 从 0 到 1:react-native-transformer-text-input 鸿蒙化适配实录

面对一个“看起来必须要有 worklets UI runtime 和原生装饰视图才能活”的库,鸿蒙适配的破局点不是硬造原生能力,而是识别出库作者自己已经认可的 JS 降级路径(web 先例),用平台文件机制把它平移过来,再尽力保住 selection 语义与 onChangeText 契约。

2026-09-06 21:27:31 257

原创 从零实现父亲节鸿蒙 App 教程

恭喜你完成了第一个鸿蒙 App!🎉。

2026-06-20 14:50:28 282

原创 小白实战手记:React Native 应用部署到鸿蒙设备全流程详解

但到了鸿蒙平台,部署应用变成了一个多步骤的手动流程:打包 JS → 复制 bundle → 构建 HAP → 安装到设备 → 启动应用。每个步骤都有可能出错,而且错误信息对新手来说完全不友好。我花了很多时间才搞清楚整个流程,所以把所有步骤详细记录下来,希望能帮到其他新手。RNOH 是开源鸿蒙社区的 React Native 适配框架,它让开发者可以用 React Native 技术栈构建鸿蒙应用。你在 JS 层写的 <View>、<Text>、<WebView>↓ RNOH 桥接。

2026-06-07 22:13:31 409

原创 小白的鸿蒙适配之旅:让 react-native-share 跑在 HarmonyOS 上

React Native(简称 RN)是 Facebook 出的一个框架,让你用 JavaScript 写代码,就能同时跑在 Android 和 iOS 上。比如你写了一个「分享到微信」的功能,Android 和 iOS 都能用同一套 JS 代码调用。别人写好的、可以拿来用的代码包。就是一个三方库——它帮你在 RN 里一行代码搞定分享到 Facebook、WhatsApp 等社交平台。华为自己做的操作系统。

2026-06-07 18:57:23 312

原创 React Native 三方库 react-native-share 的 HarmonyOS 适配实战

是 React Native 生态中最流行的社交分享库之一,Star 数超过 12K,支持将文本、图片、视频等内容分享到 Facebook、Twitter、WhatsApp、Instagram 等数十个社交平台。通用分享open):调起系统分享面板,用户自行选择目标应用定向分享):直接将内容分享到指定的社交应用应用检测):判断目标应用是否已安装Base64 检测):判断 URL 是否为 Base64 编码文件Instagram Stories 分享?抖音分享。

2026-06-07 16:37:41 280

原创 React Native 三方库 react-native-version-number 鸿蒙适配实战:从零到版本信息展示

是一个轻量级 React Native 库,用于获取应用的版本号、构建号和包名标识。在 iOS 和 Android 上,它通过读取原生配置(Info.plist)获取版本信息。鸿蒙适配版本由CPF-RN团队维护,使用鸿蒙原生的API 读取应用包信息。将集成到 HarmonyOS NEXT 平台的核心流程可概括为“源码复制 + 手动桥接”JS 端:安装,Metro 自动重定向 importArkTS 端:复制 3 个源文件,修改 import 路径,实现调用C++ 端:手动创建.cpp,注册。

2026-06-07 12:02:00 339

原创 React Native 三方库 react-native-tts 鸿蒙适配实战:从零到语音播报

是一个 React Native Text-To-Speech 语音合成库,支持 iOS、Android 和 Windows 平台,提供文本朗读、语速/音调控制、语音列表获取等能力。鸿蒙适配版本由CPF-RN团队维护,已适配 OpenHarmony 平台,使用鸿蒙原生语音合成引擎实现底层能力。将集成到 HarmonyOS NEXT 平台的核心流程可概括为“三端对齐 + Codegen 桥接”JS 端:安装,Metro 自动重定向 importArkTS 端。

2026-06-07 10:54:33 322

原创 React Native 应用适配鸿蒙PC 实战:从白屏到成功运行

三者的版本必须严格对齐。RNOH 的版本号对应了它所支持的 React Native 版本。例如 RNOH 0.82.30 对应 RN 0.82.x。如果 RN 版本过高,会出现 TurboModule 不兼容;版本过低,则可能出现 API 缺失。

2026-06-07 10:53:54 367

原创 鸿蒙 ArkTS 编译警告消除实战:从 5 个 WARN 到 0 警告

`router.pushUrl()` | `this.getUIContext().getRouter().pushUrl()` | API 18 | 页面跳转 || `router.clear()` | `this.getUIContext().getRouter().clear()` | API 18 | 清空路由栈 || `router.back()` | `this.getUIContext().getRouter().back()` | API 18 | 返回上一页 |

2026-06-05 00:04:19 375

原创 鸿蒙 AR 人体骨骼关键点识别实战:使用 AREngine 实现实时人体跟踪

**💥 踩坑**:`user_grant` 权限不仅要在 `module.json5` 中声明,还**必须**在代码中调用 `requestPermissionsFromUser`。**解决**:SDK 路径为 `DevEco-Studio.app/Contents/sdk/default/hms/`,确保通过 SDK Manager 安装了 AR Engine。**原因**:ArkTS 的 `@Builder` 函数内不能包含 `let`/`const` 声明语句,只能有 UI 组件语法。

2026-06-04 21:49:42 432

原创 鸿蒙应用内添加服务卡片到桌面:formProvider.openFormManager 实战

`bundleName` | `com.nutpi.myapplication` | 应用的包名,与 `AppScope/app.json5` 中的 `bundleName` 一致 || parameters.`form_name` | `DictionaryForm` | 卡片名称,与 `form_config.json` 中的 `name` 一致 |**可能原因**:`form_name` 与 `form_config.json` 中的 `name` 不一致。

2026-06-04 21:20:55 330

原创 鸿蒙服务卡片实战:为新华字典应用添加桌面快捷查询卡片

*区分方法:** 只要 `form_config.json` 中设置了 `updateEnabled: true` 或 `formVisibleNotify: true`,卡片就是动态的,必须使用 `postCardAction`。**原因**:卡片配置了 `formVisibleNotify: true`,被识别为**动态卡片**,但 `FormLink` 只适用于**静态卡片****解决**:将 `FormLink` 替换为 `Column.onClick` + `postCardAction()`

2026-06-04 21:11:30 264

原创 鸿蒙 6 新华字典实战:从零到一用 ArkTS 开发原生鸿蒙应用

**注意**:`data` 是数组而非单个对象,且字段名为 `radical`(单数)而非 `radicals`。**解决**:`extraData` 需要 `JSON.stringify()` 序列化,同时 `Content-Type` 必须设为 `application/json`。**解决**:确认 SDK 版本对应的 API。或者在设备设置中关闭开发者模式。**解决**:自定义 UI 方法需添加 `@Builder` 注解,并在 `build()` 中用 `this.` 调用。

2026-06-04 20:38:57 336

原创 环境搭建教程:HarmonyOS PC 录屏工具(Qt5 + OHOS Native Media)

本教程指导您从零搭建 Screenrecordingtools 项目的开发环境。该项目基于 HarmonyOS (API 23),使用 Qt5 Widgets 构建 UI,通过 OHOS Native Media API 实现屏幕录制。

2026-06-03 12:57:49 301

原创 环境搭建教程:HarmonyOS PC 录屏工具(Qt5 + OHOS Native Media)

本教程指导您从零搭建 Screenrecordingtools 项目的开发环境。该项目基于 HarmonyOS (API 23),使用 Qt5 Widgets 构建 UI,通过 OHOS Native Media API 实现屏幕录制。

2026-06-03 12:03:12 467

原创 hionic框架设备信息获取:@ionic-native/device 插件在鸿蒙PC平台的适配实践

要点说明双桥架构hionic 同时支持 Cordova 和 Capacitor 桥,但插件只注册一个桥时另一个不可见Cordova 模块系统不兼容的define函数闭包隔离,同步脚本无法使用在 OHOS 不可用只支持 Android/iOS 的原生消息通道WebView 加载路径始终确认Node.js 版本兼容用 DevEco 内置 Node.js v18 构建误判桥接注册为返回'android',需用二次判断最终方案纯 JS 解析检测 +降级参考资源。

2026-06-03 08:36:44 317

原创 应用内浏览器:@ionic-native/in-app-browser 插件在鸿蒙PC平台的适配实践

要点说明InAppBrowser 是 Cordova 风格插件,使用而非动态 import模块名不匹配hionic 生成的项目模块名为capacitor,但插件声明为cordova,需手动整合原生代码桥接文件cordova.js是 Cordova 插件运行的前提,必须打包到 rawfileoptions 格式Cordova 插件的 options 是逗号分隔字符串,而非 JSON 对象网络权限使用前需声明加载顺序桥接文件必须在 React 应用之前加载(index.html 中的<script>顺序)

2026-06-02 14:31:56 300

原创 @capacitor/camera 插件在鸿蒙PC平台的适配实践

要点说明动态 import使用而不是静态 import,兼容浏览器开发模式webDir 一致性的webDir必须与前端构建输出目录一致桥接文件cordova.js必须跟随 Web 资源一起部署到 rawfile权限声明user_grant权限需要同时声明reason和usedScene构建顺序前端构建 → 同步资源 → 编译原生 → 部署,不能跳过中间步骤。

2026-06-02 11:30:54 263

原创 使用 hionic 将 Web 应用部署到鸿蒙PC平台

Web 应用 (React)│▼Capacitor 封装 (跨平台桥接层)│▼hionic CLI 添加 OpenHarmony 平台│▼OpenSSL 预编译库集成 ← 关键步骤,容易遗漏│▼DevEco Studio 编译 → HAP 包│▼安装到鸿蒙设备 / 模拟器 ✅一次开发,多端部署——同一份 React/Vue/Angular 代码,可以同时构建 Android、iOS 和 OpenHarmony 三平台的原生应用。

2026-06-02 10:13:57 415

原创 鸿蒙Flutter 三方库 country_codes 的 适配实战

获取设备当前语言和国家(如zhCN获取本地化的国家名称(如在英文环境下显示 “China”,中文环境下显示 “中国”)ISO 3166-1 双字母/三字母代码查询国际电话区号查询该插件最初支持 Android、iOS、macOS 三个平台,本次任务将其适配到平台。项目地址将一个 Flutter 插件适配到 OHOS 平台,核心路径可以概括为三步走1. 找对应 ── 找到 OHOS 对每个 Android 原生 API 的等价实现2. 保契约 ── 确保方法通道名、方法名、返回值结构完全一致。

2026-05-28 16:28:27 660 2

原创 Flutter 三方库适配鸿蒙教程

Flutter 插件通过→ 原生端 (Java / Kotlin / Swift / ObjC)原本已支持 Android、iOS、macOS,我们需要为其新增OHOS平台支持。Dart 层零修改—— MethodChannel 是跨平台抽象,OHOS 适配只需替换原生端实现ArkTS 遵循标准接口—— 实现即可本文档基于项目的实际适配经验编写,相关代码可在查看完整源码。

2026-05-28 08:02:23 491

原创 第一篇:鸿蒙 6 来了!AtomCode 助力鸿蒙生态开发

项目状态鸿蒙 6 + SDK 23🔥 已就绪,生态爆发前夜AtomCode 安装✅ 一行命令搞定实战项目 haronyos🚀 包含完整 Stage 模型、Ability 配置、资源管理开发体验⭐ AI 辅助,效率倍增。

2026-05-26 21:36:33 630

原创 Tauri + 鸿蒙PC:在鸿蒙系统上运行跨平台桌面应用

Tauri是一个轻量级的跨平台桌面应用框架。它允许开发者使用前端技术(HTML / CSS / JavaScript)构建 UI 界面,同时用Rust语言编写底层业务逻辑,打包为原生的桌面应用。✅Tauri 2.0 适配鸿蒙— 核心 IPC + WebView + 窗口管理已跑通✅Rust ↔ ArkTS 双向通信— 通过 NAPI + ohos-rs/ability✅交叉编译工具链— macOS 上可交叉编译 ARM64 的 Rust 动态库✅完整的 HAP 打包流程一键构建。

2026-05-22 13:17:46 953

原创 贡献指南 | 参与 Harmonybrew 开源社区共建规范

Harmonybrew 是面向 OpenHarmony/鸿蒙系统的 Homebrew 移植开源项目,依托多仓库协作模式,实现包管理器适配、软件包移植、工具适配、文档维护等全链路能力。为规范社区贡献流程、统一协作标准、提升共建效率,本文将详细说明、新手友好贡献方向,帮助开发者快速上手社区共建。本项目仓库分为与两大类,两类仓库的定位、迭代逻辑、贡献规范差异较大,所有社区贡献者需严格遵循对应仓库的贡献规则,保证项目迭代的规范性与稳定性。

2026-05-21 09:02:56 370

原创 特色软件 | 补齐 鸿蒙 PC 开发短板,Harmonybrew 的环境适配方案

针对鸿蒙 PC 系统底层的兼容性限制、安全策略约束、生态适配短板,Harmonybrew 定制了多款专属工具包,覆盖 C/C++ 编译、Python 开发、系统环境伪装、工具链兼容全场景,各工具各司其职、相互配合,构建完整兼容开发环境。软件包名称核心功能与适配原理解决的核心痛点ohos-sdkHarmonybrew 官方收录分发的鸿蒙开发工具套件,内置 clang、llvm-ar、lld 等全套编译链接工具链。同时基于官方lld 代码签名特性,对 lld 链接器进行脚本封装,默认开启链接器自动签名能力。

2026-05-21 08:23:40 735

原创 Electron-OH 37.2.1 正式发布:鸿蒙PC开发体验全面升级,跨端开发再提速 Electron-OH 37.2.1 正式发布:鸿蒙PC开发体验全面升级,跨端开发再提速

Electron‑OH 37.2.1 以NodeHandle 架构为核心,把鸿蒙系统能力全面开放给 Web 开发者,真正做到一套代码、原生体验、全场景适配。无论是办公工具、直播会议、设计软件还是教育应用,都能快速落地鸿蒙生态,大幅降低迁移与维护成本。欢迎开发者升级体验,提交 Issue 与 PR,共建稳定、高效的鸿蒙跨平台开发生态。#Electron #鸿蒙开发 #OpenHarmony #跨平台开发 #Electron‑OH。

2026-05-20 09:06:46 355

原创 2026年Electron 鸿蒙PC环境搭建指南

确保以下关键库文件存在于。

2026-05-20 08:50:34 487

原创 一文看懂 OpenHarmony 跨平台框架生态:9 大仓库全解析

OpenHarmony 跨平台 SIG 已形成全覆盖、多技术栈、低门槛Web 前端→ 优先 RN / Cordova / Ionic移动端原生→ 优先 KMP / Flutter桌面/嵌入式→ 优先 Electron / Qt基础能力补齐→ 直接用 ApplicationTPC 三方库所有框架均遵循开源规范,持续迭代更新,是现有应用一键上鸿蒙的最优路径。

2026-05-20 08:11:55 672

原创 Harmonybrew:让Homebrew落地OpenHarmony,补齐鸿蒙命令行包管理能力

Harmonybrew 填补了OpenHarmony平台统一命令行包管理的空白,将成熟稳定的Homebrew生态引入鸿蒙体系,彻底告别鸿蒙设备手动部署工具的繁琐流程。目前项目仍在持续迭代施工中,高优先级适配的开发板、容器场景已可稳定用于日常开发、CI测试、工具部署;未来随着鸿蒙PC适配完善,将全面覆盖鸿蒙全设备形态,成为OpenHarmony开发者必备的基础工具。对于鸿蒙开发者而言,掌握Harmonybrew可以极大提升终端开发、工具调试、环境部署的效率,是深耕OpenHarmony生态的必备技能。

2026-05-17 18:14:26 673

原创 鸿蒙PC Rust 开发神器:AtomCode安装指南

作为优质的开源AI编程助手,完全适配鸿蒙PC系统,原生支持Rust项目开发,依托Rust底层构建、性能极致流畅,同时兼容任意大模型,可实现代码读取、编辑、命令运行、自主校验全流程自动化,是鸿蒙PC Rust开发的刚需神器。,安装完成后自动适配系统环境,内置完整Git工具,无需额外配置环境变量,可直接用于代码仓库拉取、版本提交、项目初始化等操作,满足AtomCode及Rust项目的版本管理需求。为保证与鸿蒙PC系统、AtomCode工具完美兼容,推荐安装官方适配的。打开鸿蒙PC应用市场,搜索安装。

2026-05-17 16:11:51 643

原创 鸿蒙PC平台 Rust 环境极简搭建指南|附AI开发神器AtomCode推荐

目前鸿蒙PC平台对 Rust 的适配已经非常成熟,依托社区官方一键安装脚本,开发者可以一分钟完成环境搭建,快速开启 Rust 高性能开发、系统开发、AI应用开发。搭配开源AI开发工具 AtomCode,能够进一步降低鸿蒙 Rust 开发门槛,实现「环境搭建 - 编码开发 - 调试验证」全流程高效落地。后续我也会持续更新鸿蒙PC Rust 实战教程、项目开发案例,欢迎持续关注!

2026-05-17 15:11:44 367

原创 鸿蒙三方库适配读懂 `HPKBUILD`:lycium 怎么知道「下载谁、怎么编、装到哪」?

在 OpenHarmony 三方库lycium体系里,每个库目录下会有一个 HPKBUILD文件。你可以把它理解成「构建说明书」:用Shell 变量描述包是谁、版本多少、从哪下载,再用若干个函数描述解压后要改什么、怎么交叉编译、产物拷贝到哪、要不要打 HNP 包。本文件由 lycium/script/build_hpk.sh通过 source HPKBUILD读入并调用其中的函数;你在 lycium根目录执行 ./build.sh AES时,脚本会进入 thirdparty/AES。

2026-04-12 17:43:49 426

原创 鸿蒙三方库适配读懂 `README_zh.md`:中文适配说明里每段在说什么?

在 OpenHarmony / lycium 三方库目录里,README_zh.md通常承担「给中文读者看的说明书」:用自然语言说明这是什么库、编出来在哪、怎么编、怎么测,不必像 HPKBUILD那样写成 Shell 脚本。本仓库的 thirdparty/AES/README_zh.md对应包名AES、上游 tiny-AES-c。下面按原文章节顺序,把每段话的用途、背后的约定、和别的文件怎么对照讲清楚,方便新人5 分钟建立全局印象,需要细节时再翻 HPKBUILD。

2026-04-12 17:42:44 425

原创 鸿蒙三方库适配读懂 `thirdparty/AES/.gitignore`:哪些文件不该进 Git?

gitignore是 Git 的「忽略清单」:列在里面的路径或模式,默认不会被git add进版本库。三方库适配目录里往往既有需要长期保存的脚本和文档,也有下载的源码包、本地编译目录、日志——若全部提交,仓库会膨胀,且容易产生机器相关路径、二进制冲突。本仓库的 .gitignore压缩包:用以开头的模式只忽略仓库根目录下的.tar.gz.tgz不忽略子目录(例如 output/)里的归档,方便把构建产物一并纳入版本管理。构建树:忽略 tiny-AES-c-*/和解压后的 *-build。

2026-04-12 17:41:07 426

原创 读懂 `hnp.json`:鸿蒙PC 三方库打包时的这张「小配置」

在lycium适配 OpenHarmony / 鸿蒙三方库时,有些仓库根目录会放一个 hnp.json。它只有几行,看起来像普通 JSON,作用却和打包、分发有关:告诉工具链(常见是 hnpcli)——这是一份 HNP 相关配置,里面写着组件叫什么、版本多少,以及可选的安装规则。本文以本仓库 thirdparty/AES/hnp.json为例,逐个字段说明含义,并说明它和 HPKBUILD里archive()是怎么配合的。要不要维护这个文件升级版本时要改哪里。hnp.jsonhnp.json是。

2026-04-12 17:40:12 978

原创 鸿蒙三方库适配HPKCHECK 文件执行流程详解

HPKCHECK 文件的执行方式✅ 通过执行test.sh脚本✅test.sh使用source命令加载HPKCHECK✅ 调用HPKCHECK中定义的函数✅ 须在 OpenHarmony 设备(或等效环境)上运行执行流程test.sh → checkhpk() → source ./HPKCHECK → openharmonycheck() → 生成测试日志。

2026-04-12 17:38:13 416

【Node.js开发】Prisma vs TypeORM:现代ORM框架对比及Prisma在Nest.js中的优势分析与迁移实践

内容概要:本文详细对比了2024年Node.js中ORM框架的选择,推荐使用Prisma而非TypeORM。文章指出Prisma在更新频率、下载量、社区支持等方面均优于TypeORM。Prisma拥有更详细的官方文档和更丰富的生态支持,且由商业公司维护,确保了问题的及时解决。在开发体验方面,Prisma解决了TypeORM中存在的多个问题,如findOne(undefined)返回第一条记录、synchronize:true导致数据丢失等。Prisma的接入成本更低,开发者只需通过PrismaService即可操作所有数据库API,而TypeORM则需手动导入多个Repository。Prisma提供更好的类型安全性,自动推导类型,避免了TypeORM中类型提示不准确的问题。此外,Prisma在创建实体、条件创建或更新、聚合函数、分页等功能上也表现出色,提供了简洁高效的解决方案。; 适合人群:对TypeORM有一定使用经验并希望提升开发效率的开发者,尤其是Nest.js项目的开发者。; 使用场景及目标:①评估和选择更适合项目的ORM框架;②简化数据库操作,提高开发效率;③利用Prisma的类型安全性和生态优势,优化项目开发流程。; 阅读建议:建议读者亲自尝试Prisma,体验其简洁高效的特点。特别是对于那些已经在使用TypeORM的开发者,可以参考文中提到的具体问题和解决方案,逐步迁移到Prisma。同时,关注Prisma的官方文档和社区支持,以便更好地掌握其用法。

2025-07-26

【TypeScript编程】Type与Interface的区别详解:面向对象设计与复杂类型组合的应用场景分析

内容概要:文章详细对比了TypeScript中type和interface的区别及其适用场景。两者均可用于定义对象类型,但在扩展方式、声明合并、联合类型支持等方面存在差异。interface支持继承扩展和声明合并,适合面向对象编程、类的设计和实现;而type通过交叉类型扩展,支持联合类型和交叉类型定义,适合复杂类型组合和类型别名定义。此外,interface仅限于对象类型定义,而type可以定义基本类型、元组、联合类型等。两者在实际开发中可以互补使用,根据具体需求选择合适的方式。 适合人群:有一定TypeScript基础的开发者,尤其是对类型系统有深入了解需求的技术人员。 使用场景及目标:①理解TypeScript中type和interface的核心区别;②掌握二者在不同场景下的最佳实践;③提高在项目中选择合适类型定义的能力。 阅读建议:由于type和interface各有优势和局限,建议读者结合实际项目需求,深入理解两者的特性和应用场景,灵活运用到代码设计和开发中。

2025-07-26

Web开发跨域资源共享(CORS)机制详解:HTTP头配置与实战案例分析

内容概要:本文详细介绍了跨源资源共享(CORS)机制,包括其基本概念、工作原理及关键的HTTP头部信息。CORS是基于HTTP头部的机制,用于控制浏览器是否允许跨域请求。文中解释了常见的CORS响应头,如Access-Control-Allow-Origin、Access-Control-Allow-Credentials、Access-Control-Allow-Headers等的作用和用法。文章还通过具体的代码示例展示了如何在Node.js环境中配置CORS,包括简单的GET和POST请求的跨域处理,以及如何使用Vite进行跨域请求的代理配置。此外,还讨论了携带Cookie的跨域请求和处理img、canvas等标签的跨域问题。 适合人群:具备一定前端和后端开发经验的开发者,特别是那些需要处理跨域问题的技术人员。 使用场景及目标:①帮助开发者理解CORS的工作原理,掌握常见的CORS头部信息及其应用场景;②指导开发者在Node.js环境中配置CORS,解决实际项目中的跨域问题;③介绍如何使用Vite代理配置解决前端开发中的跨域问题;④讲解如何处理img、canvas等标签的跨域访问问题。 其他说明:本文不仅提供了理论知识,还结合了实际代码示例,帮助读者更好地理解和应用CORS机制。建议读者在学习过程中多动手实践,结合代码调试加深理解。

2025-07-26

前端开发前端架构设计与工程化的核心理念及实践:提升开发效率与项目管理质量的系统方法论

内容概要:本文深入探讨了前端架构设计与工程化的概念及其相互关系。前端架构设计旨在规划一系列抽象模式,指导项目开发;前端工程化则是将系统化的方法应用于开发、运行和维护。两者相辅相成,优秀的设计需向工程化妥协,确保实际可行性。文章强调了架构设计的三个通用原则:合适原则、简单原则和演化原则。同时,详细介绍了前端工程化的内容,包括规范制定、技术选型、开发与测试、构建与部署以及监控等方面。文中还结合作者的实际工作经验,分享了在小团队中如何进行前端工程化的具体实践,如使用GitLab、Jenkins等工具进行版本管理和自动化部署。 适合人群:具备一定前端开发经验的研发人员,特别是工作1-3年的前端工程师。 使用场景及目标:①帮助读者理解前端架构设计与工程化的概念及其重要性;②提供实际项目中的前端工程化实践案例,如规范制定、技术选型、开发与测试、构建与部署、监控等环节的具体操作方法;③引导读者思考如何在实际工作中应用这些理念和工具,提升项目的开发效率和质量。 阅读建议:本文内容丰富,涵盖了前端开发的多个方面。建议读者结合自身的工作场景,重点关注与自己当前项目相关的内容,并尝试将其应用到实际工作中。对于一些具体的工具和技术,可以通过查阅官方文档或参考其他资源进一步学习。

2025-07-26

前端开发基于Vue3的上下无限滚动实现:页面垂直方向持续循环滚动的设计与优化

内容概要:本文介绍了如何在Vue3中实现上下无限滚动的效果。首先,准备基础页面并隐藏滚动条,然后通过`scrollTo`方法结合`requestAnimationFrame`实现持续滚动。为了避免滚动到底部停止的问题,采用将滚出视口的元素复制到列表末尾的方式,确保滚动永不停止。针对长时间运行可能导致的内存占用问题,提出了在滚动完一轮时重置数据的优化方案,以保证用户体验流畅。最后提供了完整的代码示例,包括HTML、TypeScript和LESS样式,详细展示了实现过程。 适合人群:熟悉Vue3框架,有一定前端开发经验的开发者。 使用场景及目标:①适用于需要展示大量动态更新内容的网页,如新闻流、消息列表等;②学习如何优化无限滚动避免性能问题;③掌握Vue3中`ref`、`onMounted`等API的使用。 阅读建议:在理解代码逻辑的同时,重点关注性能优化部分,实践时可尝试调整参数值观察不同效果,并结合浏览器开发者工具监控内存使用情况。

2025-07-26

前端开发Vue组件管理新趋势:实现远程组件加载优化团队协作与项目更新效率

内容概要:本文探讨了Vue组件管理的新趋势——远程加载组件的方法。文章指出传统方式下,组件库升级时项目需同步升级依赖并重新部署,较为繁琐。为解决这一问题,提出了一种新思路:不将组件库作为依赖包安装,而是通过HTTP网络请求从静态服务器获取组件代码并直接解析渲染。具体实践步骤包括:使用Express搭建静态服务存放组件代码;在项目中通过fetch发起网络请求获取组件代码;利用new Function执行代码并渲染组件。这种方式使得组件库升级后,项目无需更新依赖或重新部署即可获取最新组件功能。 适合人群:有一定前端开发经验,特别是对Vue有一定了解的研发人员。 使用场景及目标:①希望减少组件库升级带来的频繁项目更新和部署工作量;②提升团队协作效率,快速集成最新组件功能;③探索Vue组件管理的新方法和技术。 阅读建议:本文提供了详细的实践案例,在阅读过程中应重点关注远程加载组件的具体实现步骤,并尝试动手实践,以便更好地理解其工作原理和应用场景。

2025-07-26

电脑软件快捷键.doc

这是一份完整的办公软件的快捷键知识,超级适合各种办公人员和学生,都是满满的干货,大家赶紧收藏起来呀!

2019-12-16

春运抢票软件,买票轻轻松松

这是一款12306春运抢票软件

2023-01-11

Chrome90_V90.0.4430.72_XiTongZhiJia.zip

Chrome浏览器90历史版本,有32位的和64位的

2022-01-10

程序员必备专业词汇1700词.docx

该文档里面有完整的计算机专业单词词汇,可以运用到各个英文软件,简单又实用的干货,走过路过的朋友们不要错过,赶紧下载吧!

2019-12-15

web前端知识总思维导图.emmx

一份超级齐全的web前端考试复习脑图,里面有JavaScript+html+css+jquery的知识点总结。

2020-02-27

终面中谈薪资的准则和技巧(offer必备).pdf

关于如何谈薪资这一问题的详细解读

2021-05-23

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除