Electron 打包自定义NSIS脚本为安装向导增加自定义页面增加输入框

本文主要是介绍Electron 打包自定义NSIS脚本为安装向导增加自定义页面增加输入框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Electron 打包工具有很多,如Electron-build、 Electron Forge 等,这里使用Electron-build,而Electron-build使用了nsis组件来创建安装向导,默认情况nsis安装向导不能自定义安装向导界面,但是nsis提供了nsis脚本可以扩展安装向导。

0.效果图

在这里插入图片描述

1.配置nsis脚本

在新建nsis脚本文件resources/installer.nsh,并添加自定义内容:

!define MUI_LANGUAGE "Chinese"
Unicode true!include nsDialogs.nsh
!include LogicLib.nsh#OutFile nsDialogs.exe
#RequestExecutionLevel user
#ShowInstDetails showVar Dialog
Var apiUrl
Var other1
Var other2
Var other3
Var other4
Var skipSetPage custom pgPageCreate pgPageLeaveFunction pgPageCreatensDialogs::Create 1018Pop $Dialog${If} $Dialog == errorAbort${EndIf}${NSD_CreateGroupBox} 10% 10u 80% 100u "接入地址配置"Pop $0${NSD_CreateLabel} 20% 26u 20% 10u "接入地址:"Pop $0${NSD_CreateText} 40% 24u 40% 12u ""Pop $apiUrl${NSD_CreateLabel} 20% 40u 20% 10u "其他配置1:"Pop $0${NSD_CreateText} 40% 38u 40% 12u ""Pop $other1${NSD_CreateLabel} 20% 54u 20% 10u "其他配置2:"Pop $0${NSD_CreateText} 40% 52u 40% 12u ""Pop $other2${NSD_CreateLabel} 20% 68u 20% 10u "其他配置3:"Pop $0${NSD_CreateText} 40% 66u 40% 12u ""Pop $other3${NSD_CreateLabel} 20% 82u 20% 10u "其他配置4:"Pop $0${NSD_CreateText} 40% 80u 40% 12u ""Pop $other4${NSD_CreateCheckbox} 20% 96u 100% 10u "跳过当前设置"Pop $skipSetnsDialogs::Show
FunctionEndFunction PgPageLeave${NSD_GetText} $apiUrl $0${NSD_GetText} $other1 $1${NSD_GetText} $other2 $2${NSD_GetText} $other3 $3${NSD_GetText} $other4 $4${NSD_GetState} $skipSet $6;将配置信息写入文件: C:\用户\用户名\AppData\Roaming\demo\config.json${If} $6 == 0SetOutPath "$APPDATA\demo"CreateDirectory "$APPDATA\demo";FileOpen $9 $APPDATA\demo\config.json w;FileWrite $9 '{"apiUrl":"$0","other1":"$1","other2":"$2","other3":"$3","other4":"$4"}';FileClose $9;SetFileAttributes $APPDATA\demo\config.json NORMALStrCpy $0 '{"apiUrl":"$0","other1":"$1","other2":"$2","other3":"$3","other4":"$4"}'FileOpen $5 "$APPDATA\demo\config.json" "w"FileWrite $5 $0FileClose $5${EndIf}FunctionEndSection
SectionEnd

2.在package.json添加nsis脚本

在package.json的build中的nsis添加我们自定义nsis脚本的引用:"include": "resources/installer.nsh",完整配置如下:

"build": {"appId": "com.demo.electron","productName": "Electron应用示例","copyright": "Copyright © Electron应用示例","mac": {"category": "public.app-category.utilities"},"win": {"icon": "./resources/icons/icon.ico","target": [{"target": "nsis","arch": ["ia32","x64"]}],"artifactName": "${productName}_${version}-${arch}.${ext}"},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./resources/icons/icon.ico","uninstallerIcon": "./resources/icons/icon.ico","installerHeaderIcon": "./resources/icons/icon.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "Electron应用示例","runAfterFinish": true,"include": "resources/installer.nsh"},"files": ["dist/**/*","dist-electron/**/*"],"directories": {"buildResources": "assets","output": "dist-build"},"publish": [{"provider": "generic","url": "http://192.168.1.2/release/"}],"extraResources": ["./plugins/${platform}/${arch}/**"]},

3.打包

执行打包命令:
npm run electron:build.exe

打包完双击安装包就有效果了。

这篇关于Electron 打包自定义NSIS脚本为安装向导增加自定义页面增加输入框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/876456

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Flutter打包APK的几种方式小结

《Flutter打包APK的几种方式小结》Flutter打包不同于RN,Flutter可以在AndroidStudio里编写Flutter代码并最终打包为APK,本篇主要阐述涉及到的几种打包方式,通... 目录前言1. android原生打包APK方式2. Flutter通过原生工程打包方式3. Futte

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Linux安装MySQL的教程

《Linux安装MySQL的教程》:本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

pip无法安装osgeo失败的问题解决

《pip无法安装osgeo失败的问题解决》本文主要介绍了pip无法安装osgeo失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 进入官方提供的扩展包下载网站寻找版本适配的whl文件注意:要选择cp(python版本)和你py