Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

特点：

• 上手简单：只要会前端的知识就可以做桌面应用
• 跨平台：Mac，Linux，Windows
• 自动更新

创建项目

全局安装 electron

npm install -g electron  
// 推荐使用 cnpm 进行安装 
cnpm install -g electron 

创建项目的三种方式

通过 git 克隆项目

1. 克隆这仓库

git clone https://github.com/electron/electron-quick-start

2. 进入仓库

cd electron-quick-start

3. 安装依赖库

npm install

4. 运行应用

npm start

通过 electron-forge 创建项目

electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行和打包 electron 项目。

1. 全局安装 electron-forge

npm install -g electron-forge

2. 创建项目

electron-forge init my-app

3. 进入项目文件

cd my-app

4. 运行项目

npm start

手动创建项目

1. 新建一个文件夹
2. 新建一个 index.html 和 index.js
3. npm init 生成一个 package.json, 注意的是 package.json 里面配置的 main 必须是入口 js （主进程）
4. 执行 electron . 运行项目

// main.js 主进程文件
const electron = require('electron')

const app = electron.app

const BrowserWindow = electron.BrowserWindow

const path = require("path")

// 变量 保存对应窗口的引用
let mainWindow;

app.on('ready', function() {
  // 创建 BrowserWindow 的实例，赋值给 mainWindow 打开窗口

  // 软件默认打开的宽度和高度 { width: 800, height: 600 }
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600,
    webPreferences: {
      // 重要：该属性让渲染进程也拥有使用 node 的能力
      nodeIntegration: true
    }
  })

  // 开启渲染进程中的调试模式
  mainWindow.webContents.openDevTools()

  // 把 index.html 加载到窗口里面
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL(path.join('file:', __dirname, 'index.html'))

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}) 

Electron 主进程和渲染进程

主进程里面可以直接拿到的东西，在渲染进程中需从 remote 中获取

// 例如：需要获取到 net
// 主进程
const { new } = require("electron")
// 渲染进程
const { new } = require("electron").remote

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

由于 Electron 使用了 chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的多进程架构也被使用到了，每个 Electron 中的 web 页面运行在他自己的渲染进程中。

主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都是在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，响应的渲染进程也会被终止。

进程：进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
线程：在一个程序里的一个执行路程就叫做线程（thread）。更准确的定义是：线程是 “一个进程内部的控制序列”。

Electron 渲染进程中通过 Node.js 读取本地文件

在普通的浏览器中，web 页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

Node.js 在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作原生 GUI。虽然如此，因此集成了 Node.js，渲染进程也有了操作系统底层 API 的能力，Node.js 中常用的 path、fs、crypto 等模块在 Electron 可以直接使用，方便我们处理链接、路径、文件、MD5等，同时 npm 还有成千上万的模块供我们选择。

const fs = require('fs')
const content = document.getElementById('content')
const button = document.getElementById('button')
button.addEventListener('click', (e) => {
  fs.readFile('package.json', 'utf8', (e) => {
    content.textContent = data;
  })
})

常用事件

app 常用事件

• ready：当 Electron 完成初始化时被触发
• window-all-closed：所有窗口被关闭时触发
• before-quit：在应用程序开始关闭窗口之前触发
• will-quit：当所有窗口都已经关闭并且应用程序将退出时触发
• quit：在应用程序退出时触发

webContent 常用事件

• did-finish-load：导航完成时触发，即选项卡的旋转器将停止旋转，并派发 onload 事件后。
• dom-ready：一个框架中的文本加载完成后触发该事件