🌵 Electron 前端开发桌面应用

我家猫叫佩奇
354 阅读5分钟

Electron是什么

  • Electron 是由 Github开发的开源框架
  • 它允许开发者使用Web技术构建跨平台的桌面应用
Electron = Chromium + Node.js + Native API
  • Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
  • Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
  • Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

通过三者的巧妙组合，我们开发应用变的十分高效。

安装

前提已经安装node, 官网：nodejs.org/zh-cn/

npm install electron --save-dev

打包并分发您的应用程序

最快捷的打包方式是使用 Electron Forge。

  1. 将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：

npm

npm install --save-dev @electron-forge/cli\
npx electron-forge import\
\
✔ Checking your system\
✔ Initializing Git Repository\
✔ Writing modified package.json file\
✔ Installing dependencies\
✔ Writing modified package.json file\
✔ Fixing .gitignore\
\
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.\
\
Thanks for using "electron-forge"!!!

yarn

yarn add --dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!
  1. 使用 Forge 的 make 命令来创建可分发的应用程序：

npm

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

yarn

yarn run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：

// 以 macOS 为例
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

问题

为什么我在安装 Electron 时遇到问题？

运行时 npm install electron，部分用户偶尔会遇到安装错误。

在几乎所有情况下，这些错误都是网络问题的结果，而不是 electron npm 包的实际问题。ELIFECYCLE、  EAI_AGAIN、 ECONNRESET和 等错误 ETIMEDOUT 都是此类网络问题的迹象。最好的解决办法是尝试切换网络，或稍等片刻，然后再次尝试安装。

 如果通过安装 失败，您也可以尝试直接从 electron/electron/releasesnpm下载 Electron  。

Electron 什么时候会升级到最新的 Chrome ？

Electron 的 Chrome 版本通常会在新的稳定 Chrome 版本发布后的一到两周内升级。此估计无法保证，取决于升级所涉及的工作量。

仅使用 Chrome 的稳定通道。如果重要的修复程序在 beta 或 dev 通道中，我们将对其进行反向移植。

更多信息请参见 安全介绍。

当将电子升级到最新的Node.js？

当 Node.js 的新版本发布时，我们通常会等待大约一个月，然后在 Electron 中升级版本。因此，我们可以避免受到新 Node.js 版本中引入的错误的影响，这种情况经常发生。

Node.js 的新特性通常是由 V8 升级带来的，因为 Electron 使用的是 Chrome 浏览器自带的 V8，所以新的 Node.js 版本的闪亮的新 JavaScript 特性通常已经在 Electron 中。

如何分享网页之间的数据？

要在网页（渲染器进程）之间共享数据，最简单的方法是使用浏览器中已有的 HTML5 API。好的候选者是 Storage API、  localStorage、 sessionStorage和 IndexedDB。

或者，您可以使用 Electron 提供的 IPC 原语。要在主进程和渲染器进程之间共享数据，可以使用 ipcMain 和 ipcRenderer 模块。要在网页之间直接通信，您可以 MessagePort 从一个页面发送到另一个页面，可能通过使用 ipcRenderer.postMessage(). 通过消息端口进行的后续通信是直接的，不会绕道主进程。

几分钟后，我的应用程序托盘消失了。

当用于存储托盘的变量被垃圾收集时，就会发生这种情况。

如果您遇到此问题，以下文章可能会有所帮助：

如果你想快速修复，你可以通过改变你的代码来使变量全局化：

const { app, Tray } = require('electron')
app.whenReady().then(() => {
  const tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

复制

对此：

const { app, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

复制

我不能在 Electron 中使用 jQuery/RequireJS/Meteor/AngularJS 。

由于 Electron 的 Node.js 集成，在 DOM 中插入了一些额外的符号，例如 module,  exports,  require. 这会导致某些库出现问题，因为它们想要插入具有相同名称的符号。

为了解决这个问题，你可以在 Electron 中关闭节点集成：

// In the main process.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

复制

但是如果你想保留使用 Node.js 和 Electron API 的能力，你必须在包含其他库之前重命名页面中的符号：

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

复制

require('electron').xxx 未定义。

使用 Electron 的内置模块时，您可能会遇到如下错误：

require('electron').webFrame.setZoomFactor(1.0)
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined
avatar
文章
阅读
粉丝