Electron

几个概念

  • process.env
  • global

remote

要在主进程中初始化才能使用

require('@electron/remote/main').initialize()

appendSwitch

app.commandLine.appendSwitch 必须在应用准备好之前调用，即在 app.whenReady() 回调函数之前。

官方教程

https://www.electronjs.org/zh/docs/latest/tutorial/message-ports

  • 开始上手 ✓
    • 简介 ✓
    • 快速入门 ✓
    • 安装指导 ✓
  • 教程 ✓
    • ... ✓
  • Electron中的进程
    • ... ✓
    • Electron中的消息端口
  • 最佳实践
  • 示例
    • Dark Mode
    • 设备访问
    • 应用程序内购
    • 键盘快捷键
    • 深度链接 (Deep Links)
    • 桌面快捷启动
    • Dock
    • 多线程
    • 原生文件拖 & 放
    • 通知（Notifications）
    • 离屏渲染
    • 在线/离线事件探测
    • 进度条
    • 最近的文件
    • 在 BrowserWindow 中展示文件
    • 拼写检查器
    • Tray
    • Web 嵌入
    • 任务栏自定义
    • 自定义窗口
  • 检测
  • 分发
  • 检测和调试
  • 引用
  • 参与贡献

相关文章

React
Vue
综合
下载
打包
自动更新

待处理

  • 自动更新
  • windows 打包成安装包
  • 同步，用户登陆认证
  • 用户数据加密

开始

npm install --save-dev electron

"scripts": {
    "start": "electron ."
}

electron-vue

npm install -g vue-cli
npm install -g @vue/cli-init
vue init simulatedgreg/electron-vue electron-vue-demo
cd electron-vue-demo
npm install
npm run dev

调试

渲染进程调试

let win = new BrowserWindow()
win.webContents.openDevTools()

主进程调试

--inspect=[port]
--inspect-brk=[port]

VSCode

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

Distribution

Distribution
├ 打包成 asar
│ ├ 打包 asar
│ └ 使用 asar
│   ├ Node API
│   ├ Web API
│   ├ 把 asar 档案当作一个普通的文件
│   └ Node API 的局限性
└ 打包工具
  ├ Electron Forge

打包成 asar

打包工具自带此功能，无需手动。

打包 asar
npm install -g asar

asar pack your-app app.asar

使用 asar

Node API

由于 Electron 中打了特别补丁， Node API 中如 fs.readFile 或者 require 之类 的方法可以将 asar 视之为虚拟文件夹，读取 asar 里面的文件就和从真实的文件系统中读取一样。

// 从 asar 档案读取一个文件：
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')Copy

// 列出档案根目录下的所有文件：
const fs = require('fs')
fs.readdirSync('/path/to/example.asar')Copy

// 使用档案中的模块：
require('/path/to/example.asar/dir/module.js')Copy

// 你也可以使用 BrowserWindow 来显示一个 asar 档案里的 web 页面：
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.loadURL('file:///path/to/example.asar/static/index.html')

Web API

在 Web 页面里，用 file: 协议可以获取 asar 包中文件。和 Node API 一样，视 asar 包如虚拟文件夹。

// $.get 获取文件:
let $ = require('./jquery.min.js')
$.get('file:///path/to/example.asar/file.txt', (data) => {
  console.log(data)
})

把 asar 档案当作一个普通的文件

某些情况下，如：对 asar 档案文件进行校验，我们需要像读取 “文件” 那样读取 asar 档案文件。 为此你可以使用内置的没有asar功能的和原始fs模块一模一样的original-fs模块。

const originalFs = require('original-fs')
originalFs.readFileSync('/path/to/example.asar')Copy

您也可以将 process.noAsar 设置为 true 以禁用 fs 模块中对 asar 的支持：

const fs = require('fs')
process.noAsar = true
fs.readFileSync('/path/to/example.asar')

Node API 的局限性

打包工具

Electron Forge 🔗

npm install -g electron-forge
electron-forge init my-new-project
cd my-new-project
electron-forge start

打包工具对比： https://www.npmtrends.com/electron-builder-vs-electron-forge-vs-electron-packager https://stackoverflow.com/questions/37113815/electron-builder-vs-electron-packager https://discuss.atom.io/t/builder-forge-packager-which-do-i-use/38894 https://github.com/electron-userland/electron-builder/issues/1193

手动

  1. 使用 prebuilt binaries, placed in Electron's resources directory, named app

  2. Rebrand Windows编辑icon https://github.com/atom/rcedit Mac

Electron.app/Contents/Info.plist
Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
  1. 重新编译Electron源码 如果你有个人定制的C++代码必须打补丁到Electron

通信

ipcMain.on、ipcRender.send web Storage remote

// 在主进程中
global.sharedObject = {
  someProperty: 'default value'
}

// 在第一个页面中
require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'

// 在第二个页面中
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)

Other

DevTools扩展 https://electronjs.org/docs/tutorial/devtools-extension https://github.com/MarshallOfSound/electron-devtools-installer

BrowserWindow.addDevToolsExtension(extension)

setProgressBar

browserWindow.setProgressBar(0.5)

Recents

app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
app.clearRecentDocuments()
  • Windows 需要 应用注册
  • macOS 从 "最近文档" 菜单中请求文件时, 将为其发出 app 模块的 open-file 事件

其他

https://github.com/sindresorhus/awesome-electron

调试 https://electronjs.org/docs/tutorial/debugging-main-process https://nodejs.org/en/docs/inspector/

package https://electronjs.org/docs/tutorial/application-packaging

桌面环境集成 https://electronjs.org/docs/tutorial/desktop-environment-integration 通知 https://electronjs.org/docs/tutorial/notifications

Dock https://electronjs.org/docs/tutorial/macos-dock DarkMode https://electronjs.org/docs/tutorial/mojave-dark-mode-guide 针对 macOS系统 BrowserWindows的展示文件 https://electronjs.org/docs/tutorial/represented-file

签名 https://electronjs.org/docs/tutorial/code-signing MacOS应用内购买 https://electronjs.org/docs/tutorial/in-app-purchases MAS上架 https://electronjs.org/docs/tutorial/mac-app-store-submission-guide

辅助功能 https://electronjs.org/docs/tutorial/accessibility

多线程 https://electronjs.org/docs/tutorial/multithreading

https://electronjs.org/docs/tutorial/using-native-node-modules

自动化测试 https://electronjs.org/docs/tutorial/automated-testing-with-a-custom-driver

快捷键 https://electronjs.org/docs/tutorial/keyboard-shortcuts

离屏渲染 https://electronjs.org/docs/tutorial/offscreen-rendering

自定义 Linux 桌面启动器行为 https://electronjs.org/docs/tutorial/linux-desktop-actions

snapcraft https://electronjs.org/docs/tutorial/snapcraft

REPL https://electronjs.org/docs/tutorial/repl

Security https://electronjs.org/docs/tutorial/security

旧版官方教程目录

指南

  • 关于 Electron
  • 辅助功能
  • Electron App 反馈计划
  • Electron 应用结构
  • 调试应用
  • 分发应用
  • 应用程序打包 ^✔
  • 使用自定义驱动程序进行自动化测试
  • 模板和命令行界面
  • 代码签名
  • 调试主进程
  • 使用 VSCode 进行主进程调试
  • 桌面环境集成
  • 开发环境
  • 开发工具扩展程序
  • 5.0.0 版本发布日程
  • Electron 版本管理
  • 打造你的第一个 Electron 应用
  • 应用内购买 (macOS)
  • 安装
  • 键盘快捷键
  • 自定义 Linux 桌面启动器行为
  • Mac App Store 应用程序提交指南
  • MacOS Dock
  • Mojave Dark Mode
  • 多线程
  • 原生文件拖放
  • 通知 (Windows, Linux, macOS)
  • 离屏渲染
  • 在线/离线事件探测
  • 任务栏的进度条 (Windows, macOS, Unity)
  • 快速入门
  • 最近文档 (Windows & macOS)
  • 交互式解释器 (REPL)
  • 针对 macOS系统 BrowserWindows的展示文件
  • 安全性，原生能力和你的责任
  • Snapcraft 指南 (Ubuntu 软件中心 & 更多)
  • Electron技术支持
  • Headless CI Systems 测试 (Travis CI, Jenkins)
  • Testing Widevine CDM
  • 更新应用程序
  • 使用 Node 原生模块
  • 使用 Pepper Flash 插件
  • 使用 Selenium 和 WebDriver
  • Windows 商店提交指南
  • Windows 任务栏

API 参考

  • 快捷键
  • app
  • autoUpdater
  • API协议
  • 类: BrowserView
  • BrowserWindow
  • 类: BrowserWindowProxy
  • 支持的 Chrome 命令行开关
  • 类: ClientRequest
  • 剪贴板
  • contentTracing
  • Cookies
  • 崩溃日志报告
  • 类: Debugger
  • desktopCapturer
  • 对话框
  • 类：downloadItem
  • 环境变量
  • File 对象
  • 无边框窗口
  • 系统快捷键
  • inAppPurchase
  • 类：IncomingMessage
  • ipcMain
  • ipcRenderer
  • 本地化
  • 菜单
  • 菜单项
  • nativeImage
  • 网络
  • netLog
  • 通知
  • 电源监视器
  • 省电拦截器 | powerSaveBlocker
  • 进程
  • protocol
  • remote
  • sandbox 沙盒选项
  • screen
  • session
  • shell
  • 简介
  • systemPreferences
  • 类: TouchBar
  • 类: TouchBarButton
  • 类: TouchBarColorPicker
  • 类: TouchBarGroup
  • 类: TouchBarLabel
  • 类: TouchBarPopover
  • 类: TouchBarScrubber
  • 类: TouchBarSegmentedControl
  • 类: TouchBarSlider
  • 类: TouchBarSpacer
  • 系统托盘
  • webContents
  • webFrame
  • 类：WebRequest
  • <webview>标签
  • window.open 函数

API 结构

  • BluetoothDevice Object 蓝牙设备
  • Certificate Object 证书对象
  • CertificatePrincipal Object 证书主体
  • Cookie Object
  • CPUUsage 对象
  • 崩溃报告对象
  • DesktopCapturerSource 对象
  • Display对象
  • FileFilter 对象
  • GPU 特性状态对象
  • IO计数器 对象
  • JumpListCategory 对象
  • JumpListItem 对象
  • MemoryInfo 对象
  • MemoryUsageDetails 对象
  • MimeTypedBuffer对象
  • NotificationAction 对象
  • Point 对象
  • PrinterInfo 对象
  • ProcessMetric 对象
  • 产品对象
  • Rectangle 类型
  • Referrer 对象
  • RemoveClientCertificate 对象
  • RemovePassword 对象
  • ScrubberItem 对象
  • SegmentedControlSegment 对象
  • ShortcutDetails 对象
  • Size 对象
  • StreamProtocolResponse 对象
  • Task 对象
  • ThumbarButton 对象
  • TraceCategoriesAndOptions Object
  • TraceConfig 对象
  • 事务对象
  • UploadBlob 对象
  • UploadData 对象
  • UploadFile 对象
  • UploadRawData 对象
  • WebSource Object

高级

  • Electron 和 NW.js (原名 node-webkit) 在技术上的差异
  • Build Instructions
  • 构建步骤（Linux）
  • 构建步骤（macOS）
  • 构建步骤（Windows）
  • 构建系统概览
  • Chromium 开发
  • 在 C++ 代码中使用 clang-format 工具
  • 代码规范
  • 在 Windows 中调试
  • 在 macOS 中调试
  • 使用 XCode 调试
  • Electron中的问题
  • 拉取请求
  • 对 Electron 进行开发
  • 发布
  • 在调试器中设置 Symbol 服务器
  • 源码目录结构
  • 测试
  • 升级 Chromium
  • 更新崩溃报告（Crashpad）
  • 升级 Node
  • V8 开发
更新时间：2025-03-14 14:22:55