将现有Web 网页封装为exe应用

写在前面：

我这有个长期项目，考虑接私活的可以看看我GitHub！

https://github.com/ccy-233/coder2retire

文章目录

• 方式一：Web2Desk
• 方式二：Nativefier+NSIS
• • 使用步骤
  • • 步骤 1：安装所需工具
    • 步骤 2：使用 Nativefier 生成应用程序
    • 步骤3：创建许可证文件license.txt
    • 步骤 4：创建 NSIS 脚本
    • 步骤 4：通过 NSIS 打包
    • 步骤 5：测试安装程序
• 不足

方式一：Web2Desk

• Web2Desk 是一款在线工具，可以将你的 Web 应用快速封装为 Windows、macOS 或 Linux 的桌面应用程序。
• 特点：无需编程，在线操作。自动生成安装包，适配不同平台。支持自定义应用名称和图标。【不过免费的打开时存在广告】
• 使用步骤：

1. 打开 Web2Desk 网站。
2. 输入你的 Web 网页 URL。
3. 自定义应用名称、图标和平台（Windows、macOS 或 Linux）。
4. 点击生成按钮，等待生成的安装包下载完成。

• 适用场景：适合需要一次生成多个平台安装包的场景。

方式二：Nativefier+NSIS

• 开源命令行工具，支持多平台。安装需要魔法环境
• Nativefier 是一个简单的命令行工具，可以快速将 Web 应用打包为跨平台桌面应用（支持 Windows、macOS 和 Linux）。
• 特点：基于 Electron 实现，跨平台支持。简单易学，命令行操作。支持自定义标题、窗口大小和图标。

使用步骤

步骤 1：安装所需工具

1. 安装 Node.js。

2. 全局安装 Nativefier：

   npm install -g nativefier
   

步骤 2：使用 Nativefier 生成应用程序

1. 在命令行中运行以下命令，生成应用（替换 https://example.com 网页 URL）：

   nativefier --name "FilialPietyApp"  "https://example.com"
   

• Nativefier会自动生成适配你操作系统的应用程序。如果需要生成其他平台的安装包（如 Windows 或 macOS），需要在目标平台运行 Nativefier。
• 使用 Nativefier 生成应用程序：用 Nativefier 生成适配 Windows 的应用程序，比如一个叫FilialPietyApp的文件夹，目录结构如下：
  bash FilialPietyApp │ ├─ FilialPietyApp.exe （主应用程序） ├─ resources/ （资源文件夹） ├─ other files... （其他文件）

4. 下载并安装 NSIS：NSIS官网
   • NSIS（Nullsoft Scriptable Install System）来完成。这是一种常用的免费工具，可以用来创建 Windows 安装程序。

步骤3：创建许可证文件license.txt

1. 创建一个许可证文件 license.txt，将其存放在项目目录下。文件内容可以是软件的用户协议或任何简单的文本内容，例如：

   Software License Agreement

   By using this software, you agree to the terms and conditions…

步骤 4：创建 NSIS 脚本

1. 在项目目录下创建一个 .nsi 文件，例如 setup.nsi。

2. 使用Notepad++选择ANSI编码编辑该文件，填入以下内容：

   ; 引入 MUI2 头文件
   !include MUI2.nsh

   !define APP_NAME “至孝智慧养老” ; 应用程序名称（支持中文）
   !define APP_VERSION “1.0.0” ; 应用程序版本
   !define APP_EXE “FilialPietyApp.exe” ; 主程序文件名

   OutFile “KaTeX parse error: Expected group after '_' at position 17: …APP_NAME}_Setup_̲{APP_VERSION}.exe” ; 安装程序输出文件名
   InstallDir “$PROGRAMFILES${APP_NAME}” ; 默认安装路径
   RequestExecutionLevel admin ; 请求管理员权限

   ; 定义安装程序的页面流程
   !insertmacro MUI_PAGE_LICENSE “license.txt” ; 许可证页面
   !insertmacro MUI_PAGE_DIRECTORY ; 选择安装目录页面
   !insertmacro MUI_PAGE_INSTFILES ; 安装进度页面
   !insertmacro MUI_PAGE_FINISH ; 安装完成页面

   ; 定义卸载程序的页面流程
   !insertmacro MUI_UNPAGE_CONFIRM ; 卸载确认页面
   !insertmacro MUI_UNPAGE_INSTFILES ; 卸载进度页面

   ; 安装段
   Section “Install”
   ; 将文件复制到安装目录
   SetOutPath “$INSTDIR” ; 设置安装目标目录
   File /r “C:\Users\HP\Desktop\FilialPietyApp*” ; 替换为实际路径，递归打包所有文件

   ; 创建卸载程序
   WriteUninstaller "$INSTDIR\Uninstall.exe"   ; 写入卸载程序
   
   ; 创建桌面快捷方式
   CreateShortCut "$DESKTOP\${APP_NAME}.lnk" "$INSTDIR\${APP_EXE}"
   
   ; 创建“开始菜单”快捷方式
   CreateDirectory "$SMPROGRAMS\${APP_NAME}"   ; 创建开始菜单文件夹
   CreateShortCut "$SMPROGRAMS\${APP_NAME}\${APP_NAME}.lnk" "$INSTDIR\${APP_EXE}"
   CreateShortCut "$SMPROGRAMS\${APP_NAME}\卸载${APP_NAME}.lnk" "$INSTDIR\Uninstall.exe"
   

   SectionEnd

   ; 卸载段
   Section “Uninstall”
   ; 删除安装目录下的文件
   Delete “$INSTDIR${APP_EXE}” ; 删除主程序文件
   Delete “$INSTDIR\Uninstall.exe” ; 删除卸载程序

   ; 删除桌面快捷方式
   Delete "$DESKTOP\${APP_NAME}.lnk"
   
   ; 删除开始菜单快捷方式和目录
   Delete "$SMPROGRAMS\${APP_NAME}\${APP_NAME}.lnk"
   Delete "$SMPROGRAMS\${APP_NAME}\卸载${APP_NAME}.lnk"
   RMDir "$SMPROGRAMS\${APP_NAME}"             ; 删除开始菜单文件夹
   
   ; 删除安装目录
   RMDir /r "$INSTDIR"
   

   SectionEnd

步骤 4：通过 NSIS 打包

1. 打开 NSIS 安装目录下的 “MakeNSISW” 工具。
2. 在工具中选择加载您刚刚创建的 .nsi 文件。
3. 点击 Compile Script 按钮，NSIS 会自动将脚本编译并生成一个安装程序（.exe 文件）。

步骤 5：测试安装程序

1. 双击生成的安装程序（.exe 文件），安装程序将引导完成安装。
2. 安装完成后，在默认的安装目录（如 C:\Program Files\FilialPietyApp）中找到应用程序。
3. 验证卸载功能是否正常工作。

不足

1. 方式二图标设置问题指定，可自行研究解决。方式一图标没有问题。
2. 方法二：安装Nativefier需要魔法环境和可靠的网络。