electron电子入门


备注

什么是电子?

Electron是一个开源框架 ,用于使用HTMLCSSJavaScript创建桌面应用程序。在内部,它的工作得益于ChromiumNode.js。

它的原始创建者GitHub与广泛的开发人员社区合作来维护该项目,可以在这里找到。

使用Electron的一个主要好处是,由于它基于Web技术,因此它是跨平台的 ,允许使用相同的代码部署Linux,MacOS和Windows的应用程序。

它还具有本机元素,如菜单和通知,以及用于调试和崩溃报告的有用的开发工具。

在Electron上构建的应用程序

使用此框架的应用程序的一些示例是:

......还有很多其他人

版本

备注发布日期
1.0.0 2016年5月9日
1.0.1 2016年5月11日
1.0.2 2016年5月13日
1.1.0 2016年5月13日
1.1.1 二零一六年五月二十零日
1.1.2 2016年5月24日
1.1.3 2016年5月25日
1.2.0 2016年5月26日
1.2.1 2016年6月1日
1.2.2 2016年6月8日
1.2.3 这和之间还有更多
1.4.7,但有太多
列出来
2016年6月16日
1.4.7 截至2016年11月19日的最新版本 2016年11月19日
1.6.11 2017年5月25日
1.7.3 截至2017年6月19日的最新版本 2017年6月19日

你好,世界!

建立

电子项目结构通常如下所示:

hello-world-app/
├── package.json
├── index.js
└── index.html
 

现在让我们创建文件并初始化我们的package.json

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init
 

注意:如果未在package.json 指定main 参数,Electron将使用index.js 作为默认入口点。

主要过程

在Electron中,运行package.json 主脚本的进程称为主进程 。在这里,我们可以通过创建BrowserWindow 实例来显示GUI。

将以下内容添加到index.js

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

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})
 

HTML模板和渲染器流程

接下来,我们为应用程序创建GUI。 Electron使用网页作为GUI,每个网页都在自己的进程中运行,称为渲染器进程

将以下代码添加到index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
 

运行应用程序

有多种方法可以运行Electron App。

已安装electron-prebuilt 全球

首先,确保已安装electron-prebuilt

现在我们可以使用以下命令测试应用程序:

$ electron .
 

方法2 - 没有安装electron-prebuilt 全球

首先,我们必须输入你的应用程序的文件夹(package.json所在的文件夹)。

在那里,打开一个终端/命令提示符窗口并键入npm install 以将必要的安装到该应用程序的文件夹中。

之后,键入npm start 运行应用程序。请记住, package.json 仍然需要指定一个“开始”脚本。

如果一切正常,你应该看到这样的事情:

在此处输入图像描述

恭喜!您已成功创建了第一个Electron应用程序。

安装电子

依赖

要安装电子,您必须首先安装Node.js ,它随npm一起提供

怎么安装呢?

使用npm

# Install the `electron` command globally in your $PATH
npm install electron -g

# OR

# Install as a development dependency
npm install electron --save-dev