Electron 简介及入门教程

来源:简书 分类: 文章浏览史 发布时间:2020-09-22 19:53:54 最后更新:2020-09-22 浏览:136
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-22 19:53:54

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 上的解决方案如下:

  1. 获取 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

  1. 手工下载 zip 包(此处各显神通了)

  2. 转到 electron 的 cache 目录下(笔者是 /Users/arthur/Library/Caches/electron)

  3. 根据上面下载 url,建立目录 httpsgithub.comelectronelectronreleasesdownloadv10.1.0electron-v10.1.0-darwin-x64.zip

  4. 将下载好的文件 electron-v10.1.0-darwin-x64.zip 复制到该目录下,如下图所示:


    electron-cache.png
  5. 再次手工执行安装脚本

$ 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
$
  1. 安装成功!

!!! 更新: 参考官方文档 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])
  }
})

参考

php技术微信