Electron 是什么？
是使用 Web 技术构建跨平台的桌面应用程序的开源技术。Web 技术指的是 JavaScript、HTML 和 CSS 三驾马车。同时，这意味着，现在用于开发网站的主流技术，如 Angular、Vue、React 等，均可以在 Electron 中应用。这也是一个将线上搬到线下的一个快捷的方式。
Electron 技术栈
Electron 特性
- 自动更新
- 原生菜单和通知
- 崩溃报告
- 调试和性能分析
- Windows 安装程序
简单入门
- 安装 Node.js，建议使用 12.x 及以上
- 启动 Terminal(终端) / cmd
- 进入一个临时目录
- clone 入门示例工程
$ git clone https://github.com/electron/electron-quick-start
正克隆到 'electron-quick-start'...
remote: Enumerating objects: 15, done.
remote: Counting objects: 100% (15/15), done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 686 (delta 6), reused 0 (delta 0), pack-reused 671
接收对象中: 100% (686/686), 445.88 KiB | 7.00 KiB/s, 完成.
处理 delta 中: 100% (360/360), 完成.
- 安装依赖库
$ cd electron-quick-start
$ npm install
> core-js@3.6.5 postinstall /Users/arthur/temp/electron/electron-quick-start/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> electron@10.1.0 postinstall /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
> node install.js
Downloading electron-v10.1.0-darwin-x64.zip: [====------------------------------------------------------------------------------------------------] 4% ETA: 18954.0 seconds
在安装的时候，会碰到 electron 下载缓慢的问题，经过研究下载和 cache 部分的源代码，在 Mac 上的解决方案如下：
- 获取 zip 包的下载地址，根据上面的提示，作如下操作来获取下载地址
$ cd /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
$ DEBUG=* node install.js
笔者此刻获取的下载地址是： https://github.com/electron/electron/releases/download/v10.1.0/electron-v10.1.0-darwin-x64.zip
-
手工下载 zip 包（此处各显神通了）
-
转到 electron 的 cache 目录下（笔者是 /Users/arthur/Library/Caches/electron）
-
根据上面下载 url，建立目录 httpsgithub.comelectronelectronreleasesdownloadv10.1.0electron-v10.1.0-darwin-x64.zip
-
将下载好的文件 electron-v10.1.0-darwin-x64.zip 复制到该目录下，如下图所示：
electron-cache.png
-
再次手工执行安装脚本
$ cd /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
$ DEBUG=* node install.js
......
extract-zip finished processing LICENSE +1ms
extract-zip zip extraction complete +0ms
$
- 安装成功！
!!! 更新： 参考官方文档 Docs / Guides / 安装 中的章节 “自定义镜像和缓存” 部分，有更好的方法！
- 启动
$ npm start
启动的窗口如下：
electron-quick-start-window.png
- 成功！
代码实现简要分析
主要文件
- index.html
- main.js
- package.json
- preload.js
- renderer.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
一个典型的 html 文件，其中 node、chrome、electron 的版本在 preload.js 中被替换。
main.js
关键点已经写上中文注释。
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
// 创建主窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 此处会自动加载和执行 preload.js
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
// 加载主入口文件: index.html
mainWindow.loadFile('index.html')
// Open the DevTools.
// 打开开发者工具
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
preload.js
简单的 DOM 操作，特别需要提到的是，在这个时刻，可以访问到 Node.js 的 API，如 process 对象。
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
网友评论