17638755181/Electron_x64_x32

Fork 0

Files

wangminngg 2bc32c2e6b first commit

2025-12-02 17:41:15 +08:00

6.4 KiB

Raw Permalink Blame History

FFI-NAPI Electron Application

基于 Electron 20 的外壳程序。

特点

源码可见：打包后 main.js、index.html、test.js 等文件保留在 resources/app 目录中
便携版：无需安装，双击运行
支持 32 位和 64 位

安装依赖

npm install

或使用国内镜像：

.\install-electron.bat

添加图标（必须步骤）

在打包前必须完成：

创建 build 文件夹：
```
mkdir build
```
准备一个 .ico 格式的图标文件
- 推荐尺寸：256x256 像素
- 必须是 .ico 格式（不是 .png 或 .jpg）
将图标文件重命名为 icon.ico
将 icon.ico 复制到 build 文件夹中
验证图标文件：
```
node verify-icon.js
```

运行开发模式

npm start

打包便携版

推荐：使用完整重新打包脚本

.\rebuild-with-icon-fix.bat

单独打包

32位便携版：

npm run build:32

64位便携版：

npm run build:64

同时打包：

npm run build

便携版使用说明

打包后的文件结构

便携版首次运行后会自解压，生成以下目录结构：

你的文件夹/
├── FFI-NAPI-App Portable x64 1.0.0.exe  # 主程序
└── (首次运行后自动生成)
    ├── resources/
    │   ├── app/                # 应用源码目录（可编辑）
    │   │   ├── main.js        # 主进程文件
    │   │   ├── index.html     # 界面文件
    │   │   ├── test.js        # 业务逻辑文件
    │   │   └── package.json   # 配置文件
    │   ├── exe/                # 外部可执行文件目录
    │   │   └── Test.exe
    │   └── electron.asar       # Electron 核心（不可编辑）
    └── ...其他 Electron 文件

便携版的优势

源码可见：所有 JavaScript 文件都在 resources/app/ 目录中，未加密
可以修改：可以直接编辑 resources/app/main.js 等文件来调整功能
便于调试：出现问题时可以直接查看和修改源码
无需重新打包：小的修改可以直接编辑文件，无需重新打包

部署到其他电脑

直接复制整个文件夹到目标电脑即可，包括：

主 .exe 文件
首次运行后生成的所有文件和文件夹

修改便携版代码

运行一次便携版程序（会自解压）
找到 resources/app/ 目录
用文本编辑器打开需要修改的文件（如 main.js）
保存修改
重新启动程序即可看到更改效果

测试便携版

.\test-portable.bat

此脚本会：

模拟便携版部署
自动复制 exe 文件夹
启动程序进行测试

输出文件

打包完成后，便携版程序将生成在 dist 目录中：

32位: FFI-NAPI-App-Portable-ia32-1.0.0.exe
64位: FFI-NAPI-App-Portable-x64-1.0.0.exe

便携版特点：

无需安装，双击即可运行
首次运行会自解压所有文件
源码保存在 resources/app 目录，可以直接修改
配置文件保存在程序同目录
可以放在 U 盘中使用

路径说明

开发环境

应用文件: 项目根目录/main.js
exe 文件路径: 项目根目录/exe/Test.exe

打包后（便携版运行时）

应用文件: resources/app/main.js（可编辑）
exe 文件路径: resources/exe/Test.exe

重要： 便携版不需要编辑任何代码就能正常运行，但如果需要修改，可以直接编辑 resources/app/ 下的文件。

常见问题

Q: 为什么选择不使用 asar 打包？

便于修改：用户可以直接修改代码，无需重新打包
易于调试：出现问题时可以直接查看源码
透明化：所有代码都是可见的，用户可以了解程序的工作原理

Q: 如何修改便携版的代码？

首次运行便携版程序，让它自解压
找到程序目录下的 resources/app/ 文件夹
用任何文本编辑器（记事本、VS Code 等）打开要修改的文件
保存后重启程序即可

Q: 修改代码后需要重新打包吗？

A: 不需要。因为代码没有打包进 asar，所以可以直接修改 resources/app/ 下的文件。

Q: 便携版的安全性如何？

A: 源码是明文的，任何人都可以查看和修改。如果需要保护代码，可以：

将 asar: false 改为 asar: true
使用代码混淆工具
使用加密方案

Q: 如何在便携版中调试？

编辑 resources/app/main.js
找到 webPreferences 配置
确保包含 nodeIntegration: true 和 contextIsolation: false
取消注释 mainWindow.webContents.openDevTools() 来打开开发者工具

目录结构

打包前（项目目录）

ffi-napi/
├── main.js                        # Electron 主进程
├── index.html                     # 应用界面
├── test.js                        # FFI 调用模块
├── package.json                   # 项目配置
├── electron-builder.yml           # 构建配置（asar: false）
├── build/                         # 构建资源目录
│   └── icon.ico                  # 应用图标
├── exe/                           # 可执行文件目录
│   └── Test.exe
└── dist/                          # 打包输出目录

打包后（便携版运行后）

程序目录/
├── FFI-NAPI-App Portable x64 1.0.0.exe
├── resources/
│   ├── app/                       # 应用源码（可编辑）
│   │   ├── main.js               # 可以用记事本打开修改
│   │   ├── index.html
│   │   ├── test.js
│   │   └── package.json
│   ├── exe/                       # 外部程序
│   │   └── Test.exe
│   └── electron.asar              # Electron 核心
├── locales/
└── ...其他文件

注意事项

源码在 resources/app/ 目录中是明文的，可以直接编辑
修改代码后无需重新打包，重启程序即可
如果需要保护代码，请修改 electron-builder.yml 中的 asar: false 为 asar: true
32位程序可以在64位系统上运行
64位程序只能在64位系统上运行
图标文件必须是标准的 .ico 格式
Windows 会缓存图标，更换图标后需要清理缓存

6.4 KiB Raw Permalink Blame History Unescape Escape