關(guān)于 Electron
Electron是由Github開發(fā)巴碗，用HTML年栓，CSS和JavaScript來構(gòu)建跨平臺桌面應(yīng)用程序的一個開源庫。 Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實現(xiàn)這一目的豺撑。
Electron打包工具
常用的打包工具有：electron-packager、electron-builder黔牵、grunt-electron-installer聪轿。
但是通過這些工具打包出來的APP，安裝的時候會安裝到默認(rèn)目錄下猾浦，不能指定安裝目錄陆错。對于Mac來說是很正常，但是對于Windows用戶來說就有點接受不了金赦。接下來我給大家介紹一下音瓷，針對Windows自定義安裝路徑的方法。
自定義安裝路徑
1.安裝asar
$?npm?install?asar
2.打包asar文件
$ asar pack 項目路徑 app.asar
然后你會發(fā)現(xiàn)在你的項目的同級目錄下多了一個app.asar文件素邪。
3.下載electron壓縮包
到官網(wǎng)下載electron的Windows版壓縮包外莲，然后解壓這個壓縮包，把a(bǔ)pp.asar文件放入解壓文件夾的resources目錄兔朦。
4.修改名稱和圖標(biāo)
找到解壓文件目錄下的electron.exe偷线，直接修改成你的應(yīng)用名稱。然后使用ResourceHacker軟件替換你成應(yīng)用圖標(biāo)沽甥，如下所示：
5.使用NSIS打包
下面是我寫的一個NSIS腳本声邦，你也可以替換其中的變量后直接使用：
; 安裝程序初始定義常量
!define PRODUCT_NAME "云報價"
!define PRODUCT_VERSION "2.0.0"
!define PRODUCT_PUBLISHER "劉武昌"
!define PRODUCT_WEB_SITE "http://www.reibang.com/u/1d53b932d536"
!define PRODUCT_UNINST_KEY "Software\Microsoft\Windows\CurrentVersion\Uninstall\${PRODUCT_NAME}"
!define PRODUCT_UNINST_ROOT_KEY "HKLM"
SetCompressor lzma
; ------ MUI 現(xiàn)代界面定義 (1.67 版本以上兼容) ------
!include "MUI.nsh"
; MUI 預(yù)定義常量
!define MUI_ABORTWARNING
!define MUI_ICON "E:\云報價\云報價\圖標(biāo)\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
; 安裝界面包含的語言設(shè)置
!insertmacro MUI_LANGUAGE "SimpChinese"
; 安裝預(yù)釋放文件
!insertmacro MUI_RESERVEFILE_INSTALLOPTIONS
; ------ MUI 現(xiàn)代界面定義結(jié)束 ------
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" "$INSTDIR\uninst.exe"
? CreateShortCut "$DESKTOP\${PRODUCT_NAME}.lnk" "$INSTDIR\云報價.exe"
SectionEnd
Section -Post
? WriteUninstaller "$INSTDIR\uninst.exe"
? WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "DisplayName" "$(^Name)"
? WriteRegStr ${PRODUCT_UNINST_ROOT_KEY} "${PRODUCT_UNINST_KEY}" "UninstallString" "$INSTDIR\uninst.exe"
? 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
/******************************
*? 以下是安裝程序的卸載部分? *
******************************/
Section Uninstall
? Delete "$INSTDIR\${PRODUCT_NAME}.url"
? Delete "$INSTDIR\uninst.exe"
? 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
#-- 根據(jù) NSIS 腳本編輯規(guī)則，所有 Function 區(qū)段必須放置在 Section 區(qū)段之后編寫摆舟，以避免安裝程序出現(xiàn)未可預(yù)知的問題亥曹。--#
Function un.onInit
? MessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "您確實要完全移除 $(^Name) ，及其所有的組件恨诱？" IDYES +2
? Abort
FunctionEnd
Function un.onUninstSuccess
? HideWindow
? MessageBox MB_ICONINFORMATION|MB_OK "$(^Name) 已成功地從您的計算機(jī)移除媳瞪。"
FunctionEnd
6.效果演示
