Electron 的初學者詳細指南

前端小學生董某發表於2020-04-03

Electron 的歷史和簡介

用 HTML/CSS/JavaScript 來構建跨平臺桌面應用程式的一個開源庫

通過將 Chromium 和 Node.js 合併到同一個執行環境中，並將其打包到相應的作業系統下的應用來實現跨平臺

Electron 是什麼？

Build cross platform desktop apps with JavaScript, HTML, and CSS

Electron 的實踐

前提是已經安裝好node.js

命令列輸入node -v檢視

而後檢視是否安裝好npm包管理器

命令列輸入npm -v檢視

接下類鍵入npm install electron -g 全域性安裝electron

這一步往往是勸退的一步，總會遇到網路故障，解決方法是下載cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 或配置淘寶映象

檢查是否安裝成功：electron -v，目前最新版本應當是：v8.2.0

確認以上都安裝成功後，在我們想要建立 Electron 專案的資料夾中新建一個資料夾

--electronDemo
    --index.html
    --main.js
複製程式碼

在此資料夾的兩個檔案中分別書寫程式碼:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello,Electron</title>
</head>
<body>
    Hello,Electron
</body>
</html>
複製程式碼

main.js

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

var mainWindow = null;


app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:300,
        height:500
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('close',()=>{
        mainWindow = null
    })
})
複製程式碼

此時的electronDemo資料夾中只有這兩個檔案

在該目錄下的命令列中鍵入：npm init --yes可初始化該Electron專案

該命令鍵入後可以發現該資料夾目錄下多出了檔案package.json

{
  "name": "electrondemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

複製程式碼

package.json檔案通常不需要改動，但是要注意以下 3 點：

  1. "main":"main.js",的配置說明的是主程式的入口檔案，要和我們資料夾中的檔名一致
  2. "name"屬性的內容不可以使用大寫字母和漢字,可用的字元規則如下： ^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$
  3. .json檔案不可以新增註釋

如果需要更多可以檢視這裡：（另：前端框架的使用始終是無法脫離 JavaScript 的，我們有必要反覆鞏固 JavaScript 的知識）www.w3schools.com/js/js_json_…

那麼到這裡我們就可以開始了

在命令列中鍵入electron .（.之前是有空格的）而後就可以看到專案的執行

Electron 可以分為主程式和渲染程式

主程式

Electron 中文文件的名詞釋義是：

main process
主程式，通常是名為 main.js 的檔案，是每個 Electron 應用的入口檔案。它控制著整個 App 的生命週期，從開啟到關閉。 它也管理著系統原生元素比如選單，選單欄，Dock 欄，托盤等。 主程式負責建立 APP 的每個渲染程式。而且整個 Node API 都整合在裡面。

每個 app 的主程式檔案都定義在 package.json 中的 main 屬性當中。這也是為什麼 electron. 能夠知道應該使用哪個檔案來啟動。

在Chromium中, 這個程式被稱為 "瀏覽器程式"。它在Electron被重新命名, 以避免與渲染器程式混淆。

複製程式碼

Electron 中，入口是一個 .js 檔案，執行這個入口檔案的程式稱作主程式，在主程式使用 BrowserWindow 模組可以建立並管理 web 頁面，也就是應用的 GUI。

開啟 Electron 目錄下，package.json檔案是這樣的：

    {
    "name": "electron-test",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",//執行該檔案的程式就是主程式（另：.json 檔案中不能這樣新增註釋）
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
    }

複製程式碼

一言以蔽之：Electorn 執行 package.json 的 main 指令碼的程式被稱為主程式

  • 主程式中執行的指令碼通過建立 Web 頁面來展示使用者介面

  • 一個 Electron 應用總是有且只有一個主程式

渲染程式

Electron 中文文件的名詞釋義是：

renderer process
渲染程式是你的應用內的一個瀏覽器視窗。與主程式不同的是，它能夠同時存在多個而且執行在不一樣的程式。而且它們也能夠被隱藏。

在通常的瀏覽器內，網頁通常執行在一個沙盒的環境擋住並且不能夠使用原生的資源。 然而 Electron 的使用者在 Node.js 的 API 支援下可以在頁面中和作業系統進行一些低階別的互動。
複製程式碼

在 Electron 裡的每個頁面都有它自己的程式，叫作渲染程式。

主程式通過例項化 BrowserWindow，每個 BrowserWindow 例項都在它自己的渲染程式內返回一個 web 頁面。當 BrowserWindow 例項銷燬時，相應的渲染程式也會終止。

渲染程式由主程式進行管理。每個渲染程式都是相互獨立的，它們只關心自己所執行的 web 頁面。

主程式和渲染程式的區別

  • 主程式通過BrowserWindow建立頁面
  • 每個BrowserWindow例項都在自己的渲染程式中執行, 當BrowserWindow例項被銷燬後, 相應的渲染程式也會被終止

主程式和渲染程式之間的這種關係，決定了他們之間一定要進行通訊，決定了他們之間的通訊一定是雙向的，關於這個問題在後續說明

Electron API

在 Electron 官網中關於 API 的文件連結： www.electronjs.org/docs/api

作為初學者我們有必要挑選一些常見、重要的深入掌握，同時應該養成閱讀文件的良好習慣

app

主程式
控制你的應用程式的生命週期
複製程式碼

BrowserWindow

主程式
建立和控制瀏覽器視窗
複製程式碼

ipcMain

主程式
從主程式到渲染程式的非同步通訊
複製程式碼

ipcRenderer

渲染程式
從渲染器程式到主程式的非同步通訊
複製程式碼

screen

主程式
檢索有關螢幕大小、顯示器、游標位置等的資訊。
複製程式碼

session

主程式
管理瀏覽器會話、cookie、快取、代理設定等。
複製程式碼

相關文章