Electron自定义安装脚本

在 Electron 应用的开发过程中,常常需要为用户提供一个安装程序,能够自定义安装路径并在安装时创建快捷方式。这篇文章将介绍如何使用 NSIS(Nullsoft Scriptable Install System)来实现这些功能。我们将通过一个实际的脚本示例,详细讲解如何在 Electron 项目中进行配置和使用。

什么是 NSIS?

NSIS 是一个开源的 Windows 安装程序生成器,通过脚本语言提供高度的可配置性。它允许开发者定制安装过程中的每一个细节,包括安装路径的选择、注册表的写入以及快捷方式的创建等。

配置 NSIS 脚本

下面是一段示例脚本,展示了如何在安装过程中自定义安装路径并创建额外的快捷方式。

bash 复制代码
!macro createWebShortcut
  CreateShortCut "$DESKTOP\xx系统.lnk" "https://xxxxxxxx.com/" "" "$INSTDIR\resources\xx.ico" 0
!macroend

!macro preInit
  SetRegView 64
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  SetRegView 32
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
!macroend

!macro customInstall
  !insertmacro createWebShortcut
!macroend

!macro customUnInstall
  Delete "$DESKTOP\xx.lnk"
!macroend

代码解析解析

创建快捷方式

bash 复制代码
!macro createWebShortcut
  CreateShortCut "$DESKTOP\xx系统.lnk" "https://xxxxxxx.com/" "" "$INSTDIR\resources\xx.ico" 0
!macroend

这段代码使用 CreateShortCut 命令在用户的桌面上创建一个名为"xx系统"的快捷方式,指向指定的网址,并使用 $INSTDIR\resources\xx.ico 作为图标。

注册表写入

bash 复制代码
!macro preInit
  SetRegView 64
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  SetRegView 32
  WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
  WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "$INSTDIR"
!macroend

在安装过程中,preInit 宏会将安装路径写入注册表的不同位置(64 位和 32 位)。这在某些情况下可能会非常有用,例如当你需要在应用程序启动时读取这些信息。

自定义安装过程

yaml 复制代码
!macro customInstall
  !insertmacro createWebShortcut
!macroend

customInstall 宏调用了之前定义的 createWebShortcut 宏,在安装过程中创建桌面快捷方式。

自定义卸载过程

bash 复制代码
!macro customUnInstall
  Delete "$DESKTOP\xx系统.lnk"
!macroend

在卸载过程中,customUnInstall 宏会删除之前创建的桌面快捷方式,确保卸载干净。

在 Electron 中集成 NSIS

  1. 配置 electron-builder: 在 package.json 文件中配置 electron-builder,以便使用自定义的 NSIS 脚本。
json 复制代码
{
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.example.yourapp",
    "nsis": {
      "include": "build/installer.nsh"
    }
  },
  "devDependencies": {
    "electron": "^11.0.0",
    "electron-builder": "^22.0.0"
  }
}
  1. 创建 NSIS 脚本: 在 build 目录下创建 installer.nsh 文件,并粘贴前面的 NSIS 脚本。

  2. 打包应用: 使用 electron-builder 打包你的应用,命令如下:

    npx electron-builder

结语

通过配置 NSIS 脚本,我们可以在 Electron 应用的安装过程中实现自定义安装路径,并创建额外的快捷方式。这为用户提供了更好的安装体验,也增加了应用的灵活性。NSIS 强大的脚本功能让我们可以细致地控制安装过程中的每一个步骤,确保应用程序按照预期的方式部署和运行。

相关推荐
两个西柚呀33 分钟前
未在props中声明的属性
前端·javascript·vue.js
子伟-H53 小时前
App开发框架调研对比
前端
桃子不吃李子3 小时前
axios的二次封装
前端·学习·axios
SteveJrong3 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~3 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发4 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii4 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack4 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好5 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O5 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js