关于 Elec tr o n
Electron是由Github开发，⽤HTML，CSS和JavaScript来构建跨平台桌⾯应⽤程序的⼀个开源库。 Electron通过将Chromium和Node.js合并到同⼀个运⾏时环境中，并将其打包为Mac，Windows和Linux系统下的应⽤来实现这⼀⽬的。
Elec tro n打包⼯具
tr o
常⽤的打包⼯具有：electron-packager、electron-builder、grunt-electron-installer。
但是通过这些⼯具打包出来的APP，安装的时候会安装到默认⽬录下，不能指定安装⽬录。对于Mac来说是很正常，但是对于Windows⽤户来说就有点接受不了。接下来我给⼤家介绍⼀下，针对Windows⾃定义安装路径的⽅法。
⾃定义安装路径
非诚勿扰18期1.安装asar
$ npm install asar
2.打包asar⽂件
$ asar pack 项⽬路径 app.asar
然后你会发现在你的项⽬的同级⽬录下多了⼀个app.asar⽂件。
3.下载electron压缩包
到官⽹下载electron的Windows版压缩包，然后解压这个压缩包，把app.asar⽂件放⼊解压⽂件夹的resources⽬录。 4.修改名称和图标
到解压⽂件⽬录下的，直接修改成你的应⽤名称。然后使⽤ResourceHacker软件替换你成应⽤图标，如下所⽰：
替换前
替换后
5.使⽤NSIS打包
下⾯是我写的⼀个NSIS脚本，你也可以替换其中的变量后直接使⽤：
; 安装程序初始定义常量
!define PRODUCT_NAME "云报价"
!define PRODUCT_VERSION "2.0.0"
!define PRODUCT_PUBLISHER "刘武昌"
电网技术!define PRODUCT_WEB_SITE "www.jianshu/u/1d53b932d536"
!define PRODUCT_UNINST_KEY
"Software\Microsoft\Windows\CurrentVersion\Uninstall\${PRODUCT_NAME}"
!define PRODUCT_UNINST_ROOT_KEY "HKLM"
SetCompressor lzma
; ------ MUI 现代界⾯定义 (1.67 版本以上兼容) ------
!include "MUI.nsh"
;
MUI 预定义常量
!define MUI_ABORTWARNING
!define MUI_ICON "E:\云报价\云报价\图标\icon_cloud_logo.ico"
!define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico" ; 欢迎页⾯
!insertmacro MUI_PAGE_WELCOME
; 安装⽬录选择页⾯
法拉第筒
!insertmacro MUI_PAGE_DIRECTORY
; 安装过程页⾯
!insertmacro MUI_PAGE_INSTFILES
; 安装完成页⾯
!insertmacro MUI_PAGE_FINISH
;
安装卸载过程页⾯
!insertmacro MUI_UNPAGE_INSTFILES
; 安装界⾯包含的语⾔设置
!insertmacro MUI_LANGUAGE "SimpChinese"
; 安装预释放⽂件
!insertmacro MUI_RESERVEFILE_INSTALLOPTIONS
; ------ MUI 现代界⾯定义结束 ------
Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
OutFile "云报价.exe"
InstallDir "$PROGRAMFILES\云报价"
ShowInstDetails show
ShowUnInstDetails show
Section "MainSection" SEC01
SetOutPath "$INSTDIR\*.*"
SetOverwrite on
File /r "..\云报价-window-32\*.*"
SectionEnd
Section -AdditionalIcons
SetOutPath $INSTDIR
WriteIniStr "$INSTDIR\${PRODUCT_NAME}.url" "InternetShortcut" "URL" "${PRODUCT_WEB_SITE}"
CreateDirectory "$SMPROGRAMS\云报价"
CreateShortCut "$SMPROGRAMS\云报价\Website.lnk" "$INSTDIR\${PRODUCT_NAME}.url"
CreateShortCut "$SMPROGRAMS\云报价\Uninstall.lnk" "$"
CreateShortCut "$DESKTOP\${PRODUCT_NAME}.lnk" "$INSTDIR\云报价.exe"
SectionEnd
Section -Post
WriteUninstaller "$"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$"
赤麂WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayVersion" "${PRODUCT_VERSION}"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "URLInfoAbout" "${PRODUCT_WEB_SITE}"
WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "Publisher" "${PRODUCT_PUBLISHER}"
SectionEnd
/******************************
* 以下是安装程序的卸载部分 *
******************************/
索爱k790cSection Uninstall
Delete "$INSTDIR\${PRODUCT_NAME}.url"
Delete "$"
Delete "$SMPROGRAMS\云报价\Uninstall.lnk"
Delete "$SMPROGRAMS\云报价\Website.lnk"
Delete "$DESKTOP\${PRODUCT_NAME}.lnk"
RMDir "$SMPROGRAMS\云报价"
RMDir /r "$INSTDIR\*.*"
RMDir "$INSTDIR"
DeleteRegKey ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}"
SetAutoClose true
SectionEnd
#-- 根据 NSIS 脚本编辑规则，所有 Function 区段必须放置在 Section 区段之后编写，以避免安装程序出现未可预知的问题。--#
Init
tdcMessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "您确实要完全移除 $(^Name) ，及其所有的组件？" IDYES +2
Abort
FunctionEnd
UninstSuccess
HideWindow
MessageBox MB_ICONINFORMATION|MB_OK "$(^Name) 已成功地从您的计算机移除。"
FunctionEnd
6.效果演⽰
