Blog

Blog

PHODAL

Electron 初体验

这几天在试着再次开始一个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 .

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签