Electron

使用谷歌浏览器距离，整个浏览器是一个主进程，单个选项是一个个渲染进程

主进程 - Main Process

• 可以使用和系统对接的Electron API, 比如创建菜单，上传文件等等
• 创建渲染进程 - Renderer Process
• 具有 require 模块和使用所有 Node.js API 的能力
• 只有一个，作为整个程序的入口

渲染进程 - Renderer Process

• 可以有多个，每个对应一个窗口
• 支持Node.js 和 DOM API
• 每个都是一个单独的进程
• 可以使用一部分Electron提供的API
• BrowserWindow就是一个渲染进程

nodemon

nodemon作用，文件内容发生变化时自动更新. cd 到指定electron 项目文件夹，使用npm install nodemon --save-dev安装。

修改 main.js 中的 scripts -> start 修改为

  "scripts": {
    "start": "nodemon --watch main.js --exec 'electron .'"
  }

含义是观察 main.js 文件的内容，如果发生变化，运行 electron . 命令

直接使用node的api

直接在渲染进程使用node的语法时，会提示找不到方法，是因为从Electron19.0开始，不允许直接在渲染进程使用node语法。比如这样const fs = require('fs'); commanJS的语法在渲染进程是识别不了的，如果想强制使用，需要使用两个属性关闭上下文的隔离

const createWindow = () => {
  const win = new BrowserWindow({
    width: 600,
    height: 600,
    webPreferences:{
        nodeIntegration: true, //隔离选项关闭 !!!
        contextIsolation:false //关闭主线程渲染线程上下文隔离 !!!
    }
  })
  win.loadFile('index.html')
}

主进程和渲染进程之间的通信

1. 主进程和渲染进程之间通过ipcRenderer和ipcMain进行通信

1. 主进程传渲染进程
2. 渲染进程传主进程

2. 渲染进程之间的通信

安全策略

不允许加载外部图片和script

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