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

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签