Electron主进程和渲染进程

时间:2024-10-09 07:45:35

一、主进程和渲染进程

1、定义

Electron运行package.json的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且仅有一个主进程

由于Electron也使用了Chromium来展示web页面,所以Chromium的多进程架构也被使用到。每个Electron的web页面运行在它的叫渲染进程的进程中。

在普通的浏览器中,web页面无法访问操作系统的原生资源。然而Electron的用户在的API支持下,可以在页面中和操作系统进行一些底层交互。

2、主进程和渲染进程的日志的打印位置

(1)主进程的日志在执行npm run electron的控制台查看日志。

(2)渲染进程的日志使用chcontrol+shift+i查看日志。

         或者在中加一行,在electron运行时自动打开调试工具可以查看日志。

  1. // 默认打开调试工具
  2. mainWindow.webContents.openDevTools()

二、自定义原生菜单 

步骤:1、自定义菜单模板,2、编译模版 3、设置菜单

  1. // BrowserWindow是用来新建窗口的, Menu操作自定义菜单
  2. const { app, BrowserWindow, Menu } = require('electron')
  3. // 步骤:1、自定义菜单模板,2、编译模版 3、设置菜单
  4. // 自定义菜单模版
  5. const template = [
  6. {
  7. label: '自定义菜单',
  8. // 子菜单
  9. submenu: [
  10. {
  11. label: '新建窗口',
  12. //  给菜单定义点击事件,是一个函数
  13. click() {
  14. new BrowserWindow({
  15. width: 200,
  16. height: 200
  17. })
  18. }
  19. }
  20. ]
  21. },
  22. {
  23. label: '自定义菜单帮助',
  24. submenu: [
  25. {
  26. label: 'reload'
  27. }
  28. ]
  29. }
  30. ]
  31. // 由于mac第一个菜单会被遮挡,所以用这种方式
  32. ({
  33. label: ()
  34. });
  35. // 编译模版,得到menu对象
  36. const menu = (template)
  37. // 设置菜单
  38. (menu)