参考并扩展自
Creating a markdown app with Electron and React
简介
Electron是一个使用js来开发跨平台桌面端软件的一个框架。
比较著名的产品包括：
- VS code
- skype
- atom
- 钉钉
- SwitchHosts!
重点
- electron的原理是把chromium的v8引擎和node的运行时结合到了一起。
- 架构还是前后端分离
- 前端按照web开发的方式正常开发
- 通信原理：每一个前端窗口是一个进程，后端单独是一个进程。electron提供前后端进程间通信的接口。
开发流程
前提条件
有一个可以跑通的web项目，比如用create-react-app创建的项目。
安装electron
npm install electron --save-dev
在package.json的script中添加
"electron-start": "electron ."
在package.json的顶层添加
"main": "public/main.js"
此时的package.json看起来是这样的
{
"name": "mook",
"version": "0.1.0",
"main": "public/main.js",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.13"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron-start": "electron ."
},
"devDependencies": {
"electron": "^1.7.6"
}
}
main.js文件是后端主进程的执行入口，内容如下：
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 900, height: 680});
mainWindow.loadURL('http://localhost:3000');
app.setAboutPanelOptions({
applicationName: "Mook",
applicationVersion: "0.0.1",
})
mainWindow.on('closed', () => mainWindow = null);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
其中mainWindow.loadURL('http://localhost:3000');这行为加载的前端页面的地址。
此时，先执行npm run start启动前端页面，再执行npm run electron-start启动electron。
简化开发启动
每次启动都需要执行两个命令，比较麻烦，因此，可以通过安装几个包来解决这个问题。
npm install wait-on concurrently --save-dev
然后再package.json文件的script中添加
"electron-dev": "concurrently \"npm start\" \"wait-on http://localhost:8080 && electron .\"",
这样，就可以通过执行npm run electron-dev一个命令启动了。
创建打包脚本
- 首先需要安装打包工具
npm install electron-builder --save-dev - 添加打包配置
然后再package.json文件的script中添加
"preelectron-pack": "npm run build"
以及
"electron-pack": "build -c.extraMetadata.main=build/main.js"
preelectron-pack命令会在执行npm run electron-pack之前自动执行，也就是会先打包前端的代码，生成一个html文件。
需要注意的是，build/main.js就是刚刚package.json文件中的public/main.js。只不过在打包前端代码的时候一并打包入了build目录中。如果你用的不是create-react-app，那么需要注意把这个文件一起打包进去。
在package.json中，需要增加一个build块和homepage属性，build用来告诉electron-pack如何打包，而homepage则指明了js和css文件的位置。配置如下：
"homepage": "./",
"build": {
"appId": "com.mook",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
}
- 修改main.js
之前的main.js是加载了http://localhost:3000的方式进行的。打包后不能继续使用这种方法。需要安装一个包
npm install electron-is-dev --save
这个包用来判断当前执行的环境。
之后修改public/main.js
const isDev = require('electron-is-dev');
const path = require('path');
将原来的
mainWindow.loadURL('http://localhost:3000');
改为
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
- 打包
执行npm run electron-pack就会生成dmg文件。
至此整个项目的架子基本就已经搭完了。
前后端通信
electron提供了ipcMain和ipcRenderer两个类进行通信。
前端发送请求
const {ipcRenderer} = window.require('electron')
ipcRenderer.send(channel, data)
其中 channel可以理解为调用的方法名，需要后端对该方法进行监听。
后端接受请求
const { ipcMain } = electron
ipcMain.on(channel, (event, arg) => {
# do something here
})
反过来
后端发送请求
mainWindow.webContents.send(channel, data)
其中mainWindow为项目启动时创建的窗口，如果创建了多个窗口，可以向指定的窗口发送请求。
前端监听请求
const {ipcRenderer} = window.require('electron')
ipcRenderer.on(channel, (event, arg) => {
# do something here
})
小结
以上是开发工程中遇到的比较费时间的一些事情的整理。electron用来开发一些小工具还是一个不错的选择。
