From 0322596b91aed3666612441d999008e9551d622e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=97=AD?= <12092666+dream-of-love@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 05:11:29 +0000 Subject: [PATCH 01/21] =?UTF-8?q?electron=E5=B0=8F=E7=99=BD=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E2=80=94js=E6=96=87=E4=BB=B6=E7=90=86=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陈嘉旭 <12092666+dream-of-love@user.noreply.gitee.com> --- ...07\344\273\266\347\220\206\350\247\243.md" | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 "RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" diff --git "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" new file mode 100644 index 0000000..119ccf4 --- /dev/null +++ "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" @@ -0,0 +1,71 @@ + +```markdown +# Electron学习笔记 + +## 1.6 +--基于框架学习 + +### 主进程index.js + +#### 定义了一个静态方法getWindow,用于获取或创建一个 Electron 的浏览器窗口。具体功能如下: +1. 检查this.browserWindow是否存在。 +2. 如果不存在,则创建一个新的BrowserWindow实例,并调用onCreate方法进行初始化,最后返回该实例。 +3. 如果已存在,则直接返回现有的browserWindow。 + +#### 配置 Electron 应用的主窗口,包括窗口大小、初始状态、菜单栏设置以及 WebPreferences 的详细配置,确保应用在启动时能够按照预期的行为进行渲染和交互。 + +#### 创建和初始化一个Electron应用窗口的静态方法onCreate。主要功能如下: +1. 监听窗口准备就绪事件(44-46):当窗口准备好显示时,调用context.show()显示窗口。 +2. 处理新窗口打开请求(47-50):拦截新窗口打开请求,使用默认浏览器打开链接,并拒绝创建新窗口。 +3. 加载开发或生产环境资源(51-56): + - 如果是开发环境且设置了环境变量ELECTRON_RENDERER_URL,则打开开发者工具并加载指定URL。 + - 否则,加载本地HTML文件。 + +#### Electron应用的主进程(main process)部分,主要负责在应用启动时执行一系列初始化操作,并处理窗口管理和应用关闭事件。具体功能如下: +1. 应用准备就绪时: + - 设置应用程序模型ID为com.electron。 + - 监听browser-window-created事件,在创建浏览器窗口时调用utils.optimizer.watchWindowShortcuts(window)方法来监控窗口快捷键。 + - 监听pingIPC消息,并在收到消息时打印pong。 + - 调用createWindow()函数创建主窗口。 + - 监听activate事件,当应用被激活且没有打开的窗口时,重新创建主窗口。 +2. 所有窗口关闭时(73-77): + - 如果操作系统不是macOS(darwin),则退出应用。(苹果系统特点) + +### 预处理进程 +用于在渲染进程(renderer process)中安全地暴露API给网页内容。具体功能如下: +1. 严格模式: + - 使用"use strict"确保代码运行在严格模式下,避免一些常见的编程错误。 +2. 引入依赖: + - 引入electron模块和@electron-toolkit/preload模块。 + - 定义一个空对象api,用于自定义API。 +3. 上下文隔离检查: + - 检查process.contextIsolated是否为true,以确定是否启用了上下文隔离(context isolation)。 +4. 上下文隔离启用时: + - 使用electron.contextBridge.exposeInMainWorld方法将preload.electronAPI和自定义的api暴露给主世界(main world),即网页内容可以访问这些API。 + - 如果暴露过程中发生错误,捕获并打印错误信息。 +5. 上下文隔离未启用时: + - 直接将preload.electronAPI和api挂载到全局window对象上,使网页内容可以直接访问这些API。 + +#### API解释与作用: +- API是一种接口,允许不同软件组件之间进行通信。 +- 在Electron应用中,API通过预加载脚本安全地暴露给渲染进程,以便前端代码可以调用这些API与主进程或其他部分进行交互。 +- api对象可以包含自定义的方法和属性,根据需求进行扩展。 + +### 渲染进程 +配置了内容安全策略,引入了必要的JavaScript模块和CSS样式文件。页面主体中有一个
元素,用于作为前端框架的挂载点或放置主要内容。 + +## 综合运行过程 +1. 启动应用: + - 主进程首先启动,等待Electron应用准备就绪。 +2. 创建窗口: + - 主进程调用createWindow()函数,通过IndexWindow.getWindow()创建一个新的浏览器窗口。 + - 窗口配置中指定了预加载脚本../preload/index.js,并在窗口创建后加载index.html文件。 +3. 加载渲染进程: + - 渲染进程加载index.html,设置字符编码、页面标题、内容安全策略,并引入必要的JavaScript模块和CSS样式文件。 + - 渲染进程中的前端代码可以通过预加载脚本暴露的API与主进程进行通信。 +4. 交互与响应: + - 用户与应用交互时,前端代码可以通过暴露的API调用主进程的功能,例如发送IPC消息、获取数据等。 + - 主进程处理这些请求并返回结果,前端根据结果更新UI。 +``` + +这个Markdown文档严格遵循了您提供的原始文档内容,没有添加任何额外的理解或解释,并保持了原有的结构和链接。如果有任何需要进一步调整的地方,请告知! \ No newline at end of file -- Gitee From dc8e49dbfa7790ef66a4b1de5e15fd87194b0588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=97=AD?= <12092666+dream-of-love@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 06:31:07 +0000 Subject: [PATCH 02/21] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20Ru?= =?UTF-8?q?oYi-Geek-Electron/electron=E5=B0=8F=E7=99=BD=E5=AD=A6=E4=B9=A0?= =?UTF-8?q?=E2=80=94js=E6=96=87=E4=BB=B6=E7=90=86=E8=A7=A3.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...07\344\273\266\347\220\206\350\247\243.md" | 71 ------------------- 1 file changed, 71 deletions(-) delete mode 100644 "RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" diff --git "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" deleted file mode 100644 index 119ccf4..0000000 --- "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" +++ /dev/null @@ -1,71 +0,0 @@ - -```markdown -# Electron学习笔记 - -## 1.6 ---基于框架学习 - -### 主进程index.js - -#### 定义了一个静态方法getWindow,用于获取或创建一个 Electron 的浏览器窗口。具体功能如下: -1. 检查this.browserWindow是否存在。 -2. 如果不存在,则创建一个新的BrowserWindow实例,并调用onCreate方法进行初始化,最后返回该实例。 -3. 如果已存在,则直接返回现有的browserWindow。 - -#### 配置 Electron 应用的主窗口,包括窗口大小、初始状态、菜单栏设置以及 WebPreferences 的详细配置,确保应用在启动时能够按照预期的行为进行渲染和交互。 - -#### 创建和初始化一个Electron应用窗口的静态方法onCreate。主要功能如下: -1. 监听窗口准备就绪事件(44-46):当窗口准备好显示时,调用context.show()显示窗口。 -2. 处理新窗口打开请求(47-50):拦截新窗口打开请求,使用默认浏览器打开链接,并拒绝创建新窗口。 -3. 加载开发或生产环境资源(51-56): - - 如果是开发环境且设置了环境变量ELECTRON_RENDERER_URL,则打开开发者工具并加载指定URL。 - - 否则,加载本地HTML文件。 - -#### Electron应用的主进程(main process)部分,主要负责在应用启动时执行一系列初始化操作,并处理窗口管理和应用关闭事件。具体功能如下: -1. 应用准备就绪时: - - 设置应用程序模型ID为com.electron。 - - 监听browser-window-created事件,在创建浏览器窗口时调用utils.optimizer.watchWindowShortcuts(window)方法来监控窗口快捷键。 - - 监听pingIPC消息,并在收到消息时打印pong。 - - 调用createWindow()函数创建主窗口。 - - 监听activate事件,当应用被激活且没有打开的窗口时,重新创建主窗口。 -2. 所有窗口关闭时(73-77): - - 如果操作系统不是macOS(darwin),则退出应用。(苹果系统特点) - -### 预处理进程 -用于在渲染进程(renderer process)中安全地暴露API给网页内容。具体功能如下: -1. 严格模式: - - 使用"use strict"确保代码运行在严格模式下,避免一些常见的编程错误。 -2. 引入依赖: - - 引入electron模块和@electron-toolkit/preload模块。 - - 定义一个空对象api,用于自定义API。 -3. 上下文隔离检查: - - 检查process.contextIsolated是否为true,以确定是否启用了上下文隔离(context isolation)。 -4. 上下文隔离启用时: - - 使用electron.contextBridge.exposeInMainWorld方法将preload.electronAPI和自定义的api暴露给主世界(main world),即网页内容可以访问这些API。 - - 如果暴露过程中发生错误,捕获并打印错误信息。 -5. 上下文隔离未启用时: - - 直接将preload.electronAPI和api挂载到全局window对象上,使网页内容可以直接访问这些API。 - -#### API解释与作用: -- API是一种接口,允许不同软件组件之间进行通信。 -- 在Electron应用中,API通过预加载脚本安全地暴露给渲染进程,以便前端代码可以调用这些API与主进程或其他部分进行交互。 -- api对象可以包含自定义的方法和属性,根据需求进行扩展。 - -### 渲染进程 -配置了内容安全策略,引入了必要的JavaScript模块和CSS样式文件。页面主体中有一个元素,用于作为前端框架的挂载点或放置主要内容。 - -## 综合运行过程 -1. 启动应用: - - 主进程首先启动,等待Electron应用准备就绪。 -2. 创建窗口: - - 主进程调用createWindow()函数,通过IndexWindow.getWindow()创建一个新的浏览器窗口。 - - 窗口配置中指定了预加载脚本../preload/index.js,并在窗口创建后加载index.html文件。 -3. 加载渲染进程: - - 渲染进程加载index.html,设置字符编码、页面标题、内容安全策略,并引入必要的JavaScript模块和CSS样式文件。 - - 渲染进程中的前端代码可以通过预加载脚本暴露的API与主进程进行通信。 -4. 交互与响应: - - 用户与应用交互时,前端代码可以通过暴露的API调用主进程的功能,例如发送IPC消息、获取数据等。 - - 主进程处理这些请求并返回结果,前端根据结果更新UI。 -``` - -这个Markdown文档严格遵循了您提供的原始文档内容,没有添加任何额外的理解或解释,并保持了原有的结构和链接。如果有任何需要进一步调整的地方,请告知! \ No newline at end of file -- Gitee From cb3402d00441a143732b2f0953b48b7736b91842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=97=AD?= <12092666+dream-of-love@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 06:31:35 +0000 Subject: [PATCH 03/21] =?UTF-8?q?electron=E5=B0=8F=E7=99=BD=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E2=80=94js=E6=96=87=E4=BB=B6=E7=90=86=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陈嘉旭 <12092666+dream-of-love@user.noreply.gitee.com> --- ...07\344\273\266\347\220\206\350\247\243.md" | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 "RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" diff --git "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" new file mode 100644 index 0000000..5cbbbb7 --- /dev/null +++ "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" @@ -0,0 +1,73 @@ +```markdown +# Electron学习笔记 + +--基于框架学习 + +### 主进程index.js +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/electindex.jpg) +#### 定义了一个静态方法getWindow,用于获取或创建一个 Electron 的浏览器窗口。具体功能如下: +1. 检查this.browserWindow是否存在。 +2. 如果不存在,则创建一个新的BrowserWindow实例,并调用onCreate方法进行初始化,最后返回该实例。 +3. 如果已存在,则直接返回现有的browserWindow。 +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/elecindex流程图.png) + +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/electron主窗口.jpg) +#### 配置 Electron 应用的主窗口,包括窗口大小、初始状态、菜单栏设置以及 WebPreferences 的详细配置,确保应用在启动时能够按照预期的行为进行渲染和交互。 + +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/main.jpg) +#### 创建和初始化一个Electron应用窗口的静态方法onCreate。主要功能如下: +1. 监听窗口准备就绪事件(44-46):当窗口准备好显示时,调用context.show()显示窗口。 +2. 处理新窗口打开请求(47-50):拦截新窗口打开请求,使用默认浏览器打开链接,并拒绝创建新窗口。 +3. 加载开发或生产环境资源(51-56): + - 如果是开发环境且设置了环境变量ELECTRON_RENDERER_URL,则打开开发者工具并加载指定URL。 + - 否则,加载本地HTML文件。 +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/oncreate.jpg) +#### Electron应用的主进程(main process)部分,主要负责在应用启动时执行一系列初始化操作,并处理窗口管理和应用关闭事件。具体功能如下: +1. 应用准备就绪时: + - 设置应用程序模型ID为com.electron。 + - 监听browser-window-created事件,在创建浏览器窗口时调用utils.optimizer.watchWindowShortcuts(window)方法来监控窗口快捷键。 + - 监听pingIPC消息,并在收到消息时打印pong。 + - 调用createWindow()函数创建主窗口。 + - 监听activate事件,当应用被激活且没有打开的窗口时,重新创建主窗口。 +2. 所有窗口关闭时(73-77): + - 如果操作系统不是macOS(darwin),则退出应用。(苹果系统特点) + +### 预处理进程 +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/preload.jpg) +用于在渲染进程(renderer process)中安全地暴露API给网页内容。具体功能如下: +1. 严格模式: + - 使用"use strict"确保代码运行在严格模式下,避免一些常见的编程错误。 +2. 引入依赖: + - 引入electron模块和@electron-toolkit/preload模块。 + - 定义一个空对象api,用于自定义API。 +3. 上下文隔离检查: + - 检查process.contextIsolated是否为true,以确定是否启用了上下文隔离(context isolation)。 +4. 上下文隔离启用时: + - 使用electron.contextBridge.exposeInMainWorld方法将preload.electronAPI和自定义的api暴露给主世界(main world),即网页内容可以访问这些API。 + - 如果暴露过程中发生错误,捕获并打印错误信息。 +5. 上下文隔离未启用时: + - 直接将preload.electronAPI和api挂载到全局window对象上,使网页内容可以直接访问这些API。 +#### API解释与作用: +- API是一种接口,允许不同软件组件之间进行通信。 +- 在Electron应用中,API通过预加载脚本安全地暴露给渲染进程,以便前端代码可以调用这些API与主进程或其他部分进行交互。 +- api对象可以包含自定义的方法和属性,根据需求进行扩展。 + +### 渲染进程 +!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/渲染.jpg) +配置了内容安全策略,引入了必要的JavaScript模块和CSS样式文件。页面主体中有一个元素,用于作为前端框架的挂载点或放置主要内容。 + +## 综合运行过程 +1. 启动应用: + - 主进程首先启动,等待Electron应用准备就绪。 +2. 创建窗口: + - 主进程调用createWindow()函数,通过IndexWindow.getWindow()创建一个新的浏览器窗口。 + - 窗口配置中指定了预加载脚本../preload/index.js,并在窗口创建后加载index.html文件。 +3. 加载渲染进程: + - 渲染进程加载index.html,设置字符编码、页面标题、内容安全策略,并引入必要的JavaScript模块和CSS样式文件。 + - 渲染进程中的前端代码可以通过预加载脚本暴露的API与主进程进行通信。 +4. 交互与响应: + - 用户与应用交互时,前端代码可以通过暴露的API调用主进程的功能,例如发送IPC消息、获取数据等。 + - 主进程处理这些请求并返回结果,前端根据结果更新UI。 +``` + +这个Markdown文档严格遵循了您提供的原始文档内容,没有添加任何额外的理解或解释,并保持了原有的结构和链接。如果有任何需要进一步调整的地方,请告知! -- Gitee From 1432e78d17015507d0b666c77a59d3b2c6d0f4f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=97=AD?= <12092666+dream-of-love@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 10:08:04 +0000 Subject: [PATCH 04/21] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20Ru?= =?UTF-8?q?oYi-Geek-Electron/electron=E5=B0=8F=E7=99=BD=E5=AD=A6=E4=B9=A0?= =?UTF-8?q?=E2=80=94js=E6=96=87=E4=BB=B6=E7=90=86=E8=A7=A3.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...07\344\273\266\347\220\206\350\247\243.md" | 73 ------------------- 1 file changed, 73 deletions(-) delete mode 100644 "RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" diff --git "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" deleted file mode 100644 index 5cbbbb7..0000000 --- "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" +++ /dev/null @@ -1,73 +0,0 @@ -```markdown -# Electron学习笔记 - ---基于框架学习 - -### 主进程index.js -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/electindex.jpg) -#### 定义了一个静态方法getWindow,用于获取或创建一个 Electron 的浏览器窗口。具体功能如下: -1. 检查this.browserWindow是否存在。 -2. 如果不存在,则创建一个新的BrowserWindow实例,并调用onCreate方法进行初始化,最后返回该实例。 -3. 如果已存在,则直接返回现有的browserWindow。 -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/elecindex流程图.png) - -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/electron主窗口.jpg) -#### 配置 Electron 应用的主窗口,包括窗口大小、初始状态、菜单栏设置以及 WebPreferences 的详细配置,确保应用在启动时能够按照预期的行为进行渲染和交互。 - -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/main.jpg) -#### 创建和初始化一个Electron应用窗口的静态方法onCreate。主要功能如下: -1. 监听窗口准备就绪事件(44-46):当窗口准备好显示时,调用context.show()显示窗口。 -2. 处理新窗口打开请求(47-50):拦截新窗口打开请求,使用默认浏览器打开链接,并拒绝创建新窗口。 -3. 加载开发或生产环境资源(51-56): - - 如果是开发环境且设置了环境变量ELECTRON_RENDERER_URL,则打开开发者工具并加载指定URL。 - - 否则,加载本地HTML文件。 -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/oncreate.jpg) -#### Electron应用的主进程(main process)部分,主要负责在应用启动时执行一系列初始化操作,并处理窗口管理和应用关闭事件。具体功能如下: -1. 应用准备就绪时: - - 设置应用程序模型ID为com.electron。 - - 监听browser-window-created事件,在创建浏览器窗口时调用utils.optimizer.watchWindowShortcuts(window)方法来监控窗口快捷键。 - - 监听pingIPC消息,并在收到消息时打印pong。 - - 调用createWindow()函数创建主窗口。 - - 监听activate事件,当应用被激活且没有打开的窗口时,重新创建主窗口。 -2. 所有窗口关闭时(73-77): - - 如果操作系统不是macOS(darwin),则退出应用。(苹果系统特点) - -### 预处理进程 -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/preload.jpg) -用于在渲染进程(renderer process)中安全地暴露API给网页内容。具体功能如下: -1. 严格模式: - - 使用"use strict"确保代码运行在严格模式下,避免一些常见的编程错误。 -2. 引入依赖: - - 引入electron模块和@electron-toolkit/preload模块。 - - 定义一个空对象api,用于自定义API。 -3. 上下文隔离检查: - - 检查process.contextIsolated是否为true,以确定是否启用了上下文隔离(context isolation)。 -4. 上下文隔离启用时: - - 使用electron.contextBridge.exposeInMainWorld方法将preload.electronAPI和自定义的api暴露给主世界(main world),即网页内容可以访问这些API。 - - 如果暴露过程中发生错误,捕获并打印错误信息。 -5. 上下文隔离未启用时: - - 直接将preload.electronAPI和api挂载到全局window对象上,使网页内容可以直接访问这些API。 -#### API解释与作用: -- API是一种接口,允许不同软件组件之间进行通信。 -- 在Electron应用中,API通过预加载脚本安全地暴露给渲染进程,以便前端代码可以调用这些API与主进程或其他部分进行交互。 -- api对象可以包含自定义的方法和属性,根据需求进行扩展。 - -### 渲染进程 -!(https://gitee.com/dream-of-love/publish-required-materials/blob/master/渲染.jpg) -配置了内容安全策略,引入了必要的JavaScript模块和CSS样式文件。页面主体中有一个元素,用于作为前端框架的挂载点或放置主要内容。 - -## 综合运行过程 -1. 启动应用: - - 主进程首先启动,等待Electron应用准备就绪。 -2. 创建窗口: - - 主进程调用createWindow()函数,通过IndexWindow.getWindow()创建一个新的浏览器窗口。 - - 窗口配置中指定了预加载脚本../preload/index.js,并在窗口创建后加载index.html文件。 -3. 加载渲染进程: - - 渲染进程加载index.html,设置字符编码、页面标题、内容安全策略,并引入必要的JavaScript模块和CSS样式文件。 - - 渲染进程中的前端代码可以通过预加载脚本暴露的API与主进程进行通信。 -4. 交互与响应: - - 用户与应用交互时,前端代码可以通过暴露的API调用主进程的功能,例如发送IPC消息、获取数据等。 - - 主进程处理这些请求并返回结果,前端根据结果更新UI。 -``` - -这个Markdown文档严格遵循了您提供的原始文档内容,没有添加任何额外的理解或解释,并保持了原有的结构和链接。如果有任何需要进一步调整的地方,请告知! -- Gitee From 6bace79e02063e02e658819729fe59743123e6b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=97=AD?= <12092666+dream-of-love@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 10:08:25 +0000 Subject: [PATCH 05/21] =?UTF-8?q?electron=E5=B0=8F=E7=99=BD=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E2=80=94js=E6=96=87=E4=BB=B6=E7=90=86=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 陈嘉旭 <12092666+dream-of-love@user.noreply.gitee.com> --- ...07\344\273\266\347\220\206\350\247\243.md" | 181 ++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 "RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" diff --git "a/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" new file mode 100644 index 0000000..3be7485 --- /dev/null +++ "b/RuoYi-Geek-Electron/electron\345\260\217\347\231\275\345\255\246\344\271\240\342\200\224js\346\226\207\344\273\266\347\220\206\350\247\243.md" @@ -0,0 +1,181 @@ +# Electron学习笔记 + +--基于框架学习 + +# 主进程index.js + +### getwindow() + +```bash + static getWindow() { + if (!this.browserWindow) { + this.browserWindow = new electron.BrowserWindow(this.browserWindowOptions); + this.onCreate(this.browserWindow); + return this.browserWindow; + } else { + return this.browserWindow; + } + } +} +``` + +定义了一个静态方法 getWindow,用于获取或创建一个 Electron 的浏览器窗口。具体功能如下: + +1. 检查 this.browserWindow 是否存在。 +2. 如果不存在,则创建一个新的 BrowserWindow 实例,并调用 onCreate 方法进行初始化,最后返回该实例。 +3. 如果已存在,则直接返回现有的 browserWindow。 + +
+### 配置应用主窗口
+
+```bash
+class IndexWindow extends BaseWindow {
+ static browserWindowOptions = {
+ width: 900,
+ height: 670,
+ show: false,
+ autoHideMenuBar: true,
+ ...process.platform === "linux" ? { icon } : {},
+ webPreferences: {
+ preload: path.join(__dirname, "../preload/index.js"),
+ sandbox: false,
+ nodeIntegration: true,
+ // 开启自带node环境
+ webviewTag: true,
+ // 开启webview
+ contextIsolation: true,
+ // 开启context上下文
+ webSecurity: false,
+ // 开启网络安全
+ allowRunningInsecureContent: true
+ // 允许运行不安全内容
+ }
+ };
+```
+
+配置 Electron 应用的主窗口,包括窗口大小、初始状态、菜单栏设置以及 WebPreferences 的详细配置,确保应用在启动时能够按照预期的行为进行渲染和交互。
+
+### onCreate
+
+```bash
+static onCreate(context) {
+ context.on("ready-to-show", () => {
+ context.show();
+ });
+ context.webContents.setWindowOpenHandler((details) => {
+ electron.shell.openExternal(details.url);
+ return { action: "deny" };
+ });
+ if (utils.is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+ context.webContents.openDevTools();
+ context.loadURL(process.env["ELECTRON_RENDERER_URL"]);
+ } else {
+ context.loadFile(path.join(__dirname, "../renderer/index.html"));
+ }
+ }
+}
+
+```
+
+创建和初始化一个Electron应用窗口的静态方法onCreate。主要功能如下:
+
+1. 监听窗口准备就绪事件(44-46):当窗口准备好显示时,调用context.show()显示窗口。
+2. 处理新窗口打开请求(47-50):拦截新窗口打开请求,使用默认浏览器打开链接,并拒绝创建新窗口。
+3. 加载开发或生产环境资源(51-56):
+ o 如果是开发环境且设置了环境变量ELECTRON_RENDERER_URL,则打开开发者工具并加载指定URL。
+ o 否则,加载本地HTML文件。
+
+# 应用主进程
+
+```ts
+electron.app.whenReady().then(() => {
+ utils.electronApp.setAppUserModelId("com.electron");
+ electron.app.on("browser-window-created", (_, window) => {
+ utils.optimizer.watchWindowShortcuts(window);
+ });
+ electron.ipcMain.on("ping", () => console.log("pong"));
+ createWindow();
+ electron.app.on("activate", function() {
+ if (electron.BrowserWindow.getAllWindows().length === 0) createWindow();
+ });
+});
+electron.app.on("window-all-closed", () => {
+ if (process.platform !== "darwin") {
+ electron.app.quit();
+ }
+});
+Electron应用的主进程(main process)部分,主要负责在应用启动时执行一系列初始化操作,并处理窗口管理和应用关闭事件。具体功能如下:
+1. 应用准备就绪时:
+o 设置应用程序模型ID为com.electron。
+o 监听browser-window-created事件,在创建浏览器窗口时调用utils.optimizer.watchWindowShortcuts(window)方法来监控窗口快捷键。
+o 监听ping IPC消息,并在收到消息时打印pong。
+o 调用createWindow()函数创建主窗口。
+o 监听activate事件,当应用被激活且没有打开的窗口时,重新创建主窗口。
+2. 所有窗口关闭时:
+o 如果操作系统不是macOS(darwin),则退出应用。(苹果系统特点)
+
+```
+
+# 预处理进程:
+
+```ts
+"use strict";
+const electron = require("electron");
+const preload = require("@electron-toolkit/preload");
+const api = {};
+if (process.contextIsolated) {
+ try {
+ electron.contextBridge.exposeInMainWorld("electron", preload.electronAPI);
+ electron.contextBridge.exposeInMainWorld("api", api);
+ } catch (error) {
+ console.error(error);
+ }
+} else {
+ window.electron = preload.electronAPI;
+ window.api = api;
+}
+```
+
+用于在渲染进程(renderer process)中安全地暴露API给网页内容。具体功能如下:
+
+1. 严格模式:
+ o 使用"use strict"确保代码运行在严格模式下,避免一些常见的编程错误。
+2. 引入依赖:
+ o 引入electron模块和@electron-toolkit/preload模块。
+ o 定义一个空对象api,用于自定义API。
+3. 上下文隔离检查:
+ o 检查process.contextIsolated是否为true,以确定是否启用了上下文隔离(context isolation)。
+4. 上下文隔离启用时:
+ o 使用electron.contextBridge.exposeInMainWorld方法将preload.electronAPI和自定义的api暴露给主世界(main world),即网页内容可以访问这些API。
+ o 如果暴露过程中发生错误,捕获并打印错误信息。
+5. 上下文隔离未启用时:
+ o 直接将preload.electronAPI和api挂载到全局window对象上,使网页内容可以直接访问这些API。
+
+#API解释与作用:
+• API 是一种接口,允许不同软件组件之间进行通信。
+• 在Electron应用中,API通过预加载脚本安全地暴露给渲染进程,以便前端代码可以调用这些API与主进程或其他部分进行交互。
+• api对象可以包含自定义的方法和属性,根据需求进行扩展。
+
+#渲染进程
+
+```ts
+
+
+
+