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

优质文章学习记录

— 12 min read
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
⚠️注意：
1️⃣原视频打包时，是使用electron-builder打包，使用electron-builder打包，打包时要访问github需要修仙术才能访问。
2️⃣本笔记，使用Electron Forge进行打包，使用Electron Forge不需要访问github更友好。在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 =newBrowserWindow({ width:800,//窗口宽度 height:600,//窗口高度 autoHideMenuBar:true,//自动隐藏菜单档 alwaysOnTop:true,//置顶 x:0,//窗口位置x坐标 y:0//窗口位置y坐标})//加载一个远程页面 win.loadURL('https://blog.ZEEKLOG.net/qq_33650655/article/details/140353815')})

运行

 npm start
制作一个远程界面


成功显示页面。

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

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

新建pages目录，创建页面，这里就像写前端一样了。index.html,index.css

在这里插入图片描述


index.html里

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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 =newBrowserWindow({ width:800,//窗口宽度 height:600,//窗口高度 autoHideMenuBar:true,//自动隐藏菜单档 alwaysOnTop:true,//置顶})//引入页面 win.loadFile('./pages/index/index.html')})

运行

npm start

4.2.2 解决内容安全策略

有安全提示

在这里插入图片描述


在index.html里加入，如下代码，内容安全策略警告提示消失。

//electron 提供的配置 成功运行 <metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"> //electron 提供的配置2 引入js后也会报错 <metahttp-equiv="Content-Security-Policy"content="default-src none"> //视频教程里的配置 会报错 <metahttp-equiv="Content-Security-Policy"content="default-src 'self';style-src 'self''unsafe-inline';img-src self'data:;"> //我自己写的组合的配置更全 加了一个script的限制,有事儿后期再改， 刚试了会报错，可能哪里没写对，先记录在这里 <metahttp-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')functioncreateWindow(){//当app准备好后，执行createWindow创建窗口const win =newBrowserWindow({ width:800,//窗口宽度 height:600,//窗口高度 autoHideMenuBar:true,//自动隐藏菜单档 alwaysOnTop:true,//置顶}) win.loadFile('./pages/index/index.html')} app.on('ready',()=>{createWindow()//兼容核心代码 1 app.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')functioncreateWindow(){//当app准备好后，执行createWindow创建窗口const win =newBrowserWindow({ 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()//兼容核心代码1 app.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')//写入文件functionwriteFile(_, data){ fs.writeFileSync('D:/hello.txt', data)}//读取文件functionreadFile(){const res = fs.readFileSync("D:/hello.txt").toString()return res }functioncreateWindow(){//当app准备好后，执行createWindow创建窗口const win =newBrowserWindow({ 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()//兼容核心代码1 app.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,但能运行起来了。后续找个更好的解决方案。
整理不易点赞关注支持宝码香车

Read more

FPGA实现高效FFT/IFFT变换：IP核优化与Verilog测试验证

1. FFT与FPGA的完美结合 在数字信号处理领域，快速傅里叶变换（FFT）就像是一把瑞士军刀，能够将时域信号快速转换到频域进行分析。而FPGA凭借其并行计算能力和可编程特性，成为实现FFT算法的理想平台。我曾在多个无线通信项目中采用FPGA实现FFT/IFFT处理，实测下来发现相比DSP处理器，FPGA方案在实时性方面能提升3-5倍性能。 FFT IP核是FPGA厂商提供的预封装模块，相当于一个"黑盒子"，开发者只需要配置参数就能直接使用。Xilinx的FFT IP核支持从64点到65536点的变换规模，吞吐量最高可达400MS/s。记得我第一次使用时，仅用半小时就完成了256点FFT的配置，比从零编写Verilog代码节省了至少两周时间。 2. FFT IP核的配置技巧 2.1 关键参数设置 在Vivado中配置FFT IP核时，这几个参数需要特别注意： * 变换长度：根据信号带宽选择，常见256/512/1024点 * 数据精度：16位定点数适合大多数应用，高精度场景可用24位 * 架构选择：流水线架构（Pipelined）适合高速应用，突发架构（Burst
自适应图像变焦与边界框变换用于无人机目标检测

自适应图像变焦与边界框变换用于无人机目标检测

作者： Tao Wang, Chenyu Lin, Chenwei Tang, Jizhe Zhou, Deng Xiong, Jianan Li, Jian Zhao, Jiancheng Lv 亮点 * 自适应空间变换： 对图像进行自适应空间变换可以有效地放大物体细节。 * 框变换： 框变换使得检测器能够在图像变换的空间中进行训练和推理。 * 实验效果： 在多种无人机图像数据集上的实验表明，该方法以较小的代价获得了有效的增益。 * 灵活模块化设计： 灵活的模块化设计使其能够与其他方法和任务场景集成。 https://arxiv.org/pdf/2602.07512 摘要 由于物体尺寸较小，从无人机（UAV）拍摄的图像中检测物体具有挑战性。在这项工作中，我们探索了一种简单高效的自适应变焦框架，用于无人机图像的目标检测。主要动机是，前景物体通常比普通场景图像中的物体更小且更稀疏，这阻碍了有效目标检测器的优化。因此，我们的目标是自适应地放大物体，以便更好地捕捉用于检测任务的物体特征。为了实现这一目标，需要两个核心设计：i)

ABB PC SDK开发指南：机器人编程控制实战手册

本文还有配套的精品资源，点击获取 简介：《ABB PC SDK Guide》是ABB官方提供的开发者技术文档，系统介绍如何使用ABB PC Software Development Kit在Windows环境下通过C++、C#等语言实现对ABB机器人的编程控制。该SDK提供丰富的API接口，支持机器人连接、运动控制、I/O处理、实时数据交换与状态监控等功能，广泛应用于自动化生产线、高精度装配、视觉引导及离线编程等工业场景。本指南包含完整开发环境搭建、示例代码解析与调试方法，助力开发者快速构建高效、智能的机器人控制系统。 1. ABB PC SDK概述与应用场景 1.1 ABB PC SDK核心定位与技术架构 ABB PC SDK（PC Software Development Kit）是ABB机器人官方提供的用于PC端与机器人控制器通信的软件开发工具包，基于.NET平台构建，支持C#等语言进行二次开发。其底层通过OPC
详细的FPGA电源系统设计（附器件选型）

详细的FPGA电源系统设计（附器件选型）

某型FPGA的内部逻辑模块需要1.2V的电源 进行供电，并要求其稳定性在±50mV之内，如下图所示。        本文采用TPS54302电源转换器将12V输入电压转换为1.2V输出电压，其最大输出电流为3A。要使得所产生的电压稳定在1.2V±50mV，需要考虑输出电压纹波、输出电流阶跃变化所引起的输出电压变化、输出电压的偏置及PCB线路的电压压降等因素。        输入电容的选择        输入电容分为两种，一种是大容量电容，一种是滤波电容。当输入电源距离TPS54302有几英尺以上时就需要大容量电容。TPS54302的datasheet推荐使用47 uF的电解电容。选择额定电压为35V的松下EEEFK1V470AP作为大容量电容。TPS54302的datasheet推荐使用10 uF的陶瓷电容作为退耦电容，并且另推荐使用一个0.1 uF的陶瓷电容进行高频滤波。初步选择型号为GCM32ER71E106KA42的10 uF陶瓷电容以及型号为GRM155R71E104KE14的0.1 uF陶瓷电容。         下面对这两个电容的额定电压和额定纹波