electron快速上手

🕗 发布于 2024-11-22 17:03 electron javascript

1、electron

一款应用广泛的跨平台的桌面应用开发框架
electron本质是结合了chromium与node.js
使用html、css、js等web技术构建桌面应用程序（vue tsx less ts）

2、 electron流程模型

在这里插入图片描述

main 可以__dirname fs
render进程可以 alert() window()

3、创建

1、新建一个文件夹
2、执行

npm init

3、对package.json修改
必须设置author和description 否则不能打包
“main”: “main.js”

{
"name": "electron-test",
"version": "1.0.0",
"description": "Hello World",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "liweina",
"license": "ISC",
"devDependencies": {
"electron": "^33.2.0"
}
}

4、安装electron依赖

npm i electron -D

5、创建一个文件main.js
main.js 创建一个窗口

// app相当于桌面应用 ，地基  BrowserWindow浏览器窗口 所有窗口都需要它new出来
const { app, BrowserWindow } = require('electron')
// 当应用准备好时会调用
app.on('ready', () => {
// 创建一个窗口
let win = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true, //自动隐藏菜单栏
x: 0,
y: 0, //窗口的位置 在左上角
alwaysOnTop: true //窗口一直置顶
})
win.loadURL('https://www.baidu.com')
})

更多BrowserWindow的配置项请点此处
6、运行 npm start

4、加载一个本地页面

main.js修改

//将url加载换成这个就行
win.loadFile('./pages/index.html') //加载一个文件

在index.html编写代码

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
 <title>index</title>
 </head>
 <body>
 <h1>
你好啊！
</h1>
 </body>

此时开发者⼯具会报出⼀个安全警告，需要修改index.html ，配置 CSP(Content-Security-Policy)

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; st
yle-src 'self' 'unsafe-inline'; img-src 'self' data:;">

上述配置的说明
1.
default-src ‘self’

default-src ：配置加载策略，适⽤于所有未在其它指令中明确指定的资源类型。
self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
2.
style-src ‘self’ ‘unsafe-inline’

style-src ：指定样式表（CSS）的加载策略。
self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
unsafe-inline ：允许在HTML⽂档内使⽤内联样式。
3.
img-src ‘self’ data:

img-src ：指定图像资源的加载策略。
self ：表示仅允许从同源加载图像。
data: ：允许使⽤ data: URI 来嵌⼊图像。这种URI模式允许将图像数据直接嵌⼊到HTML或CSS中，⽽不是通过外部链接引⽤。
关于 CSP 的详细说明请参考：
Content-Security-Policy
electron-security

5、打开控制台 ctrl+shift+i

在窗口打开控制台 ctrl+shift+i

6、完善窗口行为

windows和Linux:应用所有的窗口都关闭，那么应用自动退出

// 当所有的窗口都关闭时
app.on('window-all-closed', () => {
// 不是苹果系统  退出
if (process.platform !== 'darwin') app.quit()
})

macos: 应用退出了，但其实在Dock栏里还能看出
mac应用即使在没有打开窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口

// 当应用准备好时会调用
app.on('ready', () => {
createWindow()
// 当窗口被激活的时候， 这是给苹果电脑看的
app.on('activate', () => {
// 当前窗口数量是0，就创建一个窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})

7、配置自动重启

1、安装nodemon

npm i nodemon -D

更改package.json

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

配置nodemon.json规则

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

main.js是运行在主进程
如果main.js打印控制台中文乱码，更改package.json

"start": "chcp 65001 && nodemon --exec electron ."

8、主进程与渲染进程

主进程 main.js

// app相当于桌面应用 ，地基  BrowserWindow浏览器窗口 所有窗口都需要它new出来
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
// 创建一个窗口
let win = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true, //自动隐藏菜单栏
webPreferences: {
preload: path.resolve(__dirname, './preload.js') //写绝对路径)
},
x: 0,
y: 0, //窗口的位置 在左上角
alwaysOnTop: true //窗口一直置顶
})
// win.loadURL('https://www.baidu.com')    //加载一个url
win.loadFile('./pages/index.html') //加载一个文件
}
console.log(process.version)
console.log(process.versions.chrome)
// 当应用准备好时会调用
app.on('ready', () => {
console.log('应用准备好了easy1111')
createWindow()
// 当窗口被激活的时候， 这是给苹果电脑看的
app.on('activate', () => {
// 当前窗口数量是0，就创建一个窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 当所有的窗口都关闭时
app.on('window-all-closed', () => {
// 不是苹果系统  退出
if (process.platform !== 'darwin') app.quit()
})

渲染进程和html并列的render.js

const btn1 = document.querySelector('#btn1')
btn1.onclick = () => {
alert('点我了')
console.log(versions.version)
}
console.log('render')
console.log(window)
console.log(versions.version)

9、preload脚本

预加载脚本运行在渲染进程上能执行一部分的node api 通过它联系主进程和渲染进程主进程和渲染进程的桥梁

// 预加载脚本 运行在渲染进程上 能执行一部分的node api 通过它联系主进程和渲染进程
console.log('preload', process.version)
// 在主进程和渲染进程之间安全地创建一个受限的通信桥梁
const { contextBridge } = require('electron')
// 主世界曝光  暴露给渲染进程
contextBridge.exposeInMainWorld('versions', {
version: process.version,
node: process.versions.node
})

10、进程通信

值得注意的是：
上文中的preload.js,无法使用全部Node的API，比如：不能使用Node中的fs模块，但主进程（main.js）是可以的
这时就需要进程通信了简单就是说，要让preload.js通知main.js去调用fs模块去干活

关于Electron进程通信，我们要知道：

IPC全称是InterProcess Communication 即进程通信
IPC是Electron中最为核心的内容，它是从UI调用原生API的唯一方法
Electron中，主要使用ipcMain和ipcRenderer来定义通道，进行进程通信

10.1渲染进程->主进程单向

概述：在渲染进程中ipcRenderer.send 发送消息，在主进程使用ipcMain.on接受消息
常用于：在web中调用主进程的API，例如下面的这个需求：

需求：点击按钮后，在用户的D盘创建一个hello.txt文件，文件内容；来源与用户输入

index.html

<input id="input" type="text" />
<button id="btn2">向D盘写入hello.txt</button>

render.js

const input = document.querySelector('#input')
const btn2 = document.querySelector('#btn2')
btn2.onclick = () => {
myAPI.saveFile(input.value)
}

preload.js

const input = document.querySelector('#input')
const btn2 = document.querySelector('#btn2')
btn2.onclick = () => {
myAPI.saveFile(input.value)
}

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
// 调用node的fs模块  和文件系统交互，操作文件和目录
const fs = require('fs')
//写入文件
function writeFile(_, data) {
// 同步写入文件 会堵塞进程
fs.writeFileSync('D:/hello.txt', data)
}
function createWindow() {
/********/
//主进程注册对应回调
ipcMain.on('file-save', writeFile)
win.loadFile('./pages/index.html') //加载一个文件
}

10.2 渲染进程<—>主进程双向

概述：渲染进程通过ipcRenderer.invokie发送消息，主进程使用ipcMain.handle接收并处理消息
适合需要主进程处理并返回结果的交互场景
备注：ipcRender.invoke的返回值是Promise实例。
常用于：从渲染器进程调用主线程方法并等待结果

需求：点击按钮从D盘读取hello.txt中的内容，并将结果呈现到页面上

index.html

<button id="btn3">读取D盘的hello.txt</button>

render.js

const btn3 = document.querySelector('#btn3')
btn3.onclick = async () => {
let data = await myAPI.readFile()
alert(data)
}

preload.js

contextBridge.exposeInMainWorld('myAPI', {
version: process.version,
node: process.versions.node,
saveFile: data => {
ipcRenderer.send('file-save', data)
},
readFile() {
return ipcRenderer.invoke('file-read')
}
// async readFile() {
// // invoke有调用的意思  invoke返回值是promise
// let x = await ipcRenderer.invoke('file-read')
// console.log(x)
// }
})

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
// 调用node的fs模块  和文件系统交互，操作文件和目录
const fs = require('fs')
function readFile() {
// 读出来东西是buffer
return fs.readFileSync('D:/hello.txt').toString()
}
function createWindow() {
/*******/
ipcMain.handle('file-read', readFile)
win.loadFile('./pages/index.html') //加载一个文件
}

10.3 主进程->渲染进程

render.js

//当页面的所有内容都已经完全加载并初始化完成后就会执行此函数
window.onload = () => {
myAPI.mainSend(getMainSendCallback)
}
function getMainSendCallback(event,data) {
console.log(11111)
console.log(event, data)
}

preload.js

contextBridge.exposeInMainWorld('myAPI', {
version: process.version,
node: process.versions.node,
mainSend: callback => {
return ipcRenderer.on('main-send', callback)
}
})

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
function createWindow() {
/**********/
win.loadFile('./pages/index.html') //加载一个文件
//必须加载完后才能发送消息
setTimeout(() => {
win.webContents.send('main-send', 11111)
}, 600)
}

11.打包应用

使用electron-builder打包应用
1、安装electron-builder:

npm install electron-builder -D

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

{
 "name": "video-tools",  // 应⽤程序的名称
"version": "1.0.0",  // 应⽤程序的版本
"main": "main.js",  // 应⽤程序的⼊⼝⽂件
"scripts": {
 "start": "electron .",  // 使⽤`electron .` 命令启动应⽤程序
  "build": "electron-builder"  // 使⽤`electron-builder` 打包应⽤程序，⽣成安装包
  },
 "build": {
 "appId": "com.atguigu.video",  // 应⽤程序的唯⼀标识符
    // 打包windows平台安装包的具体配置
 "win": {
 "icon":"./logo.ico", //应⽤图标
 "target": [
        {
 "target": "nsis",  // 指定使⽤NSIS 作为安装程序格式
"arch": ["x64"]  // ⽣成64 位安装包
        }
      ]
    },
 "nsis": {
  "oneClick": false,  // 设置为`false` 使安装程序显示安装向导界⾯，⽽不是⼀键安装
  "perMachine": true,  // 允许每台机器安装⼀次，⽽不是每个⽤户都安装
"allowToChangeInstallationDirectory": true  // 允许⽤户在安装过程中选择安装⽬录
    }
  },
 "devDependencies": {
 "electron": "^30.0.0",  // 开发依赖中的 Electron 版本
"electron-builder": "^24.13.3"  // 开发依赖中`electron-builder` 版本
  },
"author": "tianyu",  // 作者信息
"license": "ISC",  // 许可证信息
"description": "A video processing program based on Electron"  // 应⽤程序的描述
}

12.electron-vite

实际开发可以用这个框架更便捷和好使用

electron-vite官网

原文地址：https://blog.csdn.net/wonderfulgood/article/details/143873634

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MATLAB神经网络（五）——R-CNN视觉检测
下一篇：nvm和nrm的安装与使用

NIO三大组件
现在互联网环境下，分布式系统大相径庭，而分布式系统的根基在于网络编程，而netty恰恰是java领域的网络编程的王者，如果要致力于并发高性能的服务器程序、高性能的客户端程序，必须掌握netty网络编程
阅读更多2024-11-23
动态调试对安全研究有什么帮助？
动态调试允许安全研究人员实时监视程序的执行过程，包括指令的执行情况、内存的读写情况、寄存器的状态等，从而帮助分析人员理清程序的逻辑结构和运行轨迹。这对于漏洞挖掘和理解漏洞利用方式非常重要。：动态调试是
阅读更多2024-11-23
skywalking es查询语句整理
查找特定时间范围内，与特定服务相关的service_relation_server_side指标。获取特定时间段内特定服务的事件或日志记录，并按开始时间排序。对特定时间范围内的服务间关系数据进行聚合分
阅读更多2024-11-23
百度主动推送可以提升抓取，它能提升索引量吗？
站长在建站的时候，需要用到百度站长平台（资源平台）的工具，在站长工具中【普通收录】-【资源提交】-【API提交】这个功能，对网站的抓取进行一个提交。这里估计很多站长就有疑问，如果我主动推送，那么对网站
阅读更多2024-11-23
vue3中如何上传文件到腾讯云的桶（cosbrowser）
vue3中如何上传文件到腾讯云的桶（cosbrowser）
阅读更多2024-11-23
DB-GPT V0.6.2 版本更新：牵手libro社区、GraphRAG图谱构建能力增强等
DB-GPT V0.6.2版本现已上线，快速预览新特性：：灵活定制、轻松集成的 Notebook 产品方案。社区地址：https://github.com/difizen/libro使用教程：1.进入
阅读更多2024-11-23
Elasticsearch向量搜索：从语义搜索到图搜图只有一步之遥
上集说到语义搜索，这集接着玩一下图搜图，这种场景在电商中很常见——拍照搜商品。图搜图实现非常类似语义搜索，代码逻辑结构都很类似…
阅读更多2024-11-23
Spring Boot 的 WebClient 实践教程
WebClient 是一个功能强大且灵活的非阻塞 HTTP 客户端，特别适合在高并发和响应式编程场景下使用，是替代传统 RestTemplate 的优秀选择。在实际项目中，通过合理配置（如超时、连接池
阅读更多2024-11-23
C++ -运算符重载
运算符重载
阅读更多2024-11-23
Idea修改Commit Changes模式、idea使用git缺少部分Commit Changes
Idea修改Commit Changes模式、idea使用git缺少部分Commit Changes
阅读更多2024-11-23

electron快速上手

1、electron

2、 electron流程模型

3、创建

4、加载一个本地页面

5、打开控制台 ctrl+shift+i

6、完善窗口行为

7、配置自动重启

8、主进程与渲染进程

9、preload脚本

10、进程通信

10.1渲染进程->主进程 单向

10.2 渲染进程<—>主进程 双向

10.3 主进程->渲染进程

11.打包应用

12.electron-vite

相关文章

10.1渲染进程->主进程单向

10.2 渲染进程<—>主进程双向