初识electron（一）

主要参照electron官网，加上自己的一些理解，主要用于自己的学习，谢谢大家了，有问题请指点。

什么是electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
Electron 基于 Chromium 和 Node.js
Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

一个简单的electron项目

前提

首先需要有node环境，nodeJS

node -v
npm -v

目录结构

my-electron-app/
├── package.json  package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。
├── main.js // 这个就是主进程
└── index.html //这个相当于渲染进程

源文件

main.js

const { app, BrowserWindow } = require("electron");

//创建一个800
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,//这个表示可以在网页中使用node的包
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => { //您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。 由于操作系统的 窗口管理行为 ，此监听器在 macOS 上是禁止操作的。
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => { //您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

package.json

{
  "name": "2020-01-07",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", //需要执行的js 复制的时候记得删除这个注释
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using node 
      <script>
            document.write(process.versions.node)
      </script>,
        Chrome <script>
            document.write(process.versions.chrome)
        </script>,
        and Electron <script>
            document.write(process.versions.electron)
        </script>.
    </p>
</body>

</html>

执行代码

npm i --save-dev electron
npm start

运行结果

基础知识

Electron包含三个核心

- **Chromium** 用于显示网页内容。
- **Node.js** 用于本地文件系统和操作系统。
- **自定义 APIs** 用于使用经常需要的 OS 原生函数。（for working with often-needed OS native functions.）

它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器

主进程和渲染进程

-  主进程可以通过创建 **BrowserWindow** 实例来`创建` 网页，每一个 `BrowserWindow` 实例在其渲染过程中运行网页， 当一个 `BrowserWindow` 实例被销毁时，对应的渲染过程也会被终止。

主进程管理所有网页及其对应的渲染进程。

- 渲染进程只能**管理**相应的网页， 一个渲染进程的崩溃不会影响其他渲染进程。
- 渲染进程通过 IPC 与主进程**通信**在网在页上执行 GUI 操作。 出于安全和可能的资源泄漏考虑，直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。

进程之间的通信可以通过 Inter-Process Communication(IPC) 模块进行：ipcMain 和 ipcRenderer

使用ipc通信的实例

修改index.html 和main.js

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body style="background: white;">
    <script>
        const {
            ipcRenderer
        } = require('electron')
        console.log(ipcRenderer.sendSync('synchronous-message', '我是发给我第二个监听者的'), 1212)
        ipcRenderer.send('asynchronous-message', '我是发送者2，我是发给我第1个监听者的')
        ipcRenderer.on('asynchronous-reply', (event, arg) => {
            console.log('渲染进程接收回复:', arg) 
        })
    </script>
</body>

</html>

main.js

const { app, BrowserWindow, ipcMain } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  win.webContents.openDevTools();
  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// 两种回复方式
ipcMain.on("asynchronous-message", (event, arg) => {
  console.log(`主进程监听者1：`, arg); 
  event.reply("asynchronous-reply", "主进程:这是我回复的");
});

ipcMain.on("synchronous-message", (event, arg) => {
  console.log(`主进程监听者2：`,arg); 
  event.returnValue = "回复发送者1";
});

渲染进程打印

主进程打印

这就是一个整体的内容，剩下的就是各种功能模块以及打包部署的内容了，也是重中之重了

如果觉得我的文章还可以，点个赞或者关注一下下，还有精彩的故事等着你哦，还可以云撸猫