--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- > 主要参照electron官网，加上自己的一些理解，主要用于自己的学习，谢谢大家了，有问题请指点。 ## 什么是electron - 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 - Electron 基于 Chromium 和 Node.js - Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。 ## 一个简单的electron项目 ### 前提首先需要有node环境，[nodeJS](https://nodejs.org/en/download/) ```bash node -v npm -v ``` ### 目录结构 ```plaintext my-electron-app/ ├── package.json package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。 ├── main.js // 这个就是主进程 └── index.html //这个相当于渲染进程 ``` ### 源文件 main.js ```javascript const { app, BrowserWindow } = require("electron"); //创建一个800 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true,//这个表示可以在网页中使用node的包 }, }); win.loadFile("index.html"); } app.whenReady().then(createWindow); app.on("window-all-closed", () => { //您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。由于操作系统的窗口管理行为，此监听器在 macOS 上是禁止操作的。 if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", () => { //您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` package.json ```json { "name": "2020-01-07", "version": "1.0.0", "description": "", "main": "main.js", //需要执行的js 复制的时候记得删除这个注释 "scripts": { "start": "electron ." }, "author": "", "license": "ISC", "devDependencies": { "electron": "^11.1.1" } } ``` Index.html ```html Hello World!

Hello World!

We are using node , Chrome , and Electron .

``` ### 执行代码 ```bash npm i --save-dev electron npm start ``` ### 运行结果 ![image-20210107160632842](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40040981121c4cf48206c55911fda685~tplv-k3u1fbpfcp-zoom-1.image) ## 基础知识 ### Electron包含三个核心 - **Chromium** 用于显示网页内容。 - **Node.js** 用于本地文件系统和操作系统。 - **自定义 APIs** 用于使用经常需要的 OS 原生函数。（for working with often-needed OS native functions.）它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器 ### 主进程和渲染进程 - 主进程可以通过创建 **BrowserWindow** 实例来`创建` 网页，每一个 `BrowserWindow` 实例在其渲染过程中运行网页，当一个 `BrowserWindow` 实例被销毁时，对应的渲染过程也会被终止。 - 主进程 **管理** 所有网页及其对应的渲染进程。 ---- - 渲染进程只能**管理**相应的网页，一个渲染进程的崩溃不会影响其他渲染进程。 - 渲染进程通过 IPC 与主进程**通信**在网在页上执行 GUI 操作。出于安全和可能的资源泄漏考虑，直接从渲染器进程中调用与本地 GUI 有关的 API 受到限制。 > 进程之间的通信可以通过 Inter-Process Communication(IPC) 模块进行：[`ipcMain`](https://www.electronjs.org/docs/api/ipc-main) 和 [`ipcRenderer`](https://www.electronjs.org/docs/api/ipc-renderer) ## 使用ipc通信的实例修改index.html 和main.js index.html ```html Hello World! ``` main.js ```javascript const { app, BrowserWindow, ipcMain } = require("electron"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.webContents.openDevTools(); win.loadFile("index.html"); } app.whenReady().then(createWindow); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); // 两种回复方式 ipcMain.on("asynchronous-message", (event, arg) => { console.log(`主进程监听者1：`, arg); event.reply("asynchronous-reply", "主进程:这是我回复的"); }); ipcMain.on("synchronous-message", (event, arg) => { console.log(`主进程监听者2：`,arg); event.returnValue = "回复发送者1"; }); ``` 渲染进程打印 ![image-20210107170834983](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef4c5844a4a346ef984b3b1e9c361807~tplv-k3u1fbpfcp-zoom-1.image) 主进程打印 ![image-20210107170859748](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76f06ceb9c1940e8aa8f912fb7caa16d~tplv-k3u1fbpfcp-zoom-1.image) > 这就是一个整体的内容，剩下的就是各种功能模块以及打包部署的内容了，也是重中之重了 > 如果觉得我的文章还可以，点个赞或者关注一下下，还有精彩的故事等着你哦，还可以云撸猫