简介

优质

小牛编辑

186浏览

2023-12-01

如何使用 Node.js 和 Electron APIs

Node. js 的所有内置模块都在Electron中可用，第三方 node 模块中也完全支持 (包括原生模块 )。

Electron 还为开发原生桌面应用程序提供了一些额外的内置模块。某些模块仅在主进程中可用, 有些仅在渲染进程 (web 页) 中可用, 而有些在这两个进程中都可以使用。

基本规则是: 如果一个模块是 GUI 或底层系统相关的, 那么它应该只在主进程中可用。你需要熟悉主进程和渲染进程的概念，才能使用这些模块。

主进程脚本就像一个普通的Node.js脚本：

const { app, BrowserWindow } = require('electron')
let win = null
app.on('ready', () => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL('https://github.com')
})

渲染进程除了额外能够使用node模块的能力外，与普通网页没有什么区别

<!DOCTYPE html>
<html>
<body>
<script>
  const { app } = require('electron').remote
  console.log(app.getVersion())
</script>
</body>
</html>

要运行你的app, 请阅读 Run your app 。

Synopsis

How to use Node.js and Electron APIs.

All of Node.js's built-in modules are available in Electron and third-party node modules also fully supported as well (including the native modules).

Electron also provides some extra built-in modules for developing native desktop applications. Some modules are only available in the main process, some are only available in the renderer process (web page), and some can be used in both processes.

The basic rule is: if a module is GUI or low-level system related, then it should be only available in the main process. You need to be familiar with the concept of main process vs. renderer process scripts to be able to use those modules.

The main process script is like a normal Node.js script:

const { app, BrowserWindow } = require('electron')
let win = null
app.on('ready', () => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL('https://github.com')
})

The renderer process is no different than a normal web page, except for the extra ability to use node modules:

<!DOCTYPE html>
<html>
<body>
<script>
  const { app } = require('electron').remote
  console.log(app.getVersion())
</script>
</body>
</html>

To run your app, read Run your app.

解构赋值

从0.37开始，可以使用 destructuring assignment (es6解构赋值)来使内置模块更容易使用。

const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})

如果您需要整个 electron 模块, 则可以require它, 然后使用 destructuring 从 electron 访问各个模块。

const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})

这等效于以下代码:

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})

Destructuring assignment

As of 0.37, you can use destructuring assignment to make it easier to use built-in modules.

const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})

If you need the entire electron module, you can require it and then using destructuring to access the individual modules from electron.

const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})

This is equivalent to the following code:

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let win
app.on('ready', () => {
  win = new BrowserWindow()
  win.loadURL('https://github.com')
})