[TOC] #### 1. 前言 --- electron 官网：<https://www.electronjs.org> electron 是跨平台桌面应用开发工具，它兼容 mac、windows、linux，可以构建出三个平台的应用程序 学习的好处：开发的应用程序，可以上架到应用商店获得收益，也可以提高应聘时的竞争力，提高开发者的综合能力 #### 2. 安装 --- 初始化项目：运行以下命令即可，会生成一个 package.json 文件 ```bash npm init -y ``` 安装 electron 依赖，安装中比较慢或遇到其他问题, [点击查看解决方案](https://www.itqaq.com/index/622.html) ```bash npm install -D electron ``` #### 3. 初始化项目 --- 如下所示，在 package.json 文件中可以看到主进程文件默认为 index.js，我们在项目根目录下创建这个文件 ```json { "main": "index.js" } ``` 并且在 index.js 文件中添加以下代码 ```javascript const { BrowserWindow, app } = require('electron'); // 应用启动后创建窗口 app.whenReady().then(() => { const mainWindow = new BrowserWindow({ width: 300, height: 300, }) }) ``` 修改 package.json 文件，添加运行脚本，如下所示 ```json { "scripts": { "dev": "electron ." } } ``` 在项目根目录，运行脚本命令就可以启动 electron 了，会弹出一个窗口 ``` npm run dev ``` #### 4. 加载网页或文件 --- ```javascript const { BrowserWindow, app } = require('electron'); const path = require('path'); // 应用启动后创建窗口 app.whenReady().then(() => { const mainWindow = new BrowserWindow({ // 窗口大小 width: 300, height: 300, // 窗口置顶 alwaysOnTop: true, // 窗口位置 x: 1500, y: 100 }) // 加载网页 // mainWindow.loadURL('https://www.itqaq.com') // 加载文件 mainWindow.loadFile(path.resolve(__dirname, 'index.html')) }) ``` #### 5. 主进程和渲染进程 --- 在 electron 应用程序中，主进程就是从 package.json 文件中的 main 脚本开始的进程。主进程中运行的 JS 可以调用操作系统的本地功能，因为它可以访问 nodejs 标准库。 主进程主要负责创建和控制浏览器窗口，管理应用程序的生命周期，以及运行应用程序的主要功能。主进程可以创建多个渲染进程，每一个渲染进程都是一个新的浏览器窗口或 web 页面 根目录下的 index.js 就是主进程文件，主进程中打印的结果会输出到终端中 ```javascript console.log('hello electron'); ```  渲染进程负责运行用户界面的 JS。每个 electron 都在其自己的渲染进程中运行 在默认情况下，渲染进程不能使用 nodejs 和 electron api，因为这可能产生安全问题 #### 6. nodemon 刷新应用 --- 在修改主进程文件后，每次都要重新执行 `npm run dev` 才会生效，如果想要修改为自动生效，可以使用 nodemon 安装 nodemon 为运行时依赖 ``` npm install -D nodemon ``` 修改 package.json 文件，在 electron 启动命令前面添加 `nodemon --exec` 即可 ```json { "scripts": { "dev": "nodemon --exec electron ." } } ``` 此时，当修改主进程文件 index.js 时，会自动刷新，但是它默认不监听 html 文件的改动 在项目根目录下创建配置文件 nodemon.json，将下面内容放入该文件就可以监听 html 文件的修改了 ```json { "ignore": [ "dist", "node_modules" ], "colours": true, "verbose": true, "restartable": "rs", "watch": [ "*.*" ], "ext": "html,js" } ``` #### 7. 兼容 mac 系统的操作方式 --- mac 和 windows 不同，mac 的应用程序所有窗口都关闭，应用程序也不会退出 ```javascript const { BrowserWindow, app } = require('electron'); const path = require('path'); // 创建窗口 const createWindow = () => { const mainWindow = new BrowserWindow({ // 窗口大小 width: 300, height: 300, // 窗口置顶 alwaysOnTop: true, // 窗口位置 x: 1500, y: 100 }) // 加载文件 mainWindow.loadFile(path.resolve(__dirname, 'index.html')) } // 监听应用启动 app.whenReady().then(() => { createWindow() }) // 监听所有窗口全部关闭 app.on('window-all-closed', () => { // 当系统不是 mac 时，退出应用程序 console.log(process.platform); if (process.platform != 'darwin') app.quit(); }) // 监听应用激活 app.on('activate', () => { createWindow() }) ```