Electron主进程和渲染进程

一、主进程和渲染进程

1、定义

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

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

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

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

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

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

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

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

二、自定义原生菜单 

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

// BrowserWindow是用来新建窗口的, Menu操作自定义菜单
const { app, BrowserWindow, Menu } = require('electron')
// 步骤:1、自定义菜单模板,2、编译模版 3、设置菜单
// 自定义菜单模版
const template = [
  {
    label: '自定义菜单',
    // 子菜单
    submenu: [
      { 
        label: '新建窗口',
        //  给菜单定义点击事件,是一个函数 
        click() {
          new BrowserWindow({
            width: 200,
            height: 200
          })
        }
      }
    ]
  },
  {
    label: '自定义菜单帮助',
    submenu: [
      {
        label: 'reload'
      }
    ]
  }
]

// 由于mac第一个菜单会被遮挡,所以用这种方式
template.unshift({
  label: app.getName()
});

// 编译模版,得到menu对象
const menu = Menu.buildFromTemplate(template)
// 设置菜单
Menu.setApplicationMenu(menu)

  

你可能感兴趣的:(Electron,前端,vue.js,javascript)