一、Electron 運行的流程
二、Electron 主進程和渲染進程
主進程和渲染器進程:
Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳 本通過創建 web 頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。
由於 Electron 使用了 Chromium(谷歌瀏覽器)來展示 web 頁面，所以 Chromium 的 多進程架構也被使用到。 每個 Electron 中的 web 頁面運行在它自己的渲染進程中。
主進程使用 BrowserWindow 實例創建頁面。每個 BrowserWindow 實例都在自己的渲 染進程里運行頁面。 當一個 BrowserWindow 實例被銷毀后，相應的渲染進程也會被終止。
進程(了解):進程(Process)是計算機中的程序關於某數據集合上的一次運行活動，是 系統進行資源分配和調度的基本單位，是操作系統結構的基礎。
線程(了解):在一一個程序里的一個執行路線就叫做線程(thread)。更准確的定義是: 線程是“一個進程內部的控制序列”。
線程和進程(了解):一個程序至少有一個進程,一個進程至少有一個線程。
三、Electron 渲染進程中通過 Nodejs 讀 取本地文件。
在普通的瀏覽器中，web 頁面通常在一個沙盒環境中運行，不被允許去接觸原生的資源。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交 互。
Nodejs 在主進程和渲染進程中都可以使用。渲染進程因為安全限制，不能直接操作原 生 GUI。雖然如此，因為集成了 Nodejs，渲染進程也有了操作系統底層 API 的能力，Nodejs 中常用的 Path、fs、Crypto 等模塊在 Electron 可以直接使用，方便我們處理鏈接、路徑、 文件 MD5 等，同時 npm 還有成千上萬的模塊供我們選擇。
新建render/index.js
var fs = require('fs'); window.onload = function () { var btn = this.document.querySelector('#btn'); var textarea = this.document.querySelector('#textarea'); btn.onclick = function () { /* 1.獲取本地文件 2、賦值給textarea */ fs.readFile('package.json', (err, data) => { // console.log(data);
textarea.innerHTML = data; }) } }
index.html
<!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>
<button id="btn">獲取pakcage.json</button>
<textarea id="textarea" cols="40" rows="20"></textarea>
<script src="renderer/index.js"></script>
</body>
</html>
開啟調試模式
import { app, BrowserWindow } from 'electron'; // Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit(); } // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected.
let mainWindow; const createWindow = () => { // Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600, }); // and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
mainWindow.webContents.openDevTools(); // Emitted when the window is closed.
mainWindow.on('closed', () => { // Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null; }); }; // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs.
app.on('ready', createWindow); // Quit when all windows are closed.
app.on('window-all-closed', () => { // On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 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(); } }); // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and import them here.
運行項目 ：
npm run start