👋 欢迎来到Hawkeye-xb 的博客儿!
https://grps.hawkeye-xb.xyz/: GitHub Release API 代理服务，避免 GitHub API 访问限制。
P-Pass File: 基于 WebRTC 的文件传输工具。
Copy Checklist Web: 可以创建副本的确认清单。
Minesweeper: 扫雷小游戏。
Chromium 的“后门”：CommandLine
概念 Chromium（和Chrome）接受命令行开关，以启用特定功能或修改其他默认功能；Electron CommandLine Class 就是用于操作Chromium读取的应用程序的命令行参数的。 ...
生命周期
生命周期函数可以分为 APP 的生命周期，创建视图（BrowserWindow、BrowserView）和插件的生命周期。 APP LifeCycle will-finish-launching ready: electron 已经准备好，可以创建 BrowserWindow，调用 dialog、ipc 等模块 before-quit will-quit quit 注: 在 Windows 系统中，因系统关机/重启或用户注销而关闭，before-quit will-quit quit 事件不会被触发。如果有 fork 启动的进程，可以利用心跳结合退出函数来关闭。 ...
进程间通信 —— IPC
背景 进程间通信（IPC，Inter-Process Communication）是 Electron 中构建功能丰富的桌面应用程序的关键部分之一。在深入探讨 Electron IPC 的实现之前，我们先来了解这种设计的背景。 ...
Trae 开发体验，半天完成 “扫雷” 小游戏
Github 地址 游戏地址 文档地址 背景 最近因为其他原因，借助 Trae 完成了这款“扫雷”小游戏。本来打算是参与掘金产品体验活动的，无奈这台五年前的 MacBook 内存实在支撑不住，把存档和截图都删了。那就就着这个项目，聊聊 AI 对前端开发的影响吧。 ...
Trae 纯黑盒开发体验，两小时完成一款APP
前言 早就听闻 Cursor AI 编程大名，由于对 Claude、GPT-4o 有过粗浅的体验，又因为续费购买麻烦（贵），虚拟卡的余额用完了就没有续费，所以一直没有体验过这类工具。 从作为研发，个人的角度出发，一直认为和问答方式，白盒使用模型辅助编程没有太大的区别，都应该审核生成的代码。 然而在某书刷到【XX补光灯】的项目后对我冲击非常大，再次让我意识到，大部分的项目，技术从来不是壁垒。 在准备使用 Deepseek + vscode 插件方案的时候，发现了 Trae AI 这款工具。 ...
Electron 客户端项目从搭建到分发的全流程（含pipeline）
最近在开发基于 WebRTC 做数据传输的文件管理工具，P-Pass File 需要对本地文件做读写操作，大量的操作干脆就直接以本地服务的方式去处理了。 之前为了快速开发客户端，使用 electron-forge vite ts 模板快速创建项目。可不曾想在主进程中使用 fork、child_process 启动 node 服务，vite 构建出来的产物会循环的启动 app，直接导致设备无法使用（ issue 地址 ）。找不出解决的办法，无奈只能使用老一套的方案处理了。 ...
使用 peer 实现 WebRTC 数据传输
为了实现远端设备可访问，这里选用了 WebRTC 作为 P2P 数据传输方案。避免繁琐的内网穿透处理。Peer使用方式可以直接跳转 什么是 NAT NAT（Network Address Translation，网络地址转换）是一种在计算机网络中广泛使用的技术，主要用于将私有网络中的IP地址转换为公共网络中的IP地址。NAT的主要目的是解决IPv4地址短缺的问题，并提供一定程度的网络安全。 ...
koa 快速开发一个文件服务器
一个网盘类型的项目，肯定离不开文件系统。用于快速验证流程，这里使用了 node koa 作为文件系统服务，运行在本地。 初始化项目 照着 koa 官方文档来，当然是没有错的。但是为了更好的开发，我们需要引入更多的依赖，后续逐步添加也可以。 ...
Electron-forge + Vite + Typescript + Vue3 初始化项目
初始化 Electron Vite + TypeScript npm init electron-app@latest my-new-app -- --template=vite-typescript 安装 Vue3 npm install vue@latest 安装 Vue3 插件 npm install @vitejs/plugin-vue 修改 renderer 配置 vite.renderer.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config export default defineConfig({ plugins: [vue()], }); 调整目录(按需) ├── main.ts ├── preload.ts ├── renderer │ ├── App.vue │ └── index.ts └── types 调整 index.html 入口文件 src="/src/renderer/index.ts" <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <div id="app"></div> <script type="module" src="/src/renderer/index.ts"></script> </body> </html> 调整脚本入口文件 /src/renderer/index.ts ...
几个关于字体和Electron有趣的面试题
经过这么些面试，对于所做过的字体和 Electron，要么不根据项目来问，直接就是 Vue 原理，要么就是前端八股，最多也就是几个简单的 Electron 使用的问题。没想到在非互联网大厂的面试，碰到几个非常有意思的问题。 ...