Electron開發跨平臺桌面程序入門教程

時間 2019-11-06

標籤 electron 開發跨平臺桌面程序入門教程简体版

原文原文鏈接

最近一直在學習 Electron 開發桌面應用程序，在嘗試了 java swing 和 FXjava 後，感嘆仍是 Electron 開發桌面應用上手最快。我會在這一篇文章中實現一個HelloWord的應用程序，記錄學習過程當中的坑。html

Electron是什麼呢？

Electron 可讓你使用純 JavaScript 調用豐富的原生(操做系統) APIs 來創造桌面應用。你能夠把它看做一個 Node. js 的變體，它專一於桌面應用而不是 Web 服務器端。前端

這不意味着 Electron 是某個圖形用戶界面（GUI）庫的 JavaScript 版本。相反，Electron 使用 web 頁面做爲它的 GUI，因此你能把它看做成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。java

1、環境準備

本地環境：Node.js + npmnode

# 下面這行的命令會打印出Node.js的版本信息
node -v

# 下面這行的命令會打印出npm的版本信息
npm -vCopy

2、目錄結構

從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。與 Node.js 模塊相同，應用的入口是 package.json 文件。一個最基本的 Electron 應用通常來講會有以下的目錄結構：linux

your-app/
├── package.json
├── main.js
└── index.html

爲你的新Electron應用建立一個新的空文件夾，並新建上述三個文件。git

3、package.json

其中package.json的文件內容以下：github

{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

Tips：使用npm init命令能夠便捷建立package.json。web

4、安裝Electron

在終端進入到工程文件夾下進行操做，會在當前目錄下安裝Electron。docker

# 局部安裝 須要的話追加上 --registry='http://registry.npm.taobao.org' 使用淘寶npm源安裝
npm install electron --save-dev
# Windows使用下面語句 64位32位機器都是--win32
npm install electron --save-dev --platform=win32

# 驗證安裝
node_modules/.bin/electron -v

Tips：--save-dev參數會在package.json文件中導入該依賴到devDependencies屬性下，--save參數會導入該依賴到dependencies屬性下。npm

安裝過程可能會很慢，正常的話，安裝下載進度以下直至完成。

> electron@5.0.6 postinstall /home/qii/electron/eee/node_modules/electron
> node install.js

Downloading tmp-26643-1-SHASUMS256.txt-5.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.

+ electron@5.0.6
updated 1 package and audited 201 packages in 499.235s
found 0 vulnerabilities

Tips：npm安裝超時的話通常是網絡問題。解決方法

5、main.js

package.json中指定的入口點文件，即程序主文件。

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

let mainWindow

// 建立主窗口，設置了寬高等信息
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      // node集成，便是否注入node能力
      nodeIntegration: true
    }
  })

  // 加載主頁面內容 index.html
  mainWindow.loadFile('index.html')

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

app.on('ready', createWindow)

6、index.html

main.js中加載的主窗口文件，即主佈局文件

<!DOCTYPE html>
<html>
<head>
    <!-- 此title會覆蓋package.json中設置的name，做爲應用頂部名稱 -->
    <title>my-app</title>
</head>
<body>
    Hello World!
</body>
</html>

7、啓動應用

在建立並初始化完成 main.js、 index.html和package.json以後，您就能夠在當前工程的根目錄執行下述命令來啓動剛剛編寫好的Electron程序了。

# 進入到包含 package.json 文件的目錄
npm satrt

# 或者直接使用腳本啓動，別忽略了後面的點
node_modules/.bin/electron .

8、打包應用

以上所述都是在本地開發環境下使用，但若是要給被人使用，就必須得將Electron打包成一個程序包。幸運的是咱們能夠經過electron-builder將程序打包成Win、Linux、Mac平臺都兼容的版本，交給別人以後直接安裝便可。

一、安裝electron-builder

npm install --save-dev electron-builder

# 驗證安裝
node_modules/.bin/electron-builder -h

二、開始打包

注意生成各自平臺的程序包最好在對應平臺上執行，不然可能打包失敗

# Linux打包成AppImage文件（在Linux環境上執行）
node_modules/.bin/electron-builder -l AppImage

# Windows打包成exe安裝文件（在Windows環境下執行）
node_modules/.bin/electron-builder -w nsis
# 若是在非Windows上打包win程序，也能夠藉助docker 以下
# docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"

# Mac打包成dmg文件（在Mac環境下執行）
node_modules/.bin/electron-builder -m dmg

三、最終文件

打包好的程序在當前目錄dist文件夾下，如圖所示：

Linux生成my-app 0.1.0.AppImage文件，雙擊執行或者./my-app 0.1.0.AppImage執行便可。
Windows生成my-app 0.1.0.exe文件，雙擊安裝便可。
Mac生成my-app 0.1.0.dmg，雙擊拖拽安裝便可。

四、利用配置文件打包

上面的方法至關於臨時打包，每次運行命令的時候都要指定打包命令，雖然很直接，可是有點不太方便，下面用另外一種方法來打包，將打包配置寫到package.json中，方便使用。

打開package.json文件，發現前面的 devDependencies 屬性下已經多出了 electron 和 electron-builder 依賴，咱們將與打包相關的配置信息所有寫在build屬性下，再添加腳本命令"dist": "electron-builder"。

{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "author": "",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^6.0.12",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "win": {
      "icon": "icon.png",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
      "menuCategory": true,
      "allowElevation": false
    },
    "linux": {
      "icon": "icon.png",
      "category": "Utility",
      "target": [
        "AppImage"
      ]
    },
    "mac": {
      "icon": "icon.png",
      "type": "development",
      "category": "public.app-category.developer-tools",
      "target": [
        "dmg"
      ]
    }
  }
}

運行命令：