electron note

最新推荐文章于 2024-09-12 07:45:08 发布

sun-ying

最新推荐文章于 2024-09-12 07:45:08 发布

阅读量146

点赞数

分类专栏： electron 文章标签： css html javascript node.js npm

本文链接：https://blog.csdn.net/qq_36248539/article/details/117133751

版权

electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2021.5.12 note

初识 electron

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。

前提条件
在使用Electron进行开发之前，需要安装 Node.js。
安装完node.js后,使用以下命令检查
```
node-v
npm -v
```
创建基本应用程序
从开发的角度来看，Electron 应用本质上是一个 Node.js 应用。这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。基本的 Electron 应用程序具有以下结构：
my-electron-app/
├── package.json
├── main.js
├── preload.js
└── index.html
- 安装 Electron
  
  为您的项目创建一个文件夹并安装 Electron：
```
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
```
- 创建主脚本文件
  
  主脚本指定了运行主进程的 Electron 应用程序的入口(对我们而言，是 main.js 文件)。通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。
  
  主脚本可以如下所示：
```
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
	const win = new BrowserWindow({
	 width: 800,
	 height: 600,
	webPreferences: {
  	preload: path.join(__dirname, 'preload.js')
		}
  	})

	win.loadFile('index.html')
}

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

app.on('activate', () => {
	 if (BrowserWindow.getAllWindows().length === 0) {
  	createWindow()
	}
  })
})

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
	app.quit()
}
})
```
上面发生了什么？

第 1 行：为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块。
第2行: 导入 path 包，该包为操作文件路径提供了实用的功能。
第 4 行：在此之后，你定义一个方法用来创建一个带有预加载脚本的新的浏览器窗口，并加载index.html文件进入该窗口 (第 13 行，我们将在后面探讨这个文件)。
第 16 行：你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。
第 18 行：您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。例如，在首次启动应用程序后或重启运行中的应用程序。
第 25 行：您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。由于操作系统的窗口管理行为，此监听器在 macOS 上是禁止操作的。
创建网页

这是应用程序初始化后您想要显示的页面。此网页代表渲染过程。您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染进程。你可以选择性地从您的预加载脚本中公开额外的 Node.js API 来授予对它们访问权限。

index.html 页面如下所示：

	<!DOCTYPE html>
	<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Hello World!</title>
    	<meta http-equiv="Content-Security-Policy" 			content="script-src 'self' 'unsafe-inline';" />
	</head>
	<body style="background: white;">
    	<h1>Hello World!</h1>
   	 	<p>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</p>
	</body>
	</html>

定义一个预加载脚本

您的预加载脚本(在本例中是preload.js 文件)充当Node.js 和您的网页之间的桥梁。它允许你将特定的 API 和行为暴露到你的网页上，而不是危险地把整个 Node.js 的 API暴露。在本例中，我们将使用预加载脚本从process对象读取版本信息，并用该信息更新网页。

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

上面发生了什么？
第 1 行：首先定义了一个事件监听器，当web页面加载完成后通知你。
第 2 行：接着您定义了一个功能函数用来为index.html中的所有placeholder设置文本。
第 7 行：接下来您遍历了您想展示版本号的组件列表。
第 8 行：最终，您调用 replaceText 来查找index.html中的版本占位符并将其文本值设置为process.versions的值。

修改您的 package.json 文件

您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：

{
“name”: “my-electron-app”,
“version”: “0.1.0”,
“author”: “your name”,
“description”: “My Electron app”,
“main”: “main.js”
}

注意：如果未设置 main 字段，Electron 将尝试加载包含在 package.json 文件目录中的 index.js 文件。

注意：author 和 description 字段对于打包来说是必要的，否则运行 npm run make 命令时会报错。

默认情况下， npm start 命令将用 Node.js 来运行主脚本。要使用 Electron 来运行脚本，您需要将其更改为这样：

{
“name”: “my-electron-app”,
“version”: “0.1.0”,
“author”: “your name”,
“description”: “My Electron app”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
}
}

运行您的应用程序