# 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 会缓存图标,更换图标后需要清理缓存