快速开始

Electron是一个框架，使您可以使用JavaScript，HTML和CSS创建桌面应用程序。然后可以将这些应用程序打包以直接在macOS，Windows或Linux上运行，或通过Mac App Store或Microsoft Store分发。

通常，您使用每个操作系统的特定原生应用程序框架为操作系统（OS）创建桌面应用程序。Electron使得您可以使用已知技术来编写应用程序。


先决条件

在使用Electron处理之前您需要安装Node.js的。我们建议您安装最新的LTS或Current可用的版本。

请使用适用于您平台的预安装程序来安装Node.js。否则，您可能会遇到其他开发工具不兼容的问题。

要检查Node.js是否已正确安装，请在终端客户端中键入以下命令：

node -v
npm -v



这些命令应相应地打印Node.js和npm的版本。如果两个命令都成功，则准备安装Electron。


创建一个基本的应用程序

从开发角度来看，Electron应用程序本质上是Node.js应用程序。这意味着您的Electron应用程序的起点将是一个package.json文件，就像其他任何Node.js应用程序一样。最小的电子应用程序具有以下结构：

my-electron-app/
├── package.json
├── main.js
└── index.html



让我们基于上述结构创建一个基本应用程序。


安装Electron

为您的项目创建一个文件夹，然后在此处安装Electron：

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron



创建主脚本文件


主脚本指定main.js将运行Main进程的Electron应用程序（在本例中为文件）的入口点。通常，在Main进程中运行的脚本控制应用程序的生命周期，显示图形用户界面及其元素，执行本机操作系统交互，并在网页内创建Renderer进程。一个电子应用程序只能有一个主进程。

主脚本可能如下所示：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

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

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



上面是怎么回事？


  1. 第1行：首先，导入包的app和BrowserWindow模块，electron以便能够管理应用程序的生命周期事件，以及创建和控制浏览器窗口。
  2. 第3行：此后，您定义一个函数，该函数创建一个启用了节点集成的新浏览器窗口，将index.html文件加载到该窗口中（第12行，我们将在稍后讨论文件）并打开Developer Tools（第13行）。
  3. 第16行：createWindow在初始化Electron应用程序后，通过调用函数来创建新的浏览器窗口。
  4. 第18行：您添加了一个新的侦听器，当它不再有打开的窗口时，它会尝试退出该应用程序。由于操作系统的窗口管理行为，该侦听器在macOS上是禁止操作的。
  5. 第24行：您添加了一个新的侦听器，该侦听器仅在应用程序被激活后没有可见窗口时才创建一个新的浏览器窗口。例如，在第一次启动应用程序后，或重新启动已经运行的应用程序。


建立网页

初始化应用程序后，这就是您要显示的网页。该网页代表渲染器过程。您可以创建多个浏览器窗口，其中每个窗口使用其自己的独立渲染器。可以选择通过nodeIntegration首选项为每个窗口授予对Node.js API的完全访问权限。

该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>
    <h1>Hello World!</h1>
    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>.
</body>
</html>



修改您的package.json文件


您的Electron应用程序使用该package.json文件作为主要入口点（与任何其他Node.js应用程序一样）。您的应用程序的主要脚本是main.js，因此请相应地修改package.json文件：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js"
}



 



注意：如果main省略该字段，Electron将尝试index.js从包含的目录中加载文件package.json。

默认情况下，该npm start命令将使用Node.js运行主脚本。要使用Electron运行脚本，您需要进行如下更改：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}



运行你的应用程序


npm start



您正在运行的Electron应用程序应如下所示：



 



 




electron窗口内置jquery electronjs 教程_Electron


 


打包并分发应用程序

分发新创建的应用程序最简单，最快的方法是使用 Electron Forge。

  1. 将Electron Forge导入您的应用程序文件夹：
npx @electron-forge/cli import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!
  1. 创建可分发的：
npm run make

> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge将创建out您的包裹所在的文件夹：

// Example for MacOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app


学习基础

本节将指导您了解Electron在引擎盖下的工作原理。它旨在增强有关Electron和快速入门部分中先前创建的应用程序的知识。


应用架构

电子包括三个主要支柱：

  • 用于显示网页内容的Chromium。
  • Node.js，用于处理本地文件系统和操作系统。
  • 用于处理经常需要的OS本机功能的自定义API。

使用Electron开发应用程序就像使用Web界面构建Node.js应用程序或通过Node.js无缝集成构建网页一样。


主流程和渲染流程

如前所述，Electron有两种类型的过程：Main和Renderer。

  • Main流程通过创建BrowserWindow实例来创建网页。每个BrowserWindow实例都在其渲染器进程中运行网页。当BrowserWindow实例被销毁时，相应的渲染器进程也将终止。
  • Main流程管理所有网页及其相应的Renderer流程。
  • 渲染器进程仅管理相应的网页。一个Renderer进程中的崩溃不会影响其他Renderer进程。
  • Renderer进程通过IPC与Main进程进行通信，以在网页中执行GUI操作。由于安全问题和潜在的资源泄漏，直接从Renderer进程调用与本机GUI相关的API受到限制。

可以通过进程间通信（IPC）模块ipcMain和进行进程之间的通信ipcRenderer。


ElectronAPI


Electron API是根据进程类型分配的，这意味着可以在Main或Renderer进程中使用某些模块，而在两者中都可以使用。Electron的API文档指出了可以使用每个模块的过程。

例如，要在两个过程中访问Electron API，都需要其包含的模块：

const electron = require('electron')


要创建窗口，请调用BrowserWindow类，该类仅在Main进程中可用：


const { BrowserWindow } = require('electron')
const win = new BrowserWindow()


要从渲染器调用Main进程，请使用IPC模块：


// In the Main process
const { ipcMain } = require('electron')

ipcMain.handle('perform-action', (event, ...args) => {
  // ... do actions on behalf of the Renderer
})
// In the Renderer process
const { ipcRenderer } = require('electron')

ipcRenderer.invoke('perform-action', ...args)


 


注意：由于Renderer进程可能会运行不受信任的代码（尤其是来自第三方的代码），因此仔细验证进入主进程的请求非常重要。


Node.js API

注意：要从Renderer进程访问Node.js API，您需要将nodeIntegration首选项设置为true。

Electron在Main和Renderer流程中公开了对Node.js API及其模块的完全访问权限。例如，您可以从根目录读取所有文件：

const fs = require('fs')

const root = fs.readdirSync('/')

console.log(root)


要使用Node.js模块，首先需要将其作为依赖项安装：


npm install --save aws-sdk


然后，在您的Electron应用程序中，需要该模块：


const S3 = require('aws-sdk/clients/s3')