1、Electron入門HelloWorld案例

一、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

二、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 導入。