【Electron】桌面应用开发

一、什么是Electron?

        Electron是一个使用JavaScript，HTML和CSS构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron允许您维护一个JavaScript代码库，并创建可在Windows，macOS和Linux上运行的跨平台应用程序 - 无需本机开发经验。

二、快速入门

本指南将引导您完成在Electron中创建准系统Hello World应用程序的过程。

        在本教程结束时，您的应用程序将打开一个浏览器窗口，其中显示一个网页，其中包含有关正在运行的Chromium，Node.js和Electron版本的信息。

2.1、 先决条件

要使用Electron，您需要安装Node.js。

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

node -v
npm -v

这些命令应相应地打印 Node.js 和 npm 的版本。

2.2、 创建应用程序

2.2.1、 项目基架

Electron应用程序遵循与其他Node.js项目相同的一般结构。首先创建一个文件夹并初始化一个 npm 包。

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

init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：

• entry point 应为 main.js.
• author 与 description 可为任意值，但对于应用打包是必填项。

你的 package.json 文件应该像这样：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

2.2.2、安装 Electron 程序包

npm install --save-dev electron

查看版本号

npx electron -v

在package.json文件中添加如下命令：

{
  "scripts": {
    "start": "electron ."
  }
}

之后可以使用 npm run start 运行项目

2.2.3、运行主进程

任何Electron应用程序的切入点都是它的脚本。此脚本控制主进程，该进程在完整的 Node.js环境中运行，负责控制应用的生命周期、显示本机接口、执行特权操作以及管理呈现器进程

若要初始化脚本，请在项目的根文件夹中创建一个名为 main.js的空文件。

2.2.4、创建网页

在为应用程序创建窗口之前，我们需要创建将加载到其中的内容。在Electron中，每个窗口都显示可以从本地HTML文件或远程URL加载的Web内容。

在项目的根文件夹中创建一个文件：index.html

  
    
    
    
    
  
  
    
Hello World!
    We are using Node.js ,
    Chromium ,
    and Electron .
  

2.2.5、在BrowserWindow中打开网页

现在您有了一个页面，将它加载进应用窗口中。 要做到这一点，你需要 两个Electron模块：

• app 模块，它控制应用程序的事件生命周期。
• BrowserWindow 模块，它创建和管理应用程序 窗口。

因为主进程运行着 Node.js，您可以在 main.js 文件头部将它们导入作为 CommonJS 模块：

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

然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。

app.whenReady().then(() => {
  createWindow()
})

使用 npm run start 运行项目

此时，您的 Electron 应用程序应成功打开一个显示您的网页的窗口！