标签：渲染器入门 app js electron 进程窗口快速

简要介绍

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

设置淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装electron

cnpm install electron --save-dev

检查版本

由于electron 是基于node.js 所以使用npx查看版本

npx electron --version

概念相关

组成

Electron主要技术栈由三部分组成，Chromium,Node.js,Native api三个部分组成。

其主要负责的功能如下：

Chromium

Electron主要是基于Chromium来开发的，你可以理解为提供了一个浏览器来展示前端界面。所以electron可以支持html,javaScript,css。
Node.js

是构建无头命令行应用程序,添加大量API来访问文件系统,require()其他文件,运行其他shell程序等来构建的。

例如读写文件等操作，node.js由于丰富的社区，可以支持各式各样的模块。
Native api

Native API 是指以二进制方式，函式库 (DLL) 直接开放的应用程式开发接口 (Application Programming Interface)，可以直接由 C/C++ 来呼叫存取使用。

主要就是提供桌面应用的接口，例如：获取操作系统信息，硬件信息，系统通知等。

流程模型

Electron 继承了来自 Chromium 的多进程架构，这使得此框架在架构上非常相似于一个现代的网页浏览器。

多进程模型

网页浏览器是个极其复杂的应用程序。除了显示网页内容的主要能力之外，他们还有许多次要的职责，例如：管理众多窗口 ( 或标签页 ) 和加载第三方扩展。

在早期，浏览器通常使用单个进程来处理所有这些功能。虽然这种模式意味着您打开每个标签页的开销较少，但也同时意味着一个网站的崩溃或无响应会影响到整个浏览器。

为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染，从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。

然后用单个浏览器进程控制这些标签页进程，以及整个应用程序的生命周期。

作为应用开发者，你将控制两种类型的进程：主进程 和 渲染器进程。

主进程

主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。

可以看做是package.json中main属性对应的文件
一个应用只会有一个主进程
只有主进程可以进行GUI的API操作

窗口管理

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。您可从主进程用 window 的 webContent 对象与网页内容进

行交互。

//main.js
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

注意：渲染器进程也是为 web embeds而被创建的，例如 BrowserView 模块。嵌入式网页内容也可访问 webContents 对象。

由于 BrowserWindow 模块是一个 EventEmitter，所以您也可以为各种用户事件 ( 例如，最小化或最大化您的窗口 ) 添加处理程序。

当一个 BrowserWindow 实例被销毁时，与其相应的渲染器进程也会被终止。

应用程序生命周期

主进程还能通过 Electron 的 app 模块来控制您应用程序的生命周期。该模块提供了一整套的事件和方法，可以让您用来添加自定义的应用程序行为 (例如：以编程方式退出您的应用程序、修改应用程序坞，或显示一个关于面板) 。

启动APP -> 主进程创建window -> window加载界面(渲染进程) -> 用户操作(传入渲染进程,传递到主进程交互)

原生API

为了使 Electron 的功能不仅仅限于对网页内容的封装，主进程也添加了自定义的 API 来与用户的作业系统进行交互。 Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。

渲染器进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。洽如其名，渲染器负责渲染网页内容。所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。

Windows中展示的界面通过渲染进程表现
一个应用可以有多个渲染进程

因此，一个浏览器窗口中的所有的用户界面和应用功能，都应与您在网页开发上使用相同的工具和规范来进行攥写。

虽然解释每一个网页规范超出了本指南的范围，但您最起码要知道的是：

以一个 HTML 文件作为渲染器进程的入口点。
使用层叠样式表 (Cascading Style Sheets, CSS) 对 UI 添加样式。
通过 <script> 元素可添加可执行的 JavaScript 代码。

此外，这也意味着渲染器无权直接访问 require 或其他 Node.js API。为了在渲染器中直接包含 NPM 模块，您必须使用与在 web 开发时相同的打包工具 (例如 webpack 或 parcel)

前提工作

检查Node.js和npm是否正确安装。

node -v
npm -v

因为被墙的原因重设npm镜像位置

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

初始化

使用脚手架创建

mkdir my-electron-app && cd my-electron-app
npm init

添加package.json文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "dev": "electron .",
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.4",
    "electron": "^22.1.0"
  },
  "dependencies": {
  }
}

安装依赖

npm i

构建项目

首先需要一个main.js作为主程序的入口，这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程

添加main.js文件

// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序 窗口
// 将这两个模块从node_modules 中取出来，导入main.js
const { app, BrowserWindow } = require('electron')

// preload.js 是预加载脚本。 预加载脚本在渲染器进程加载之前加载。
// 需在当前文件内开头引入 Node.js 的 'path' 模块
const path = require('path')

// 定义窗口将index.html加载进去
// 这个界面是运行在渲染进程中的
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}

// 项目启动时去加载创建窗口
app.whenReady().then(() => {
  createWindow()

  // 如果没有窗口打开则打开一个窗口 (macOS)
  // 当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
  // 为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
  // 因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0){
      createWindow()
    }
  })
})

// 在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。
// 为了实现这一点，你需要监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin'){
    app.quit()
  } 
})

添加preload.js

// 通过预加载脚本从渲染器访问Node.js。
// 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。

// 在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！

// 这是将 预加载 脚本连接到渲染器时派上用场的地方。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

添加index.html主页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

运行与打包

在终端输入

npm run dev

最快捷的打包方式是使用 Electron Forge。

将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：

npm install --save-dev @electron-forge/cli
npx electron-forge import

使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

常见生命周期事件

ready：app初始化完成
dom-ready: 一个窗口中的文本加载完成
did-finsh-load：导航完成时触发
window-all-closed：所有窗口都被关闭触发（默认执行app.quit）
before-quit：再关闭窗口之前触发
will-quit：在窗口关闭并且应用退出时触发
quit：在应用程序退出时触发
closed：当窗口关闭时触发,此时应删除窗口引用

代码地址：https://gitee.com/hzl952022746/electron/tree/master

标签：渲染器,入门,app,js,electron,进程,窗口,快速
From： https://www.cnblogs.com/beamsoflight/p/17126157.html

electron快速入门