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 克隆项目
- 克隆这仓库
git clone https://github.com/electron/electron-quick-start
- 进入仓库
cd electron-quick-start
- 安装依赖库
npm install
- 运行应用
npm start
通过 electron-forge 创建项目
electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行和打包 electron 项目。
- 全局安装 electron-forge
npm install -g electron-forge
- 创建项目
electron-forge init my-app
- 进入项目文件
cd my-app
- 运行项目
npm start
手动创建项目
- 新建一个文件夹
- 新建一个 index.html 和 index.js
- npm init 生成一个 package.json, 注意的是 package.json 里面配置的 main 必须是入口 js （主进程）
- 执行 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：一个框架中的文本加载完成后触发该事件
网友评论