Electron入门笔记

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

快速启动

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

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

git clone https://github.com/electron/electron-quick-startcd electron-quick-start/# 如果网速慢, 就用阿里的cnpmcnpm inpm 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.jslet 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.jsipcRenderer.send('asynchronous-message', 'msg from ipcRenderer');// main.jsipcMain.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]# lselectron-quick-start  helloApp-linux-x64 cd helloApp-linux-x64/# 执行生成的app ./helloApp

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

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

欢迎补充指正!