Electron简单例子

时间 2021-05-27

标签 html node web npm json 浏览器服务器 app electron 函数栏目 HTML 繁體版

原文原文链接

Electron 可使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。咱们能够把它看做一个 Node. js 的变体，它专一于桌面应用而不是 Web 服务器端。html

从开发的角度来看，Electron 应用本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个简单的 Electron 项目包含三个基本文件：package.json，index.hmtl，main.js 。node

package.json 是 Node.js项目的配置文件。
index.html 是桌面应用的界面页面。
main.js 是应用的启动入口文件。

建立项目

咱们在指定路径中新建一个名为 my_electron 的文件夹做为项目根目录，而后在命令工具中使用 cd 命令，将当前目录更改成项目根目录：web

>cd C:\Users\lu\Desktop\my_electron

以下图所示：npm

而后执行 npm init 命令进行项目初始化，以下图所示：json

命令执行成功后，项目根目录下会建立一个 package.json 文件，若是所有选择默认配置，则能够直接执行 npm init -y 命令。浏览器

修改package.json

咱们能够修改建立好的 package.json 文件，在 scripts 中添加脚本命令，以下所示：服务器

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js"
  },
  "keywords": [],
  "author": "Silenzio",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

咱们在这个文件中指定了一个启动脚本，以后能够经过这个脚原本启动程序，它将用 electron 来启动 src 目录下的 main.js 文件。app

还能够看到在这个文件中的 "devDependencies" 中有一项 "electron": "^10.1.2"，表示将 electron 安装成功并添加到依赖中。electron

建立main.js文件

咱们在项目的根目录下建立一个 src 文件夹，并在这个文件夹中建立一个 main.js 文件，这个文件就是应用的启动入口文件。函数

Electron 应用使用 JavaScript 开发，其工做原理和方法与 Node.js 开发相同。electron 模块包含了 Electron 提供的全部 API 和功能，引入方法和 Node.js 模块同样，均可以经过 require() 来引入，例如：

const electron = require('electron')

electron 模块所提供的功能都是经过命名空间暴露出来的。例如 electron.app 负责管理 Electron 应用程序的生命周期，electron.BrowserWindow 类负责建立窗口等。

示例：

例如咱们要在 main.js 文件中建立窗口，内容以下所示：

// 引入electron
const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
  // 建立浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载index.html文件
  win.loadFile('../html/index.html');

  // 自动打开开发者工具
  win.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发
  win.on('closed', () => {
    win = null;
  });
}

// Electron 会在初始化后并准备，建立浏览器窗口时，调用这个函数
app.on('ready', createWindow);
// 当所有窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

添加index.html文件

在上面的 main.js 文件中咱们指定了一个 index.html 文件，这个 html 文件，就是程序的主页面。

因此咱们还须要在项目的根目录下建立一个 html 文件夹，在这个文件夹中建立一个 index.html 文件，内容以下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my_electron</title>
  </head>
  <body>
    <h1>你好，侠课岛!</h1>
  </body>
</html>

启动项目

在完成了项目的建立、初始化项目、安装 electron 、建立必要文件这几个步骤以后，如今咱们就能够开始启动项目啦。由于咱们已经在 package.json 文件中设置了脚本命令，因此只须要直接在项目根目录下直接以下指令便可：

npm start

命令执行完成以后，程序后被启动，以下图所示：

此时桌面上启动了一个独立的程序，这个程序中界面的左边显示的是渲染后的 index.html ，界面的右边部分则是 Chrome/Chromium 浏览器的开发者选项。由于咱们在 main.js 文件中设置了 win.webContents.openDevTools(); ，因此在启动程序时会自动打开开发者工具。若是须要开发者工具，只须要将这句代码注释，而后再次启动程序便可。