一、Electron入門HelloWorld案例

1、Electron是什麼？

官網：https://electronjs.org/

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron經過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。

官網介紹：

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

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

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

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

2、electron官方新手入門實例

建立方法1：直接去官方git倉庫下載：https://github.com/electron/electron-quick-start

下載完成解壓以後內容以下：

 

官方的這個倉庫給咱們初始化了一個electron項目，結構很是純淨，接下來你就能夠直接改形成本身的項目了。還等什麼，趕忙試試吧。

 下載完成以後咱們打開cmd命令行cd到electron-quick-start-master目錄下執行npm install安裝項目依賴：

注意：若是install失敗可能要考慮下降你的electron版本（剛剛下載的默認是最高版本），例如我這裏使用的是"electron": "^5.0.2"

啓動項目：npm start

 

 

出現下面的窗口即表示成功！

建立方法2：參照官網提示從空白文件夾一步步建立：https://electronjs.org/docs/tutorial/first-app#trying-this-example

爲你的新Electron應用建立一個新的空文件夾。 打開你的命令行工具，而後cmd從該文件夾運行npm init：

下面name：後面的內容你能夠自定義，一路回車便可：

npm 會幫助你建立一個基本的 package.json 文件。 其中的 main 字段所表示的腳本爲應用的啓動腳本，它將會在主進程中執行。 以下片斷是一個 package.json 的示例：

 

注意：若是 main 字段沒有在 package.json 中出現，那麼 Electron 將會嘗試加載 index.js 文件（就像 Node.js 自身那樣）。 若是你實際開發的是一個簡單的 Node 應用，那麼你須要添加一個 start 腳原本指引 node 去執行當前的 package：

 

 把這個 Node 應用轉換成一個 Electron 應用也是很是簡單的，咱們只不過是把 node 運行時替換成了 electron 運行時。

 

 

安裝 Electron

 如今，您須要安裝electron。 咱們推薦的安裝方法是把它做爲您 app 中的開發依賴項，這使您能夠在不一樣的 app 中使用不一樣的 Electron 版本。 在您的app所在文件夾中運行下面的命令：

npm install --save-dev electron

開發一個簡易的 Electron

 Electron apps 使用JavaScript開發，其工做原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的全部API和功能，引入方法和普通Node.js模塊同樣：

const electron = require('electron')

electron 模塊所提供的功能都是經過命名空間暴露出來的。 好比說： electron.app負責管理Electron 應用程序的生命週期， electron.BrowserWindow類負責建立窗口。 下面是一個簡單的index.js文件，它將在應用程序準備就緒後打開一個窗口：

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

function createWindow () {
    // 建立瀏覽器窗口
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 加載index.html文件
    win.loadFile('index.html')
}

app.on('ready', createWindow)

在項目目錄下cmd執行：npm start：

 

您應當在 main.js 中建立窗口，並處理程序中可能遇到的全部系統事件。 下面咱們將完善上述例子，添加如下功能：打開開發者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口，添加後，main. js 就像下面這樣：

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

// 保持對window對象的全局引用，若是不這麼作的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win

function createWindow () {
    // 建立瀏覽器窗口。
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 加載index.html文件
    win.loadFile('index.html')

    // 打開開發者工具
    win.webContents.openDevTools()

    // 當 window 被關閉，這個事件會被觸發。
    win.on('closed', () => {
        // 取消引用 window 對象，若是你的應用支持多窗口的話，
        // 一般會把多個 window 對象存放在一個數組裏面，
        // 與此同時，你應該刪除相應的元素。
        win = null
    })
}

// Electron 會在初始化後並準備
// 建立瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
    // 不然絕大部分應用及其菜單欄會保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時，
    // 一般在應用程序中從新建立一個窗口。
    if (win === null) {
        createWindow()
    }
})

// 在這個文件中，你能夠續寫應用剩下主進程代碼。
// 也能夠拆分紅幾個文件，而後用 require 導入。