当前位置： 首页 > news >正文

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

news 2024/11/29 18:25:21

基于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）可能带来的问题，以及如何完善窗口行为，使其更加符合用户的期望。
更进一步，为了提升开发效率，我们将配置项目以实现自动重启和热更新功能。这意味着在开发过程中，每当代码保存后，应用程序将自动重新加载，无需手动重启应用，从而大大加快了迭代速度。

笔记源于：禹神：一小时快速上手Electron，前端Electron开发教程

正文

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 文件

h1 {background-color: gray;color: orange;
}

在这里插入图片描述

4 、main.js里引入页面

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 系统在处理一些操作时是有差异存在的

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

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

依据代码改写 main.js：

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、配置自动重启，保存后自动热更新完善窗口行为

npm i nodemon -D

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

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

配置 nodemon.json 规则

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

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


http://www.mrgr.cn/news/78527.html

相关文章：

  • 超级详细讲解转义字符，\? \‘ \f \0 \t等等！！！
  • linux桌面qt应用程序UI自动化实现之dogtail
  • Three.js渲染较大的模型之解决方案
  • 爬虫与反爬-旋转验证码突破方案（知名短视频、TK海外版 及 某东等等）
  • AWS账户是否支持区域划分？
  • 【工具】JS解析XML并且转为json对象
  • 算法基础 - 求解非线性方程(二分迭代法)
  • 超级详细讲解转义字符，\? \‘ \f \0 \t等等！！！
  • 【科研】9如何高效阅读和理解学术论文
  • C++ 类（Class）
  • Web Worker 和 WebSocket的区别
  • 跨平台应用开发框架（3）-----Qt(样式篇)
  • 自动控制原理——BliBli站_DR_CAN
  • python学习——元组的创建于删除
  • 快速理解微服务中Fegin的概念
  • scrapy爬虫框架小案例
  • JVM：即时编译器，C2 Compiler，堆外内存排查
  • 6.结果处理组件之ResponseHandler
  • 微信小程序蓝牙writeBLECharacteristicValue写入数据返回成功后，实际硬件内信息查询未存储？
  • Flink四大基石之窗口（Window）使用详解
  • 群控系统服务端开发模式-应用开发-邮箱配置功能开发
  • 全链接神经网络拟合函数
  • 【halcon】Metrology工具系列之get_metrology_object_result_contour
  • 数据类型.
  • 【CSS】clip-path 属性（剪裁显示区域）
  • 【FPGA】UART串口通信