安装

在macOS上全局安装electron

1
$ npm i -g electron --unsafe-perm=true --allow-root

部署quick-start

1
$ git clone https://github.com/electron/electron-quick-start

辅助工具

electron-forge

1.安装electron-forge

1
$ npm install -g electron-forge

2.初始化项目

1
$ electron-forge init my-new-project --lintstyle=standard --template=react

3.启动项目

1
$ electron-forge start

4.打包项目

1
$ electron-forge package

electron-vue

1
2
3
# 安装 vue-cli，使用脚手架样板代码初始化项目
$ npm install -g vue-cli
$ vue init simulatedgreg/electron-vue my-project

主进程与渲染进程

electron的开发主要涉及到两个进程的操作：Main主进程，Renderer渲染进程。

主进程主要通过nodejs、chromium、native apis来实现一些系统或底层的操作，比如操作剪贴板等。

渲染进程主要通过chromium来实现web界面。

两个进程通过ipcMain和ipcRenderer来进行通信

主进程向渲染进程发消息

main.js文件：

1
2
3
4
// 当页面加载完成时，会触发`did-finish-load`事件。
win.webContents.on('did-finish-load', () => {
  win.webContents.send('main-process-messages', 'webContents event "did-finish-load" called');
});

renderer.js文件

1
2
3
4
5
6
7
// 引入ipcRenderer对象
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
// 设置监听
ipcRenderer.on('main-process-messages', (event, message) => {
  console.log('message from Main Process: ' , message);  // Prints Main Process Message.
});

渲染进程向主进程发消息

renderer.js文件

1
2
3
4
5
6
7
8
// 引入ipcRenderer对象
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
ipcRenderer.send('asynchronous-message', 'hello');

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log('asynchronous-reply: %O %O', event, arg);
});

main.js文件

1
2
3
4
ipcMain.on('asynchronous-message', (event, arg) => {
  // 返回消息
  event.sender.send('asynchronous-reply', 'ok');
});