Electron
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。Electron通过将Chromium和Node.js合并到同一个运行时环境中并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
Chromium
Chromium是由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码,Chromium的开发可能早自2006年即开始。Chromium 是 Google 的Chrome浏览器背后的引擎,其目的是为了创建一个安全、稳定和快速的通用浏览器。
如何搭建?
electron-forge
Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的( 且有稳定维护的 )Electron构建工具整合为一个简单易用的工具包,所有人都可以用它来快速地搭建Electron开发环境。
Forge 将一些流行框架整合为“开箱即用”的模板,比如:React、Vue、Angular等。 Forge 的一些核心模块来自于上层的Electron社区(比如electron-packager
),因而Electron主要维护人员(比如说Slack)提交的Electron更新也会使Forge的用户受益。
关于Forge的更多信息,请查阅electronforge.io。
electron-react-boilerplate
如果你不希望任何工具,而想要简单地从一个模板开始构建,CT Lin的 electron-react-boilerplate
可能值得一看。 它在社区中很受欢迎,并在内部使用了 electron-builder
。
搭建的方式有很多,以下为我个人做法:
搭建一个electron结合react、Webpack的项目,首先搭建一个react+Webpack的项目,配置好webpack.config.js,确保可以正确运行调试。(这里省略如何搭建react+Webpack项目)
在项目中安装electron
npm install electron -save-dev
安装完成后,在项目根目录下新建main.js,为electron的启动文件。(可直接从https://github.com/electron/electron-quick-start中复制过来)
Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
修改main.js文件,修改mainWindow.loadURL ,这里为了方便调试,直接将路径修改为localhost服务地址。
mainWindow = new BrowserWindow(windowOptions)
// mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
mainWindow.loadURL("http://localhost:8060/dashboard/dashboardForMaster")
修改package.json文件,在其中修改main指定main.js作为electron的入口文件,start-electron执行命令,用以启动electron。
"main": "main.js",
"start-electron": "electron .",
运行
完成上述步骤后,即可启动应用。首先启动原react项目 执行命令,在执行electron命令,用以运行electron
npm start
npm run start-electron
启动成功后,将自动弹出electron应用窗口。
如何调试
渲染进程
最广泛使用来调试指定渲染进程的工具是Chromium的开发者工具集。 它可以获取到所有的渲染进程,包括BrowserWindow
的实例,BrowserView
以及WebView
。 您可以通过编程的方式在BrowserWindow的webContents
中调用openDevTool()
API来打开它们:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.webContents.openDevTools()
主进程
调试主进程有点棘手, 因为您不能简单地打开开发者工具来调试它们。 多亏了谷歌和Node.js的紧密合作,Chromium开发者工具可以被用来调试Electron的主进程,否则你也许会遇到许多怪事就像require
不能再控制台中显示。
打包
使用electron-packager进行打包,安装electron-packager
npm install electron-packager -save-dev
在package.json中添加命令,"packager": "electron-packager . --platform=darwin --electron-version=1.0.1 --overwrite",
执行打包命令,
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
执行后完成打包,生成本地应用文件,可直接双击启动应用程序。
注:如项目为单页面应用,man.js需要添加如下代码。
const shouldQuit = app.makeSingleInstance(
(commandLine, workingDirectory) => {
if (mainWindow) {
if (mainWindow.isMinimized()) {
mainWindow.restore();
}
mainWindow.focus();
}
}
);
if (shouldQuit) {
app.quit();
return;//没有这句话,会报错!
};