现在已经有很多框架可以让我们用JavaScript、HTML和CSS来编写跨平台桌面应用,Atom Shell便是其中之一。Atom Shell基于nodejs和Chromium实现,Github的开源编辑器Atom便是基于Atom shell和Coffee scrpit开发的。
Chromium浏览器可以分为两个部分:Browser端和Render端。Browser端负责与本地系统交互:创建窗口、控制托盘图标等等。Render端负责绘制页面。两者通过IPC交互。Atom Shell的实现是在Browser端和Render端分别嵌入了nodejs。这样Browser和Render两部分就都可以使用nodejs提供的api了,也可以在Browser端用javascript来调用本地系统相关的API。
在Web app中我们通常会有两种javascript脚本:服务器端脚本和客户端端脚本。客户端端脚本运行于浏览器中,服务器端脚本运行于nodejs中。在Atom Shell中有类似的概念,运行于Render端页面中的脚本和运行于browser端中的脚本。分别可以称它们为:Render端脚本和Browser端脚本。
在传统的Web app中,服务器端脚本和客户端脚本通常使用web sockets来通信。在Atom Shell中,Render端脚本需要使用ipc模块来发送信息给rowser端。同时Atom Shell还提供了一个更易用的remote模块来支持通信。
普通的网页是无法操作浏览器以外的本地系统的。而在Atom Shell中nodejs api可以在网页中使用,所以开发者可以在网页中访问本地资源,就像Node-Webkit一样。
但是和Node-Webkit不一样的是:不能直接在网页中(Render端)操作本地资源,只能通过remote模块调用Browser端脚本操作本地资源。
通常一个Atom Shell app的文件目录如下:
your-app/
├── package.json
├── main.js
└── index.html
package.json
的格式和普通的Node模块中的一样。其中属性main
的值表示app的入口脚本,这个脚本会运行在Browser端中。如下是package.json文件的样例:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
在main.js
中应该创建窗口并处理相应的系统事件,下面是一个典型的样例:
// 用于控制app的life circle
var app = require('app');
// 用于创建本地窗口的模块
var BrowserWindow = require('browser-window');
// 把app的crash情况发送给服务器
require('crash-reporter').start();
// 保持一个全局的window对象引用,
// 如果你不这么做,window对象会在GC启动后被自动垃圾收集机制释放
var mainWindow = null;
// 在所有窗口关闭后关闭app
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
// 这个方法会在Atom Shell初始化结束后调用回调函数
app.on('ready', function() {
// 创建窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载index.html
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// 在窗口关闭时触发
mainWindow.on('closed', function() {
// 移除window对象的引用
// 通常如果是多窗口的app,你需要把window对象存储到一个数组里面,而在close时把对应的window对象移除掉
mainWindow = null;
});
});
最后创建需要在窗口中显示的index.html
:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script> and atom-shell <script>document.write(process.versions['atom-shell'])</script>.
</body>
</html>
首先下载Atom Shell的可执行文件。然后运行如下命令执行app:
.\atom-shell\atom.exe your-app\
./atom-shell/atom your-app/
./Atom.app/Contents/MacOS/Atom your-app/
你只需要把app的文件夹命名为app
,并把它放在Atom Shell的资源目录下。在OS X系统中为Atom.app/Contents/Resources/
,在Linux和Windows上为resources/
。然后执行Atom.app
(在Linux中为atom
,在windows中为atom.exe
)即可。然后把atom-shell
文件夹压缩打包分发给用户即可。
如果你用的打包工具是grunt
,那么可以用grunt-download-atom-shell来自动下载对应平台的Atom Shell。