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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签