这几天在试着再次开始一个Editor,因为已经有了开源的Atom,以及其底层Electron。
Electron是一个原本为 Atom 编辑器设计的,跨平台的应用外壳(Application Shell),它将 Chromium 和 Node.js 的事件循环整合到了一起,同时提供了一些与原生系统交互的 API.
现在已经有很多应用基于Electron,作为一个一次开发多平台运行的框架还是不错的。
我们可以默认将其分为两部份的开发流程,通俗的说一部分是Server,一部分是Browser。按官方的说法就是一个是main进程,一个是renderer进程,两者之间的通信是通过ipc进行的。简单地来说在main进程里,我们可以用一些node.js后台的框架,而在render里用的是一些前端的框架。
这种开发流程和Chrome的插件有点像,但是Chrome的插件没办法用Node.js的包。
Quick Start
安装Electron
自然是需要用到npm
# Install the `electron` command globally
npm install electron-prebuilt -g
# Install as a development dependency
npm install electron-prebuilt --save-dev
创建Electron应用
首先,我们需要我们一个main进程来,控制一些窗口的大小、样式等等,而窗口里面的内容就是浏览器里面的内容。官方给的一个main.js的demo如下
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
我们可以在这部门添加各种后台的node包,在上面的代码中很重要的一句话在于
mainWindow.loadUrl('file://' + __dirname + '/index.html');
这可以让窗口加载Renderer进程,而在这个进程里面就是我们日常用的HTML。
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
接着我们就可以迎来Hello,World。
然后就是运行
electron .
或许您还需要下面的文章: