[electron]学习（一）

一、环境安装

yarn add --dev electron //将 electron 包安装到应用的开发依赖中
yarn start //开启项目

二、主进程介绍

1.main文件是作为入口文件，要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

2.index.html文件是页面渲染文件，也可以是一个远程url。

3.页面中有两个模块：app和BrowserWindow

4.事件的生命周期：
（1）createWindow()：将index.html加载进一个新的BrowserWindow实例。
然后用ready生命周期启动视图
whenReady()：被激发后才能创建浏览器窗口，监听事件。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
//表示视图框的长度高度
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
})

（2）window-all-closed事件：监听关闭视图app事件
a、window or linux系统：关闭所有窗口时退出应用，如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

b、macOS：如果没有窗口打开则打开一个窗口
当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

三、通过preload预加载脚本从渲染器访问Node.js

在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。 它们存在于完全不同的进程！

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

四、打包并分发应用程序

1、将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：

yarn add --dev @electron-forge/cli
npx electron-forge import

2、使用 Forge 的 make 命令来创建可分发的应用程序：

yarn run make