禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron

一、Electron是什么

简单的一句话，就是用html+css+js+nodejs+（Native Api）做兼容多个系统（Windows、Linux、Mac）的软件。

官网解释如下(有点像绕口令)：
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
在这里插入图片描述
在这里插入图片描述

二、Elemtron流程模型

Electron流程模型图

三、Electron搭建工程，若成功则输出123

3.1 准备

可参考Electron官网地址
需要node和npm，先检测是否安装。

node -v
npm -v

在这里插入图片描述

3.2 项目初始化

命令行创建

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

或者，手动快速创建
在这里插入图片描述

package.json文件

{"name": "my-electron-app","version": "1.0.0","description": "test Electron","main": "main.js","author": "Bin9153","license": "MIT"
}

有几条规则需要遵循：

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。
在这里插入图片描述

3.3 安装 Electron

npm install --save-dev electron
//或者
npm install electron -D

3.4 配置并启动

在 package.json配置文件中的scripts字段下增加一条start命令：

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

这一步，完整的package.json

{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron ."},"author": "bin9153","license": "ISC","description": "electron test","dependencies": {"electron": "^31.2.0"}
}

代码解析：
package代码解析
创建main.js。
在这里插入图片描述
在main.js里写入

console.log(123)

在这里插入图片描述

再运行！

npm start

注意：

  1. 先创建main.js，否则报错
  2. 如果main.js里没写输出（或其他代码）则，启动了运行窗口也不容易看出变化

启动输出123
成功输出123，工程搭建完成。

四、开始制作程序

4.1 案例1：做一个简易网页程序

点击可以查看，browser-window配置项的开发文档
在main.js里写入

const {app, BrowserWindow} = require('electron')app.on('ready', () => {//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶x: 0,//窗口位置x坐标y: 0//窗口位置y坐标})//加载一个远程页面win.loadURL('https://blog.csdn.net/qq_33650655/article/details/140353815')
})

运行

 npm start

制作一个远程界面
成功显示页面。
页面成功运行

4.2 案例2：做一个本地程序（不是远程链接页面，是自己写的页面）

4.2.1 是本地程序，所以创建新的页面

新建pages目录，创建页面，这里就像写前端一样了。index.html,index.css
在这里插入图片描述
index.html里

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这里是index页面</title>
</head><body>
<h1>这里是index里的标题
</h1>
</body>
</html>

main.js里引入页面

const {app, BrowserWindow} = require('electron')app.on('ready', () => {//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶})//引入页面win.loadFile('./pages/index/index.html')})

运行

npm start

4.2.2 解决内容安全策略

有安全提示
在这里插入图片描述
在index.html里加入，如下代码，内容安全策略警告提示消失。

//electron 提供的配置 成功运行
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
//electron 提供的配置2 引入js后也会报错
<meta http-equiv="Content-Security-Policy" content="default-src none">
//视频教程里的配置 会报错
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self''unsafe-inline';img-src self'data:;">
//我自己写的组合的配置更全 加了一个script的限制,有事儿后期再改， 刚试了会报错，可能哪里没写对，先记录在这里
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';style-src 'self''unsafe-inline';img-src self'data:;">

安全策略代码详解

关于CSP的详细说明：MDN内容安全策略详解 、Electron安全策略规范

4.2.3 增加多系统的兼容代码

兼容mac(完善窗口行为）
electron文档：
关闭所有窗口时退出应用 (Windows & Linux)
如果没有窗口打开则打开一个窗口 (macOS)
在main.js里写入兼容各个系统平台的代码

const {app, BrowserWindow} = require('electron')function createWindow(){//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶})win.loadFile('./pages/index/index.html')
}
app.on('ready', () => {createWindow()//兼容核心代码 1app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})//兼容核心代码 2
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

代码解析
在这里插入图片描述

下面两句代码相等

app.on('ready', () => {// 写核心代码
})
// 或者
app.whenReady().then(() => {//写核心代码
})

4.2.4 配置自动重启,保存后自动热更新

npm i nodemon -D

package.json里重写start

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

重写start

这样保存main.js里的内容，就自动热更新了。
但是更新index.html里的代码不能热更新，要加一个nodemon.json，需要手动添加

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

增加nodemon.json,
增加nodemon文件和内容
重启生效

npm start

4.2.5 编写页面程序(写一个应用程序，可以写入任意文字到hello.text里)

页面程序要写在页面里，那它和主进程的关系如图
Electron流程模型图
每个页面程序通过渲染和主进程通信，主进程根据需求调用Native Api来实现功能。

实际，每个页面和主程序通信时，需要建个桥梁来管理它们的通信，preload.js(自己创建)，来管理实现通信。
在这里插入图片描述
创建preload.js定义桥梁js
创建preloadjs
在main.js中定义preload.js为桥梁
在main.js里定义桥梁

main.js代码：

const {app, BrowserWindow} = require('electron')
const path = require('path')function createWindow(){//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶webPreferences:{  //在main.js中定义preload.js为桥梁preload:path.resolve(__dirname,'./preload.js')}})//引入页面win.loadFile('./pages/index/index.html')win.openDevTools()  //自动打开调试窗口console.log("main.js里的main.js")
}app.on('ready', () => {createWindow()//兼容核心代码1app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})

创建渲染js
在这里插入图片描述
定义渲染js
定义渲染js
这是自己整理的，整理了前面45分钟，再这么整理下去，1000字也不够用。
下面写代码不详细介绍了。会点前端的能懂一半多代码。
可以看原来的教程 从45分钟开始看。视频教程
直接上代码。

main.js里的代码

const {app, BrowserWindow,ipcMain} = require('electron')
const path = require('path')
const fs = require('fs')//写入文件
function writeFile(_, data) {fs.writeFileSync('D:/hello.txt', data)
}
//读取文件
function readFile() {const res = fs.readFileSync("D:/hello.txt").toString()return res
}function createWindow() {//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶webPreferences: {  //在main.js中定义preload.js为桥梁preload: path.resolve(__dirname, './preload.js')}})ipcMain.on('file-save', writeFile)ipcMain.handle('file-read', readFile)//引入页面win.loadFile('./pages/index/index.html')win.openDevTools()  //自动打开调试窗口console.log("main.js里的main.js")
}app.on('ready', () => {createWindow()//兼容核心代码1app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})

preload.js里的代码

const {contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI', {version: process.version,saveFile: (data) => {ipcRenderer.send('file-save', data)},readFile() {return ipcRenderer.invoke('file-read')}
})

render.js里的代码

const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")
const btn3 = document.getElementById("btn3")
const input = document.getElementById("inp")
btn1.onclick = () => {alert(myAPI.version)
}
btn2.onclick = () => {myAPI.saveFile(input.value)
}
btn3.onclick = async() => {const res = await myAPI.readFile()alert(res)
}

html里的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>这里是index页面</title>
</head><body>
<h1>欢迎学习Electron开发！！！</h1>
<button id="btn1">点我</button>
<hr/>
<input type="text" id="inp"/>
<button id="btn2">向D盘写入hello.txt</button>
<hr>
<button id="btn3">读取hello.txt的内容</button>
</body><script type="text/javascript" src="./render.js"></script>
</html>

目录结构

在这里插入图片描述

备注：
1.代码稍微有点不一样
2.目录结构也有变化，功能是一样的

五、打包

5.1 使用electron-builder打包，打包时要访问github需要修仙术

1.安装electron-builder:

npm install electron-builder -D

2.在package.json中进行相关配置，具体配置如下：

备注：json文件不支持注释，使用时请去掉所有注释。

打包配置图

package.json里的代码

{"name": "video-tools","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "com.atguigu.video","win": {"icon": "./logo.ico","target": [{"target": "nsis","arch": ["x64"]}]},"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true}},"devDependencies": {"electron": "^30.0.0","electron-builder": "^24.13.3"},"author": "宝码香车","license": "ISC","description": "A video processing program based on Electron"
}

根据视频操作未能完成打包，这种方式在打包时 访问github 多次尝试后，决定放弃

5.2 使用Electron Forge进行打包（使用这种方式打包的）

Electron中文网也推荐使用这种方式。
Electron Forge是从建项目开始配置 的，因为项目已经写完了，所以从第五步开始。
Electron Forge 从第五步开始的文档

5.2.1 使用3条命令，完成打包。

1、运行第1条命令

npm install --save-dev @electron-forge/cli

2、运行第2条命令

npx electron-forge import

这时在packgae.json里会增加一些配置。

在package里增加配置
不用管。

3、直接运行第3条命令

npm run make

打包完成。

5.2.2 打包后的位置,在根项目下的out文件里

打包后的文件,在根项目下的out文件夹里

打包后的文件

可运行程序在 my-electron-app\out\make\squirrel.windows\x64

可运行程序

5.2.3 看运行效果，终于完成了。

完成运行效果

5.2.4 出现的bug

1.安装一次后再打开会报错，
再次安装报错

2.直接删除软件，目录在 C:\Users\Administrator\AppData\Roaming 删除my_electron_app这个文件夹。然后用360安全卫士清理垃圾。然后重启即可。

其他bug
1.软件有卡死的现象
2.还会自动重启
3.软件关闭后会自动重启
4.在输入框中输入内容，写入后可能会卡死，第二次可能无法输入，但可以读取。
5.启动时有点卡

六、总结

1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。
2.也有可能与main.js写法有关。
3.打包时删除main.js里的 win.openDevTools() //自动打开调试窗口 否则软件会自动打开调试窗口。
4. 代码仓库位置 https://gitee.com/electron_9/my-electron-app

终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。

整理不易点赞关注支持宝码香车

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/45537.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Resources.Load返回null

Resources.Load返回null

Resources.Load返回null 在unity中Resources.Load从Assets下的任意Resources目录下读取资源&#xff0c;比如从Assets\Resources下读取Cube&#xff08;预制体&#xff09;&#xff0c;当然也可以读取其他资源 代码为 GameObject prefab Resources.Load<GameObject>(…
阅读更多...
微软Edge浏览器深度解析：性能、安全性与特色功能全面评测

微软Edge浏览器深度解析：性能、安全性与特色功能全面评测

一、引言 自Windows 10操作系统推出以来&#xff0c;微软Edge浏览器作为默认的网页浏览器&#xff0c;凭借其现代化的设计和出色的性能表现&#xff0c;逐渐获得了用户的认可。本文旨在对Edge浏览器进行深入分析&#xff0c;探讨其在多个方面的表现。 二、界面与操作体验 界面…
阅读更多...
在 PostgreSQL 里如何处理数据的存储优化和数据库备份的效率平衡？

在 PostgreSQL 里如何处理数据的存储优化和数据库备份的效率平衡？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 里如何处理数据的存储优化和数据库备份的效率平衡&#xff1f;一、数据存储优化&#x…
阅读更多...
HTML表格表单及框架标签

HTML表格表单及框架标签

一.表格标签 1.<table></table> 创建表格 2.<caption></caption> 表格的标题 3.<tr></tr>Table Row&#xff08;表格行&#xff09; 4.<td></td>Table Data&#xff08;表格数据&#xff09;其中有属性rowspan"2&quo…
阅读更多...
Linux操作系统——数据库

Linux操作系统——数据库

数据库 sun solaris gnu 1、分类&#xff1a; 大型 中型 小型 ORACLE MYSQL/MSSQL SQLITE DBII powdb 关系型数据库 2、名词&#xff1a; DB 数据库 select update database DBMS 数据…
阅读更多...
距离变换 Distance Transformation

距离变换 Distance Transformation

以下为该学习地址的学习笔记&#xff1a;Distance transformation in image - Python OpenCV - GeeksforGeeks 其他学习资料&#xff1a;Morphology - Distance Transform 简介 距离变换是一种用于计算图像中每个像素与最近的非零像素之间距离的技术。它通常用于图像分割和物体…
阅读更多...
51单片机5（GPIO简介）

51单片机5（GPIO简介）

一、序言&#xff1a;不论学习什么单片机&#xff0c;最简单的外设莫过于I口的高低电平的操作&#xff0c;接下来&#xff0c;我们将给大家介绍一下如何在创建好的工程模板上面&#xff0c;通过控制51单片机的GPIO来使我们的开发板上的LED来点亮。 二、51单片机GPIO介绍&#…
阅读更多...
PySide在Qt Designer中使用QTableView 显示表格数据

PySide在Qt Designer中使用QTableView 显示表格数据

在 PySide6 中&#xff0c;可以使用 Qt Model View 架构中的 QTableView 部件来显示和编辑表格数据。 1、创建ui文件 在Qt Designer中新建QMainWindow&#xff0c;命名为csvShow.ui。QMainWindow上有两个部件&#xff1a;tableview和btn_exit。 2、使用pyuic工具将ui文件转换为…
阅读更多...
Kafka（四） Consumer消费者

Kafka（四） Consumer消费者

一&#xff0c;基础知识 1&#xff0c;消费者与消费组 每个消费者都有对应的消费组&#xff0c;不同消费组之间互不影响。 Partition的消息只能被一个消费组中的一个消费者所消费&#xff0c; 但Partition也可能被再平衡分配给新的消费者。 一个Topic的不同Partition会根据分配…
阅读更多...
MySQL集群、Redis集群、RabbitMQ集群

MySQL集群、Redis集群、RabbitMQ集群

一、MySQL集群 1、集群原理 MySQL-MMM 是 Master-Master Replication Manager for MySQL&#xff08;mysql 主主复制管理器&#xff09;的简称。脚本&#xff09;。MMM 基于 MySQL Replication 做的扩展架构&#xff0c;主要用来监控 mysql 主主复制并做失败转移。其原理是将真…
阅读更多...
基于Faster R-CNN的安全帽目标检测

基于Faster R-CNN的安全帽目标检测

基于Faster R-CNN的安全帽目标检测项目通常旨在解决工作场所&#xff0c;特别是建筑工地的安全监管问题。这类项目使用计算机视觉技术&#xff0c;特别是深度学习中的Faster R-CNN算法&#xff0c;来自动检测工人是否正确佩戴了安全帽&#xff0c;从而确保遵守安全规定并减少事…
阅读更多...
实验一：图像信号的数字化

实验一：图像信号的数字化

目录 一、实验目的 二、实验原理 三、实验内容 四、源程序及结果 源程序&#xff08;python&#xff09;&#xff1a; 结果&#xff1a; 五、结果分析 一、实验目的 通过本实验了解图像的数字化过程&#xff0c;了解数字图像的数据矩阵表示法。掌握取样&#xff08;象素个…
阅读更多...
Linux 网络配置与连接

Linux 网络配置与连接

一、网络配置 1.1 ifconfig 网卡配置查询 ifconfig #查看所有启动的网络接口信息 ifconfig 指定的网卡 #查看指定网络接口信息 1.2 修改网络配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 #ens33网络配置文…
阅读更多...
【电源拓扑】反激拓扑

【电源拓扑】反激拓扑

目录 工作模式 固定频率 CCM连续电流模式 DCM不连续电流模式 可变频率 CRM电流临界模式 反激电源CRM工作模式为什么要跳频 反激电源应用场景 为什么反激电源功率做不大 电感电流爬升 反激变压器的限制条件 精通反激电源设计的关键-反激电源变压器设计 反激电源变压…
阅读更多...
MySQL 事务与锁

MySQL 事务与锁

事务ACID特性 原子性&#xff1a;事务要么同时成功&#xff0c;要么同时失败&#xff0c;事务的原子性通过undo log日志保证 一致性&#xff1a;业务代码要抛出报错&#xff0c;让数据库回滚 隔离性&#xff1a;事务并发执行时&#xff0c;他们内部操作不能互相干扰 持久性&…
阅读更多...
Python 读取esxi上所有主机的设备信息

Python 读取esxi上所有主机的设备信息

&#xff08;主要是为了统计所有虚拟机的设备名称和所属主机&#xff09; 代码&#xff1a; from pyVim import connect from pyVmomi import vim import ssldef get_vm_devices(vm):devices []try:if vm.config is not None and hasattr(vm.config, hardware) and hasattr(v…
阅读更多...
postgresql简单导出数据与手动本地恢复（小型数据库）

postgresql简单导出数据与手动本地恢复（小型数据库）

问题 需要每天手动备份postgresql。 步骤 导出数据 /opt/homebrew/opt/postgresql16/bin/pg_dump --file/Users/zhangyalin/backup_sql/<IP地址>_pg-2024_07_15_17_30_15-dump.sql --dbname<数据库名> --username<用户名> --host<IP地址> --port54…
阅读更多...
Day53:图论 岛屿数量 岛屿的最大面积

Day53:图论 岛屿数量 岛屿的最大面积

99. 岛屿数量 时间限制&#xff1a;1.000S 空间限制&#xff1a;256MB 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成&#xff0c;并且四周…
阅读更多...
低空经济持续发热，无人机培训考证就业市场及前景剖析

低空经济持续发热，无人机培训考证就业市场及前景剖析

随着科技的不断进步和社会需求的日益增长&#xff0c;低空经济已成为全球及我国经济增长的新引擎。作为低空经济的重要组成部分&#xff0c;无人机技术因其广泛的应用领域和显著的经济效益&#xff0c;受到了社会各界的广泛关注。为满足市场对无人机人才的需求&#xff0c;无人…
阅读更多...
深入剖析 Android 开源库 EventBus 的源码详解

深入剖析 Android 开源库 EventBus 的源码详解

文章目录 前言一、EventBus 简介EventBus 三要素EventBus 线程模型 二、EventBus 使用1.添加依赖2.EventBus 基本使用2.1 定义事件类2.2 注册 EventBus2.3 EventBus 发起通知 三、EventBus 源码详解1.Subscribe 注解2.注册事件订阅方法2.1 EventBus 实例2.2 EventBus 注册2.2.1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023