Electron 運行流程、主進程渲染進程、讀取本地文件、開啓調試模式

時間 2021-08-15

標籤 html web npm json windows 瀏覽器安全架構 app electron 欄目 HTML 简体版

原文原文鏈接

1、Electron 運行的流程html

2、Electron 主進程和渲染進程web

主進程和渲染器進程:npm

Electron 運行 package.json 的 main 腳本的進程被稱爲主進程。在主進程中運行的腳本經過建立 web 頁面來展現用戶界面。一個 Electron 應用老是有且只有一個主進程。json

因爲 Electron 使用了 Chromium(谷歌瀏覽器)來展現 web 頁面，因此 Chromium 的多進程架構也被使用到。每一個 Electron 中的 web 頁面運行在它本身的渲染進程中。windows

主進程使用 BrowserWindow 實例建立頁面。每一個 BrowserWindow 實例都在本身的渲染進程裏運行頁面。當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。瀏覽器

進程(瞭解):進程(Process)是計算機中的程序關於某數據集合上的一次運行活動，是系統進行資源分配和調度的基本單位，是操做系統結構的基礎。安全

線程(瞭解):在一一個程序裏的一個執行路線就叫作線程(thread)。更準確的定義是: 線程是「一個進程內部的控制序列」。架構

線程和進程(瞭解):一個程序至少有一個進程,一個進程至少有一個線程。app

3、Electron 渲染進程中經過 Nodejs 讀取本地文件。electron

在普通的瀏覽器中，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.獲取本地文件

        二、賦值給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.

運行項目：