一、什么是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 应用程序应成功打开一个显示您的网页的窗口！

【Electron】桌面应用开发相关推荐

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
Electron桌面应用开发
https://www.electronjs.org/ 有的时候样式更新不过来 ctrl + r 调试面板 ctrl + shift + i 一.Electron技术架构 Electron集成了ch ...
Electron桌面端开发(进程)
Electron中的进程进程前言
跨平台桌面应用开发工具Electron v11.0.4
介绍: Electron是GitHub发布的跨平台桌面应用开发工具,支持Web技术开发桌面应用,其本身是基于C++开发的,GUI核心来自于Chrome,而JavaScript引擎使用v8. v11.0 ...
java桌面端开发为什么没就行起来，大部分人选qt，winform，electron？
java桌面端开发为什么没就行起来的主要原因是基于Java开发的windows桌面端软件的安装部署运行的不便,绝大多数的windows电脑没有安装Java运行环境,并且基于不同版本Java开发的软件必 ...
前端实战:electron+vue3+ts开发桌面端便签应用
前端时间我的一个朋友为了快速熟悉 Vue3 开发, 特意使用 electron+vue3+ts 开发了一个桌面端应用, 并在 github 上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末 ...
如何使用Vue开发Electron桌面程序
目录一.Electron介绍二.项目搭建 1. 使用 vue cli 创建vue项目 2. 安装插件 vue-cli-plugin-electron-builder 编辑三.开发总结 1. 配 ...
vue 拖动 datatransfer 问题_electron-vue跨平台桌面应用开发实战教程（四）——窗口样式amp;打开新窗口...
> 本文我们讲解下怎么修改窗口样式,系统默认的窗口非常普通,通常与设计不符,所以我们要自定义,接下来我们讲解下怎么去掉原有样式,怎么实现实现窗口的最小化,最大化和关闭按钮.还有怎么打开一个新页 ...
electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
python eel 无边框_荐帮你解剖Python的一个轻量级桌面GUI开发第三方库：Eel，让它体无完肤...
一.Eel介绍 Eel是一个轻量的python桌面GUI开发第三方库. Eel实际上是启动了一个本地的web服务器, 它允许你将python的函数暴露给javascript, 所以网页端也能调用pyt ...

【Electron】桌面应用开发

一、什么是Electron?

二、快速入门

2.1、先决条件

2.2、创建应用程序

2.2.1、项目基架

2.2.2、安装 Electron 程序包

2.2.3、运行主进程

2.2.4、创建网页

2.2.5、在BrowserWindow中打开网页

【Electron】桌面应用开发相关推荐

最新文章

热门文章

【Electron】桌面应用开发

一、什么是Electron?

二、快速入门

2.1、 先决条件

2.2、 创建应用程序

2.2.1、 项目基架

2.2.2、安装 Electron 程序包

2.2.3、运行主进程

2.2.4、创建网页

2.2.5、在BrowserWindow中打开网页

【Electron】桌面应用开发相关推荐

最新文章

热门文章

2.1、先决条件

2.2、创建应用程序

2.2.1、项目基架