前置工作
1、安装cnpm
npm install -g cnpm --registry=registry.npmmirror.com
尽量不要使用cnpm（不会自动更新package-lock），如果镜像不起作用，可以直接这么用
npm install electron@38 --save-dev --registry=http://registry.npmmirror.com
2、安装electron forge
3、安装electron tabs
4、安装热加载 electron-reloader
集成electron tab
一般交互都会存在多个页面，这里采用tab的方式进行交互
可以通过tab.webview访问webview
webview
webview就是：在一个独立的 frame 和进程里显示外部 web 内容。
www.electronjs.org/zh/docs/lat…
Electron的 webview 标签基于 Chromiumwebview，后者正在经历巨大的架构变化。 这将影响 webview 的稳定性，包括呈现、导航和事件路由。
默认情况下，Electron >= 5禁用 webview 标签。 在构造 BrowserWindow 时，需要通过设置 webviewTag webPreferences选项来启用标签。
使用 webview 标签将'guest'内容 (例如网页) 嵌入到您的 Electron 应用中。 Guest 内容包含在 webview 容器内。 应用中的嵌入页面可以控制外来内容的布局和重绘。
与 iframe不同， webview 独立于您的应用程序运行。 它拥有和你的页面不一样的权限并且所嵌入的内容和你应用之间的交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。
在内部 webview 与 过程外 iframes（OOPIF）一起实施。 webview 标签本质上是一个自定义元素，使用 shadow DOM 将 iframe 元素包裹在里面。
因此，webview的行为与跨域iframe非常相似，例如：
- 在
webview中单击时，页面焦点将从嵌入器移动到webview。 - 您无法将键盘、鼠标和滚动事件侦听器添加到
webview。 - 嵌入器框架和
webview之间的所有反应都是异步的。
快捷键
加速器是可以在你的Electron中用来表示键盘快捷键的字符串。 这些字符串可以包含由 + 连接的多个修饰键和一个单一的键码。
在 Linux 和 Windows 上，Command 修饰符没有任何效果。 一般而言，您应该使用 CommandOrControl 修饰符来表示 macOS上的 ⌘ Cmd 和 Linux Windows 上的 Ctrl。
使用 Alt按键替代 Option按键。 修饰符 ⌥ Opt 只存在于 macOS，但 Alt 会在所有平台都映射到正确的修饰符。
本地快捷键
本地快捷键仅当应用获得焦点时才会触发。 这些快捷键映射到应用的主应用菜单中特定的菜单项。
全局快捷键
Global keyboard shortcuts work even when your app is out of focus. To configure a global keyboard shortcut, you can use the globalShortcut.register function to specify shortcuts.
Shortcuts within a window，In the renderer process
If you want to handle keyboard shortcuts within a BaseWindow, you can listen for the keyup and keydown DOM Events inside the renderer process using the addEventListener API.
拦截主进程中的事件
The before-input-event event is emitted before dispatching keydown and keyup events in the renderer process. 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。
进程（通信）
electron中存在3种主要的进程：主进程、渲染进程、webview
主进程
每个Electron应用都有一个主进程，充当应用的入口点。主进程在nodejs环境中运行，这意味着他能够使用require模块并使用所有的nodejs api。
主进程的主要目的是使用BrowerWindow模块创建和管理应用窗口，BrowerWIndow类的每个实例都会创建一个应用窗口，该窗口在单独的渲染器进程中加载网页。你可以使用窗口的webContents对象从主进程与此web内容进行交互。主进程还通过Electron的app模块控制应用的生命周期。此模块提供了大量事件和方法，你可以使用它们来添加自定义应用行为。
渲染器进程
每个Electron应用都会为每个打开的BrowerWindow（以及每个web嵌入）生成一个单独的渲染器进程。这也就意味着渲染器进程无法直接访问require或者其他nodejs api。
你可能想知道渲染器进程如何与nodejs和electron的原生桌面功能交互，如果这些功能只能通过主进程访问，那么答案就是使用预加载脚本
尽管预加载脚本与其附加的渲染器进程共享window全局变量，但由于contextIsolation默认值，你无法直接将预加载脚本中的任何变量附加到window
上下文隔离意味着预加载脚本与渲染器的主要世界隔离，以避免将任何特权api泄漏到web内容代码中，相反，你可以使用contextBridge模块来安全地完成此操作。
（完）
==》欢迎关注《==
