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

Ne0inhk

— 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

Creative-Commons许可长上下文视频数据集-4个高清MP4视频文件-适用于计算机视觉模型训练-视频内容理解-算法研发-开放数据集-可用于科研与产业应用

Creative-Commons许可长上下文视频数据集-4个高清MP4视频文件-适用于计算机视觉模型训练-视频内容理解-算法研发-开放数据集-可用于科研与产业应用

Creative Commons许可长上下文视频数据集 引言与背景 在当前数字化时代，视频数据作为一种包含丰富信息的多媒体形式，已成为计算机视觉、人工智能和多媒体处理领域的核心研究对象。随着深度学习技术的快速发展，高质量、多样化的视频数据集对于训练高效、鲁棒的算法模型至关重要。本数据集提供了4个基于Creative Commons许可的长上下文视频文件，为科研人员、开发者和产业用户提供了一个开放、可信赖的视频资源。 本数据集包含4个完整的MP4格式视频文件，所有文件均采用Creative Commons许可协议，确保用户可以在合规的前提下自由使用、修改和分发这些资源。数据集的内容构成简洁明了，包含完整的视频原始文件，无需额外的元数据或标注信息即可直接使用。这些视频文件具有不同的文件大小和内容特征，为多样化的研究和应用场景提供了基础支持。 对于科研领域而言，该数据集可用于视频分类、动作识别、场景理解等计算机视觉任务的算法开发和性能评估；对于产业应用来说，这些视频可用于训练产品推荐系统、内容审核模型和视频分析工具。此外，Creative Commons许可的开放性使得这些资源能够

By Ne0inhk
Java前缀和算法题目练习

Java前缀和算法题目练习

前缀和 * 前缀和 * 二维前缀和 * 寻找数组的中心下标 * 除自身以外数组的乘积 * 和为k的子数组 * 和可被K整除的子数组 * 连续数组 * 矩阵区域和 前缀和 题目解析：在一个数组中查询起对应区间的和，会查询多次 算法思想：暴力解法：每次查询都进行一次遍历，时间复杂度O(n*m) 前缀和解法：新定义一个数组，每一个下标存放的值是要查询数组的前下标对应值的和，这样我们在访问起某一个区间的时候，直接利用这个数组就非常快速 importjava.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息publicclassMain{publicstaticvoidmain(String[] args){Scanner in =newScanner(System.in);int n = in.nextInt();int m = in.nextInt();int[

By Ne0inhk
数据结构七大排序算法图解——选择排序动图演示

数据结构七大排序算法图解——选择排序动图演示

系列文章目录 四、选择排序 紧接上一篇交换排序 前言： 1、直接选择排序 思想： 例题： 代码部分： 性能分析 2、树形选择排序 思想： 例题一： 例题二： 性能分析 3、堆排序 定义： 方法： 如何“筛选”？ 例题： 如何“建初始堆”? 例题： 代码部分 性能分析 4、总结 直接选择排序 树形排序 堆排序 前言： 选择排序的主要思想是每一趟从待排序列中选取一个关键字值最小的记录，也即第 1 趟从 n 个记录中选取关键字值最小的记录，在第 2 趟中，从剩下的 n-1 个记录中选取关键字值最小的记录，直到整个序列中的记录都选完位置。这样，由选取记录的顺序便可得到按关键字值有序的序列。

By Ne0inhk
链表的学习与应用--双向循环链表_增加操作

链表的学习与应用--双向循环链表_增加操作

相信大家都在学习双向链表的过程中痛不欲生,但没关系相信大家看了这篇文章之后会对着抽象的数据结构有一个新的理解    这段时间以来笔者也是成功入职了一家方案公司,也算是实现了最初的那个梦想吧!|    话不多说现在开始双向循环链表插入知识的介绍 本人郑重承诺:         所有文章均不设置任何观看门槛均免费  📜虚拟滚动与长列表优化 🎮游戏开发与多媒体播放列表 🖥️操作系统中的进程调度  ✍️文本编辑器的“撤销”与“重做”  🌐浏览器历史记录 📒双向链表的实际应用 📂list.h 文件 🍋老规矩上源码 #ifndef __LIST_H_ #define __LIST_H_ #include <stdio.h> #include <windows.h> #include <stdbool.h> typedef struct Flight_List { /* 航班号码数据 */ int Flight_Number[10]

By Ne0inhk