【Electron】桌面应用开发

Hi 小朋友

已于 2023-12-08 09:27:09 修改

阅读量1.1k

点赞数 2

分类专栏：前端开发文章标签： electron javascript 前端

于 2022-10-03 12:32:50 首次发布

本文链接：https://blog.csdn.net/weixin_64172426/article/details/126094153

版权

前端开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

2.2.2、安装 Electron 程序包

2.2.3、运行主进程

2.2.4、创建网页

2.2.5、在BrowserWindow中打开网页

一、什么是Electron?

Electron是一个使用JavaScript，HTML和CSS构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron允许您维护一个JavaScript代码库，并创建可在Windows，macOS和Linux上运行的跨平台应用程序 - 无需本机开发经验。

二、快速入门

本指南将引导您完成在Electron中创建准系统Hello World应用程序的过程。

在本教程结束时，您的应用程序将打开一个浏览器窗口，其中显示一个网页，其中包含有关正在运行的Chromium，Node.js和Electron版本的信息。

2.1、先决条件

要使用Electron，您需要安装Node.js。

要检查 Node.js是否已正确安装，请在终端客户端中键入以下命令：

node -v
npm -v

这些命令应相应地打印 Node.js 和 npm 的版本。

2.2、创建应用程序

2.2.1、项目基架

Electron应用程序遵循与其他Node.js项目相同的一般结构。首先创建一个文件夹并初始化一个 npm 包。

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

init初始化命令会提示您在项目初始化配置中设置一些值为本教程的目的，有几条规则需要遵循：

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

你的 package.json 文件应该像这样：

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

2.2.2、安装 Electron 程序包

npm install --save-dev electron

查看版本号

npx electron -v

在package.json文件中添加如下命令：

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

之后可以使用 npm run start 运行项目

2.2.3、运行主进程

任何Electron应用程序的切入点都是它的脚本。此脚本控制主进程，该进程在完整的 Node.js环境中运行，负责控制应用的生命周期、显示本机接口、执行特权操作以及管理呈现器进程

若要初始化脚本，请在项目的根文件夹中创建一个名为 main.js的空文件。

2.2.4、创建网页

在为应用程序创建窗口之前，我们需要创建将加载到其中的内容。在Electron中，每个窗口都显示可以从本地HTML文件或远程URL加载的Web内容。

在项目的根文件夹中创建一个文件：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

2.2.5、在BrowserWindow中打开网页

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

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

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

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

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

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

  win.loadFile('index.html')
}

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

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

使用 npm run start 运行项目

此时，您的 Electron 应用程序应成功打开一个显示您的网页的窗口！

Hi 小朋友

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Electron】桌面应用开发

Electron是一个使用JavaScript，HTML和CSS构建桌面应用程序的框架。通过将和嵌入到其二进制文件中，Electron允许您维护一个JavaScript代码库，并创建可在Windows，macOS和Linux上运行的跨平台应用程序 - 无需本机开发经验。
复制链接

扫一扫