235 lines
6.4 KiB
Markdown
235 lines
6.4 KiB
Markdown
# FFI-NAPI Electron Application
|
||
|
||
基于 Electron 20 的 外壳程序。
|
||
|
||
## 特点
|
||
|
||
- **源码可见**：打包后 main.js、index.html、test.js 等文件保留在 resources/app 目录中
|
||
- **便携版**：无需安装，双击运行
|
||
- **支持 32 位和 64 位**
|
||
|
||
## 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
或使用国内镜像：
|
||
|
||
```bash
|
||
.\install-electron.bat
|
||
```
|
||
|
||
## 添加图标（必须步骤）
|
||
|
||
**在打包前必须完成：**
|
||
|
||
1. 创建 `build` 文件夹：
|
||
```bash
|
||
mkdir build
|
||
```
|
||
|
||
2. 准备一个 `.ico` 格式的图标文件
|
||
- 推荐尺寸：256x256 像素
|
||
- 必须是 `.ico` 格式（不是 `.png` 或 `.jpg`）
|
||
|
||
3. 将图标文件重命名为 `icon.ico`
|
||
|
||
4. 将 `icon.ico` 复制到 `build` 文件夹中
|
||
|
||
5. 验证图标文件：
|
||
```bash
|
||
node verify-icon.js
|
||
```
|
||
|
||
## 运行开发模式
|
||
|
||
```bash
|
||
npm start
|
||
```
|
||
|
||
## 打包便携版
|
||
|
||
### 推荐：使用完整重新打包脚本
|
||
|
||
```bash
|
||
.\rebuild-with-icon-fix.bat
|
||
```
|
||
|
||
### 单独打包
|
||
|
||
32位便携版：
|
||
```bash
|
||
npm run build:32
|
||
```
|
||
|
||
64位便携版：
|
||
```bash
|
||
npm run build:64
|
||
```
|
||
|
||
同时打包：
|
||
```bash
|
||
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 文件
|
||
```
|
||
|
||
### 便携版的优势
|
||
|
||
1. **源码可见**：所有 JavaScript 文件都在 `resources/app/` 目录中，未加密
|
||
2. **可以修改**：可以直接编辑 `resources/app/main.js` 等文件来调整功能
|
||
3. **便于调试**：出现问题时可以直接查看和修改源码
|
||
4. **无需重新打包**：小的修改可以直接编辑文件，无需重新打包
|
||
|
||
### 部署到其他电脑
|
||
|
||
直接复制整个文件夹到目标电脑即可，包括：
|
||
- 主 `.exe` 文件
|
||
- 首次运行后生成的所有文件和文件夹
|
||
|
||
### 修改便携版代码
|
||
|
||
1. 运行一次便携版程序（会自解压）
|
||
2. 找到 `resources/app/` 目录
|
||
3. 用文本编辑器打开需要修改的文件（如 `main.js`）
|
||
4. 保存修改
|
||
5. 重新启动程序即可看到更改效果
|
||
|
||
### 测试便携版
|
||
|
||
```bash
|
||
.\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 打包？
|
||
|
||
A:
|
||
- **便于修改**：用户可以直接修改代码，无需重新打包
|
||
- **易于调试**：出现问题时可以直接查看源码
|
||
- **透明化**：所有代码都是可见的，用户可以了解程序的工作原理
|
||
|
||
### Q: 如何修改便携版的代码？
|
||
|
||
A:
|
||
1. 首次运行便携版程序，让它自解压
|
||
2. 找到程序目录下的 `resources/app/` 文件夹
|
||
3. 用任何文本编辑器（记事本、VS Code 等）打开要修改的文件
|
||
4. 保存后重启程序即可
|
||
|
||
### Q: 修改代码后需要重新打包吗？
|
||
|
||
A: 不需要。因为代码没有打包进 asar，所以可以直接修改 `resources/app/` 下的文件。
|
||
|
||
### Q: 便携版的安全性如何？
|
||
|
||
A: 源码是明文的，任何人都可以查看和修改。如果需要保护代码，可以：
|
||
1. 将 `asar: false` 改为 `asar: true`
|
||
2. 使用代码混淆工具
|
||
3. 使用加密方案
|
||
|
||
### Q: 如何在便携版中调试？
|
||
|
||
A:
|
||
1. 编辑 `resources/app/main.js`
|
||
2. 找到 `webPreferences` 配置
|
||
3. 确保包含 `nodeIntegration: true` 和 `contextIsolation: false`
|
||
4. 取消注释 `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 会缓存图标，更换图标后需要清理缓存
|