前端开发框架之Electron的认识

2023-11-16 13:05:04

1.关于Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到前端培训同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ，Electron限制了所使用的核心项目的数量。比如Electron只用了Chromium的渲染库而不是其全部组件。这使得升级Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。添加到Electron的新功能应该主要是原生 API。如果可以的话，一个功能应该尽可能的成为一个Node.js模块。

2.开发环境

可以使用原生的Node.js开发环境来开发Electron应用。为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。我们以比较常见的windows开发环境（win7以上）为例：

首先，安装最新版本的node.js。推荐安装最新的长期支持的版本。在安装过程中的配置界面请勾选node.js runtime、npm package manager和add to path这三个选项。可通过以下命令来确认node和npm已经安装完成。

3.打造一个简单的Electron应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

your-app/
├── package.json
├── main.js
└── index.html

为你的新Electron应用创建一个新的空文件夹。打开你的命令行工具，然后从该文件夹运行npm init

npm 会帮助你创建一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。如下片段是一个 package.json 的示例：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

注意：如果 main 字段没有在 package.json 中出现，那么 Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。如果你实际开发的是一个简单的 Node 应用，那么你需要添加一个 start 脚本来指引 node 去执行当前的 package,把这个 Node 应用转换成一个 Electron 应用也是非常简单的，我们只不过是把 node 运行时替换成了 electron 运行时。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"}

4.开发一个简单的electron

Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样。

electron 模块所提供的功能都是通过命名空间暴露出来的。比如说：electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口。

您应当在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口，添加后，main. js 就像下面这样：

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


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


  // 并且为你的应用加载index.html
  win.loadFile('index.html')


  // 打开开发者工具
  win.webContents.openDevTools()
}


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)


// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})


app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})


// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。

5.启动应用

在创建并初始化完成 main.js、 index.html和package.json之后，您就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了。

码农公寓

相关文章