Electron笔记02-Hello World！

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

引言

　　在 前一篇文章 中介绍了在macOS上搭建Node.js+Electron的过程。准备好了开发环境，接下来当然是开始搞事情啦！作为一只程序猿，搞事情从哈喽沃德开始！

第一个Electron App

Electron App的结构

　　这第一个App的名称暂定为 “test-app” ，它的基础文件结构如下：

1
2
3
4
test-app/
├── package.json
├── main.js
└── index.html

　　这个结构是Electron App最简单最基础的文件结构，在这些文件里，我们可以定义、编写自己的应用的样式、功能等等。后期随着应用功能的增加，可能会遇到更复杂的组织形式。

各个文件的内容

package.json

　　package.json文件是一个Electron App的基础配置文件，基本内容如下：

1
2
3
4
5
{
    "name" : "test-app",
    "version" : "0.1.0",
    "main" : "main.js"
}

　　其中”name”属性记录了应用的名称，可以自定义；”version”属性记录了应用的版本，可用于应用更新、版本控制等；”main”属性则指定了主进程的入口文件，在下文中会介绍。

　　作为一个标准的json文件，在这个文件中不能有任何注释符号，如//、/*、#等。同时还需要遵守其它json格式规范，具体细节就不赘述了。

main.js

　　main.js文件（文件名可在package.json中自行定义）是Electron主进程的入口文件，基本内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const electron = require('electron');  // 引用 Electron 模块。
const app = electron.app;  // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow;  // 创建原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用，不然当 JavaScript 被 GC 后，window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function () {
    // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前，应用会保持活动状态
    // if (process.platform != 'darwin') {
    app.quit();
    // }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口时，这个方法就会被调用
app.on('ready', function () {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    // 加载应用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // 默认打开开发工具
    // mainWindow.openDevTools();

    // 当 window 被关闭，这个事件会被发出
    mainWindow.on('closed', function () {
        // 取消引用 window 对象。如果你的应用支持多窗口的话，通常会把多个 window 对象
        // 存放在一个数组里面，但这次是单窗口应用，只有一个 window 对象，退出时要销毁
        mainWindow = null;
    });
});

　　当App启动时，Electron主进程会根据package.json中配置的main入口文件，找到并执行。在main.js文件中，Electron完成了主窗口的初始化及创建后，会通过loadURL()函数加载主界面，而这个主界面就由接下来介绍的index.html文件定义。

index.html

　　Electron在根据main.js完成了主窗口的初始化及创建后，会通过loadURL()函数加载index.html作为应用的主界面，基本内容如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    Hello World! Hello Charles! This is your first Electron application, nice try!
  </body>
</html>

运行程序

　　在按照上文完成三个文件的创建流程之后，一个最简单的Electron App就编写完成了。接下来就运行一下这个程序看看效果吧！

　　打开终端，切换到应用项目所在文件夹（也就是上述三个文件所在的文件夹），然后输入以下命令：

　　$ electron .

　　Electron就会按照配置文件，初始化并创建主窗口，然后加载index.html文件，效果如下图：

App界面

顺手记录一下，macOS下的截图快捷键是 shift+command+4。

后记

　　到这里，第一个Electron App就跑起来了。所以其实我们可以看到，Electron应用本质上就是通过将浏览器窗口封装为一个应用，然后渲染网页作为界面，并通过JavaScript作为应用逻辑代码的实现语言。所以说，Electron真的是前端友好型语言啊！

显示 Gitment 评论