electron安裝+運行+打包成桌面應用+打包成安裝文件+開機自啓動

時間 2019-11-07

標籤 electron 安裝運行打包桌面應用文件開機啓動简体版

原文原文鏈接

1.初始化node項目，生成package.json文件javascript

npm init

2.安裝electron，並保存爲開發依賴項html

npm install electron -D

3.根目錄下新建index.js文件java

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadFile('index.html')

  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

4.根目錄下新建index.html文件node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello Electron!!</h1>
</body>
</html>

5.打開package.json文件，新建命令web

"scripts": {
   "start": "electron ."  
}

6.執行啓動命令npm

npm start

目前爲止，一個最糙的demo就完成了，但這樣是遠遠不夠的，做爲一個桌面應用程序，咱們但願點擊exe文件就能直接啓動應用，而不是打開命令行，輸入啓動命令。這一步就須要打包工具來完成了。json

7.安裝electron打包工具electron-packagerwindows

npm install electron-packager -g

8.配置打包命令app

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
  }

命令結構以下（根據實際狀況修改）：electron

「.」：須要打包的應用目錄（即當前目錄），

「myClient」：應用名稱，

「--win」：打包平臺（以Windows爲例），

「--out ../myClient」：輸出目錄，

「--arch=64」：64位，

「--app-version=0.0.1」：應用版本，

「--electron-version=2.0.0」：electron版本

執行打包命令：

npm run pack

打包完成後，找到輸出目錄，打開打包完成後的文件夾，

能夠看到生成了.exe的執行文件以及其餘的一堆配置文件，雙擊myClient.exe就能夠打開應用程序了。

如今，咱們已經獲得了應用程序的綠色版本（無需安裝，拷貝整個文件目錄以後便可使用），可是做爲客戶端應用程序，咱們更但願能直接獲得一個安裝包，安裝以後經過桌面快捷方式的形式去訪問，這時候就須要Inno Setup出場了。

9.下載安裝Inno Setup

下載地址：https://pc.qq.com/detail/13/detail_1313.html

安裝完成之後打開Inno Setup客戶端

a. file->new，新建腳本

b.填寫應用程序信息，黑體爲必填項

Application name：應用名稱；

Application version：應用版本；

Application publisher：發行單位（可選）；

Application websiter：應用程序網址（可選）；

c.完善應用文件信息

Application destination base folder：應用程序目標基本文件夾，可默認也可自定義；

Application folder name：應用文件夾名稱；

Allow user to change the application folder：勾選，容許用戶自定義安裝位置；

d.指定屬於應用程序的文件

Application main executable file：應用程序主執行文件，即第8步中打包生成的.exe文件；

Allow user to start the application after Setup has finished：容許用戶在安裝完成後啓動應用程序；

Add folders：添加應用程序文件，選擇第8步中打包出的文件根目錄便可，要把全部.dll文件及其餘配置文件都包含進去；

點擊添加以後能夠看到：

文件目錄以本身的實際狀況爲準。

e.指定應用程序的快捷方式，勾選默認的兩項便可，即「建立主執行程序的快捷方式到公共開始菜單程序文件夾」、「容許用戶建立桌面快捷方式」

f.指定安裝期間要顯示的文檔文件

License file：許可文件；

Information file shown before installation：安裝以前顯示信息文件；

Information file shown after installation：安裝以後顯示信息文件；

g.指定應包括的安裝語言（漢化版的有簡體中文選項），選擇以後點擊下一步

h.指定基本編譯設置

Custom compiler output folder：自定義編譯器輸出文件夾，即最終編譯出的安裝包要放哪一個位置；

Compiler output base file name：編輯器輸出基本文件名，即安裝包名稱；

Custom Setup icon file：自定義安裝程序圖標文件；

Setup password：安裝密碼；

i.點擊下一步

剩下的就是一路肯定了，會詢問你在編譯以前要不要保存你的腳本（上面的配置步驟，最終會生成一個編譯腳本文件），點擊保存，先不要編譯，打開腳本文件，新增配置項，修改註冊表，設置開機自啓動：

[Registry]
Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\CurrentVersion\Run"; ValueType: string; ValueName: "testrun"; ValueData: "{app}\{#MyAppExeName}"

而後，執行編譯文件：build->compile

至此，全部步驟已經完成了，趕快去看看你的安裝包能不能正常使用吧。