什么是electron？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

应用场景

一次开发，可同时部署到macOS端和windows端的产品。
节约开发成本、维护成本
入门门槛低

主要架构

快速入门示例

安装环境和代码编辑工具

Node：基于Chrome V8引擎的js运行环境
npm：包管理器，随Node同步自动安装
cnpm：npm国内镜像版
vscode编辑器：代码编辑器

必备npm包

electron：electron核心包
electron-reloader：热更新；修改主进程代码后会自动重新启动应用，修改渲染进程后，会自动更新渲染窗口样式
Inno Setup 编译器：打包为可执行安装文件工具
其他打包为安装工具：electron-builder、electron-forge（官方推荐）

创建应用

创建应用目录，初始化项目，会生成文件package.json，所有包都会记录在这个文件里

mkdir my-electron-app && cd my-electron-appnpm init

安装electron包

npm install --save-dev electron

修改package.json文件“scripts”部分，添加启动electron脚本命令

{  "name": "my-electron-app",  "productName": "my-electron-app",  "version": "1.0.0",  "description": "My Electron application description",  "main": "src/index.js",  "scripts": {    "start": "electron ."  },  "devDependencies": {    "electron": "^23.1.1"  }}

新建启动脚本src/index.js，内容如下

const { app, BrowserWindow, ipcMain, dialog } = require("electron");const path = require("path");/** * 开启热重载 */const openHotModule = () => {  try {    require("electron-reloader")(module);  } catch (_) {}};const createBrowserWindow = () => {  const win = new BrowserWindow({    width: 600,    height: 600,    webPreferences: {      preload: path.join(__dirname, "./preload.js"), // 主进程与渲染进程通信配置      nodeIntegration: false, // 不允许node注入      contextIsolation: true, // 上下文隔离    },  });  const loadFilePath = path.join(__dirname, "./render/index.html");  win.loadFile(loadFilePath);  ipcMain.handle("sys:openFile", () => {    return dialog.showOpenDialog({ properties: ["openFile"] });  });  openHotModule();};app.whenReady().then(() => {  createBrowserWindow();});

新建渲染层文件src/render/index.html，内容如下

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">    <title>你好!</title>  </head>  <body>    <h1>你好!</h1>    <button type="button" id="openFileBtn">打开文件，获取打开文件路径</button>    <p id="filePath"></p>    <script src="./index.js"></script>  </body></html>

新建渲染层脚本文件src/render/index.js，本示例是打开文件并选中，获取该文件路径并显示到页面上，内容如下

document.querySelector('#openFileBtn').addEventListener('click', async function() {  const result = window.electronAPI.openFile();  result.then(res => {    const filePathEle = document.querySelector('#filePath');    filePathEle.innerHTML = res.filePaths[0];  })}, false);

electron入门