Electron入门笔记

electron号称是可以通过html, css, javascript构建跨平台的桌面应用,
自己试了下, 感觉还是不错的, 可以通过js写桌面应用, 再次让js扩大了应用领域.

快速启动

官方提供了一个种子工程electron-quick-start, 可以帮我们快速搭建环境.

只需要简单几步, 一个操作系统原生窗口就出现了:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start/
# 如果网速慢, 就用阿里的cnpm
cnpm i
npm start

目录结构如下:

.
└── electron-quick-start
    ├── index.html
    ├── LICENSE.md
    ├── main.js
    ├── node_modules
    ├── package.json
    ├── README.md
    └── renderer.js

我们主要关心: index.html, main.js, renderer.js.

Main Process & Renderer Process

这里译为主进程和渲染进程.

为了感受下electron的魅力, 我们来弹个alert试试.

// 在main.js中添加
function createWindow () {
    ...
    alert(1);
    ...
}

然后npm start
然后居然报错:

Uncaught Exception:
ReferenceError: alert is not defined

发现main.js中并不是我们平时写的js那样, 它会负责创建主进程.
而renderer.js(其实起什么名字都可以, 它是在index.html中引入的其实),
负责创建渲染进程, 这里边就可以操作dom, bom等, 可以想像成chrome的一个个标签页.
在renderer.js中添加alert(1);, 然后npm start发现可以正常运行.

主进程和渲染进程通信

主进程 -> 渲染进程

// main.js, 注意要在mainWindow创建之后
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.send('main-process-messages', 'webContents did-finish-load');
});

// renderer.js
let electron = require('electron');
const { ipcRenderer } = electron;

// 渲染进程设置监听
ipcRenderer.on('main-process-messages', function(e, arg) {
  console.log('ipcRenderer receiver: ' + arg);
});

这里要说下, 主进程的console.log是会打印在cli上,
而渲染进程的console.log会打印在DevTools上, 所以main.js中要有这句:

// Open the DevTools.
mainWindow.webContents.openDevTools()

渲染进程 -> 主进程

// renderer.js
ipcRenderer.send('asynchronous-message', 'msg from ipcRenderer');

// main.js
ipcMain.on('asynchronous-message', function(e, arg) {
  console.log('ipcMain received: ' + arg);
});

打包

cnpm i electron-packager -g

# 在项目根目录执行, 打包到与项目同级目录
electron-packager . helloApp --out ../

# 查看结果
[root@localhost electron-quick-start]# cd ..
[root@localhost electron]# ls
electron-quick-start  helloApp-linux-x64
 cd helloApp-linux-x64/
# 执行生成的app
 ./helloApp

具体用法请参看: https://github.com/electron-userland/electron-packager

参考:
https://segmentfault.com/a/1190000006207600

欢迎补充指正!