Electron开发实践II


上一篇博客中,我向大家介绍了Electron以及Electron开发环境的部署,在这篇博客中,我将向大家介绍简单Electron应用的开发过程。

Electron程序的入口

程序入口往往是初学者在学习前的第一个疑问:这个程序是怎么跑起来的?由于Electron是Node的runtime,所以它的入口是在package.json中的main进行定义的。接触过Node的读者对此会非常熟悉,对于接触过Chrome程序开发的读者可以把package.json简单理解成manifest.json。无论是package.json还是manifest.json,它们都是一个程序信息的描述文件,里面声明了程序的名称、简介、版本等信息。

比如下面是一个简单的例子:

{
    "name": "My Electron App",
    "version": "1.0.0",
    "main": "app.js"
}

上例中定义了程序的名称为“My Electron App”,版本为“1.0.0”,入口脚本是“app.js”,这样当用户运行这个程序时,app.js就会被执行。

一个简单的Electron应用

接下来编写一个非常简单的程序,在package.json同目录下新建一个app.js文件,并写入以下内容:

var fs = require('fs');

fs.writeFileSync('message.txt',
    'This is my first Electron app!',
    'utf8');

对于没有接触过Node的读者可能对上面代码中出现的require感到陌生,这里的require和C语言的include或Java中的import类似,通过requireapp.jsfs模块引入进来,并在后面调用了它的writeFileSync方法。

fs模块是Node中提供操作文件功能的模块,writeFileSyncfs模块提供同步写入文件的方法,上面的代码就是在当前目录下,将“This is my first Electron app!”以utf-8编码方式写入message.txt文件中。运行结果如下:

my_first_electron_app

怎么样,是不是非常简单!

我们需要一个界面

如果仅仅创建一个在后台默默运行的应用,那么Electron的一半特性就被忽略了。既然Electron是一个桌面应用开发框架,那么就一定离不开界面。

Electron内置了WebKit渲染器,所以可以直接使用HTML编写程序的界面。在上一篇博客中提到的例子是包含了一个界面,这个界面也是由app.js创建的。

对上例的app.js进行修改:

var app = require('app'),
    BrowserWindow = require('browser-window');

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 300
    });

    mainWindow.loadURL('file://' + __dirname + '/app.html');

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

新代码中引入了appbrowser-window两个模块,这两个模块都是Electron提供的。app.on方法在整个程序生命周期中进行事件监听,ready事件在程序初始化完成之后触发。在上面的代码中,程序准备就绪之后,创建了一个BrowserWindow实例mainWindow,这个实例就是打开的窗口。在创建BrowserWindow实例时定义了窗口的尺寸,随后定义了窗口中需要加载的HTML文件位置。__dirname是Node中的一个常量,指向当前运行脚本所在的目录,所以app.htmlapp.js处于同一目录下。最后实例mainWindow通过监听closed事件进行自我销毁,即关闭窗口。

创建app.html写入以下内容:

<!doctype html>
<html>
<head>
<title>My First Electron App</title>
<style type="text/css">
body {
    margin: 0;
}

textarea {
    width: 100%;
    border: none;
    background: #eee;
    margin: 10px 0;
    padding: 0;
    outline: none;
}
</style>
</head>
<body>
<textarea rows="10"></textarea>
<button>Write</button>
</body>
</html>

这是一个非常简单的HTML文件,只包含一个文本框和一个按钮,style标签中是对页面上元素样式的简单描述。运行结果如下:

my_first_electron_app_interface

还是挺丑的对吧,毕竟只是个Demo嘛。

界面和逻辑的联系

上面的程序仅仅提供了一个无用的界面,无论怎么点击都不会有任何交互,所以需要把界面和程序功能联系在一起。

创建main.js并在app.js中通过script标签引入,将以下代码写入main.js

var fs = require('fs'),
    textarea = document.getElementsByTagName('textarea')[0],
    button = document.getElementsByTagName('button')[0];

function writeFile() {
    var text = textarea.value;

    fs.writeFileSync('message.txt',
        text, 'utf8');
}

button.onclick = writeFile;

需要注意的一点是,在app.html中,main.js要在页面的最后引用,否则main.js中的textareabutton无法正确获取的元素。

是不是很神奇,居然可以在网页中调用Node模块!这就是Electron的魅力所在。最后的运行结果如下:

my_first_electron_app_writefile