Atom-Shell 入门

Atom-Shell 入门

现在已经有很多框架可以让我们用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。

Browser端

在Web app中我们通常会有两种javascript脚本:服务器端脚本和客户端端脚本。客户端端脚本运行于浏览器中,服务器端脚本运行于nodejs中。在Atom Shell中有类似的概念,运行于Render端页面中的脚本和运行于browser端中的脚本。分别可以称它们为:Render端脚本和Browser端脚本。

在传统的Web app中,服务器端脚本和客户端脚本通常使用web sockets来通信。在Atom Shell中,Render端脚本需要使用ipc模块来发送信息给rowser端。同时Atom Shell还提供了一个更易用的remote模块来支持通信。

Render端

普通的网页是无法操作浏览器以外的本地系统的。而在Atom Shell中nodejs api可以在网页中使用,所以开发者可以在网页中访问本地资源,就像Node-Webkit一样。

但是和Node-Webkit不一样的是:不能直接在网页中(Render端)操作本地资源,只能通过remote模块调用Browser端脚本操作本地资源。

DEMO

通常一个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>

运行App

首先下载Atom Shell的可执行文件。然后运行如下命令执行app:

  1. windows:.\atom-shell\atom.exe your-app\
  2. Linux: ./atom-shell/atom your-app/
  3. Mac OS X: ./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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Fiddler抓包10-会话框添加请求类型(get、post)

前言 在使用fiddler抓包的时候,查看请求类型get和post每次只有点开该请求,在Inspectors才能查看get和post请求,不太方便。于是可以在会...

23540
来自专栏从零开始学自动化测试

Selenium2+python自动化46-js解决click失效问题

前言 有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应。这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了。 本篇用2种方法解决...

32460
来自专栏西安-晁州

thinkjs crud练习

今天看了下thinkjs(v2.1.7),做了一个简单的入门demo,基于mysql数据库增删改查,详细源码如下: 页面整体展示: ? 会员新增: ? 删除: ...

32600
来自专栏小李刀刀的专栏

CSS:模拟Windows窗口及DIV居中

  利用CSS,尝试做了一个仿Windows窗口的横向纵向均居中的Div效果:   以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3...

33050
来自专栏前端儿

MIUI选项框开关样式模拟

点击开关按钮,则开启或关闭。原生的checkbox无法做到图示的效果,所以就需要额外的元素来表示图中的开关

21320
来自专栏技术小黑屋

实时预览Markdown利器

使用MBP15寸有点高不成低不就,接显示器分辨率下降(浪费Retina屏),不接显示器屏幕不是很大。

44430
来自专栏Objective-C

iOS-运行程序屏幕上下有黑边

52890
来自专栏前端大白专栏

react-native icon使用方式

19940
来自专栏Python小屋

PAGE:像Visual Studio一样设计Python GUI窗体

虽然使用标准库tkinter开发Python GUI程序很方便,也提供了强大的功能,但是窗体上的一切都需要程序员使用代码来控制,在页面布局上浪费大量时间,确实不...

65540
来自专栏拂晓风起

Word2007 设置Tab键的默认缩进距离

11330

扫码关注云+社区

领取腾讯云代金券