【Electron学习笔记（二）】基于Electron开发应用程序

基于Electron开发本地应用程序

- 基于Electron开发本地应用程序
- 前言
- 正文
- 1、创建 pages 目录
- 2、创建 index.html 文件
- 3 、创建 html.css 文件
- 4 、main.js里引入页面
- 5 、运行 start 命令
- 6 、启用开发者模式
- 7 、解决内容安全策略
- 8、完善窗口行为
- 9、配置自动重启，保存后自动热更新完善窗口行为

基于Electron开发本地应用程序

前言

本文旨在帮助初学者快速上手Electron，通过一步步的示例操作，展示如何从头开始创建一个简单的本地应用程序。我们将从项目的基本结构搭建开始，包括创建HTML、CSS和JavaScript文件，到配置Electron主进程以加载这些资源。此外，我们还将探讨如何启用开发者模式以便于调试，如何解决内容安全策略（CSP）可能带来的问题，以及如何完善窗口行为，使其更加符合用户的期望。
更进一步，为了提升开发效率，我们将配置项目以实现自动重启和热更新功能。这意味着在开发过程中，每当代码保存后，应用程序将自动重新加载，无需手动重启应用，从而大大加快了迭代速度。

正文

1、创建 pages 目录

在这里插入图片描述

2、创建 index.html 文件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>index页面</title><link rel="stylesheet" href="./html.css"></head><body><h1>欢迎学习Electron开发</h1></body>
</html>

在这里插入图片描述

3 、创建 html.css 文件

javascript">h1 {background-color: gray;color: orange;
}

在这里插入图片描述

4 、main.js里引入页面

javascript">const {app,BrowserWindow}=require("electron") app.on("ready",()=>{const win = new BrowserWindow({width:800,height:600,autoHideMenuBar:true})//引入页面win.loadFile("./pages/index/index.html")
})

5 、运行 start 命令

在终端输入：npm start
在这里插入图片描述

6 、启用开发者模式

Ctrl + Shift + I 启用开发者模式
在这里插入图片描述

切换控制台 Console，会发现有一个警告：
在这里插入图片描述
这是因为有内容安全策略警告，就是配置在网页中能加载哪些资源。

7 、解决内容安全策略

可以参考内容安全策略（CSP）
在 index.html 中加入：

        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>index页面</title><link rel="stylesheet" href="./html.css"><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"></head><body><h1>欢迎学习Electron开发</h1></body>
</html>

再次运行后，不会有警告出现：
在这里插入图片描述

8、完善窗口行为

对于 Windows 和 macOS 系统在处理一些操作时是有差异存在的

Windows 和 Linux 平台窗口特点：应用所有窗口都关闭，那么应用自动退出
macOS 平台窗口特点：即使在没有打开任何窗口的情况下也可以继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口

执行代码可以参考官方文档：管理窗口的生命周期

依据代码改写 main.js：

javascript">const {app,BrowserWindow}=require("electron") function createWindow(){const win = new BrowserWindow({width:800,height:600,autoHideMenuBar:true})//引入页面win.loadFile("./pages/index/index.html")
}
// 当app准备好后，执行createWindow创建窗口
app.on("ready",()=>{createWindow()// 当应用被激活时app.on('activate', () => {// 如果当前应用没有窗口，则创建一个新的窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
// 当所有窗口都关闭时
app.on('window-all-closed', () => {// 如果所处平台不是mac(darwin)，则退出应用if (process.platform !== 'darwin') app.quit()})

9、配置自动重启，保存后自动热更新完善窗口行为

javascript">npm i nodemon -D

在这里插入图片描述
package.json 里重写 start 命令

javascript"> "start": "nodemon --exec electron ."

配置 nodemon.json 规则

javascript">{"ignore":["node modules","dist"],"restartable":"r","watch":["*.*"],"ext":"html,js,css"
}

配置好以后，当代码修改后保存，应用会自动重启
在这里插入图片描述