官方文档

https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

新建文件夹和package.json

mkdir my-electron-app && cd my-electron-app
npm init -y

mkdir my-electron-app && cd my-electron-app
npm init -y

package.json调整：

author 与 description 可为任意值，但对于应用打包是必填项。

json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

下载electron

npm i -D electron

npm i -D electron

在的 package.json配置文件中的scripts字段下增加一条start命令：

json

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

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

运行主进程

任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。

执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件，您应该已在之前的步骤中配置过了。

要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件。

创建页面

在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

此教程中，您将采用本地HTML的方式。在您的项目根目录下创建一个名为index.html的文件：

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

在窗口中打开您的页面

现在您有了一个页面，将它加载进应用窗口中。要做到这一点，你需要两个Electron模块：

app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序窗口。

因为主进程运行着 Node.js，您可以在 main.js 文件头部将它们导入作为 CommonJS 模块：

const { app, BrowserWindow } = require('electron')

const { app, BrowserWindow } = require('electron')

然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

接着，调用createWindow()函数来打开您的窗口。

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。您可以通过使用 app.whenReady() API来监听此事件。在whenReady()成功后调用createWindow()。

app.whenReady().then(() => {
  createWindow()
})

app.whenReady().then(() => {
  createWindow()
})

注意：此时，您的电子应用程序应当成功打开显示您页面的窗口！

官方文档 #

新建文件夹和package.json #

下载electron #

运行主进程 #

创建页面 #

在窗口中打开您的页面 #