使用Electron开发Desktop App

Electron可以让你使用JavaScript开发桌面应用程序,它提供的JavaScript运行时和丰富的原生(操作系统)Api,你也可以查看Nodejs运行时,只需要关注桌面部分

这不意味着Electron是一个JavaScript绑定到用户界面库(GUI),Electron使用Web页面作为GUI,你将会看到的一个通过JavaScript控制的最小化浏览器

Main Process主进程

有一个进程它将会运行package.json的main脚本,称它为主进程,脚本将会运行在主进程中运行,通过创建web页面展示GUI

Renderer Process渲染进程

Electron使用Chromium展示web页面,Chromium也是多进程架构,每个web页面在Electron运行着自己的进程,称他为渲染进程

主进程和渲染进程不同点

主进程通过创建BrowserWindow实例来创建web页面,每个BrowserWindow实例在它自己的渲染进程中运行web页面,当BrowserWindow撤销时,渲染进程也会被终止

主进程管理全部web页面和它相应的渲染进程,每个渲染进程是孤立的,仅在相应的web页面中运行

在web页面,调用原生GUI以及相关的Api是不允许的,因为在web页面中管理原生的GUI资源是非常危险并却很容易导致资源泄露,如果你想在web页面中进行GUI操作,web页面的渲染进程必须和主进程通讯,由主进程负责操作

在Electron,我们有几种方式让主进程和渲染进程进行通许,使用ipcRenderer和ipcMain模块可以发送消息,使用RPC方式通讯,这里说明怎么与web页面共享数据

编写你的第一个Electron App

通常, Electron app结构是这样的

your-app/  
├── package.json
├── main.js
└── index.html

格式化后的package.json其实是Nodejs的模块,并且指定main字段脚本启动app,主进程将会运行

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意:在package.json没有指定main字段,Electron 将会载入index.js

main.js将会创建Windows和处理系统事件

const electron = require('electron');  
// 该模块控制应用生命周期
const {app} = electron;  
// 该模块可以浏览器原生窗口
const {BrowserWindow} = electron;

// 保留window对象全局引用,如果你不需要它,
// 当JavaScript进行GC(garbage collected)时窗口将会自动关闭
let win;

function createWindow() {  
  // 创建浏览器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 载入app的index.html
  win.loadURL(`file://${__dirname}/index.html`);

  // 打开开发者工具.
  win.webContents.openDevTools();

  // 当窗口关闭时触发该事件
  win.on('closed', () => {
   // 如果你的app支持多个窗口,你需要将windows保存一个数组中。
   // 这时,当你删除一个元素后就会删除对应的窗口
    win = null;
  });
}

// 当 Electron 完成初始化完成并且已经创建浏览器窗口,这个方法会被调用。
// 某些API仅在这个事件发生才可以调用
app.on('ready', createWindow);

// 当全部窗口关闭时即退出
app.on('window-all-closed', () => {  
  // 在macOS应用会一直停留在菜单栏中直到用户按下Cmd + Q才会退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {  
  // 当点击dock图标并且没有窗口被打开时,在App重新创建中窗口
  if (win === null) {
    createWindow();
  }
});

// 你可以在这个文件包含主进程剩余的代码,你也可以分离到其它文件中并通过require导入

最后index.html展示页面

<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>  

运行你的App

现在我们已经创建初始化main.js,index.html和package.json文件,你可以尝试运行你的app并测试它

预构建Electron

electron-prebuilt是一个npm的模块它包含了预编译版本的Electron

如果你已经使用npm进行全局安装

electron .  

Thank Electron

你的欣赏是我最大的动力

Yanxiong Huang

My name is Yanxiong Huang. graduated from Nanyang middle school.Love Linux,familiar with Node.js,Docker,Serverless... and more Web technology.Contact Me:QQ 31356617;Email:huangaynxiong2013@gmail.com

guangzhou,china http://www.myfreax.com

乐在分享