仅需HTML+CSS+JS，Electron如何让你一人搞定Windows、macOS、Linux三大桌面应用？

身为长时间留意开发工具生态情况的观察者，我们察觉到这一时刻在转变桌面应用的开发形式。这样一种把Web技术引进到原生应用范畴里面去践行作为，在降低开发门槛的同时，也引发关乎性能与体验方面情况的讨论。现如今我们会深度剖析这个框架实际上的应用现实状况。

技术架构解析

最初，Electron的核心架构通过Chromium渲染引擎以及Node.js运行环境的融合得以构建，该框架借助主进程管理应用程序的生命周期，随后创建渲染进程用以显示Web页面，这种设计使得开发者能够运用熟悉的HTML、CSS和JavaScript技术栈构建跨平台桌面应用。

node -v
npm -v

于实际运用里，每一个Electron应用皆涵盖一个package.json入口文件，还有一个主进程脚本以及可选的预加载脚本。主进程承担着创建浏览器窗口以及把控应用事件的职责,而渲染进程负责的是界面展示。两个进程之间借助进程间通信(IPC)机制来开展数据交换。

环境配置步骤

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

将配置Electron开发环境去安装Node.js运行环境，并且建议使用Node.js 16.0或者更高版本，还能够透过官方安装包或者版本管理工具nvm来完成安装，在安装完成之后，于命令行执行node -v以及npm -v命令去验证版本信息。

npm install --save-dev electron
//或者
npm install electron -D

用npm init命令去创建package.json配置文件，这般操作能够实现项目初始化，紧接着执行npm install electron --save-dev来安装核心依赖。可以进行配置nodemon监听文件变化，以此达成自动重启，目的在于提升开发效率。在package.json的scripts字段里添加"start": "electron ."启动命令，如此一来就能运行基础环境。

npm i nodemon -D

项目结构搭建

需配置三个核心文件的完整的Electron项目包括，作为主进程入口的main.js，处理进程通信的preload.js，以及渲染进程的HTML界面文件。main.js里要初始化BrowserWindow对象，配置窗口尺寸、预加载脚本等参数。

{
    "ignore": [ //忽略文件
        "node_modules",
        "dist"
    ],
    "restartable": "r", //按r更新
    "watch": ["*.*"],//监听所有文件
    "ext": "js,html,css,json"//包含
 
}

在项目安全性这一方面，要于HTML文件里面配置内容安全策略也就是CSP，去限制资源加载的来源，以此来防止XSS攻击。与此同时，鉴于针对各个不同操作系统的特性，得在main.js当中处理程序退出的行为，进而确保在macOS以及Windows平台之上都能够正常地关闭应用。

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "type": "pages",
  "devDependencies": {
    "electron": "^37.2.1",
    "electron-builder": "^26.0.12",
    "nodemon": "^3.1.10"
  },
  "scripts": {
    "start": "nodemon --exec electron .",
    "build": "electron-builder ",
    "pack": "electron-builder --dir"
  },
  "build": {
    "appId": "",
    "productName": "测试electron-dome",
    "directories": {
      "output": "dist"
    },
    "files": [
      "**/*",
      "!node_modules/**/{README.md,CHANGELOG.md,test,*.ts}"
    ],
    "win": {
      "icon": "./assets/images/logo2.png",
      "asar": true,
      "requestedExecutionLevel": "",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }
  },
  "nsis": {
    "oneClick": false,
    "perMachine": true,
    "allowToChangeInstallationDirectory": true
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  }
}

界面加载方式

console.log('Hello from Electron!')//在main.js中添加打印

电子提供用于界面加载的两种方式，其中 ，loadURL 能够直接去加载远程的网页地址，这种方式 适合于把现有的网络应用去打包成为桌面程序 ；loadFile 是加载本地的 HTML 文件，此方式 更适合于开发全新的桌面应用 。对于开发者而言 ，可以依据项目的需求进行灵活选择 。

npm start

在对本地文件予以加载之际，能够如同传统Web开发那般去撰写HTML、CSS以及JavaScript代码。而窗口大小、标题栏样式、菜单栏等相关配置，均可借助BrowserWindow的参数来开展自定义操作，以此达成近乎原生应用的视觉效果以及交互体验。

进程通信机制

关于进程间通信（IPC），其属于 Electron 开发里的关键技术要点。预加载脚本借助 contextBridge 朝着渲染进程展现安全的 API 方法，以此达成主进程跟渲染进程的数据交互。此方式不但确保了 Node.js 模块的可用性，还规避了直接暴露全部 API 所引发的安全隐患。

"Content-Security-Policy"
    content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'  data: https://*; child-src 'none';" />
    

在实际的开发情形之下，由渲染进程依靠window对象去调用在预加载脚本里所定义的接口，而预加载脚本接着借助ipcRenderer和主进程展开通信，主进程经由ipcMain对事件予以监听并且执行像文件读写、网络请求这类属于系统级功能的Node.js操作。

实战案例演示

我们借助一个文件操作的实例来展现完整的开发程序流程，于渲染进程的界面当中放置文本框，也放置按钮，当用户输入了内容以后再点击那个按钮，便能够在指定的目录里创建文本文件了，此类示例包含了从界面谋划直到系统运作的一整个连贯环节及过程句号。

console.log("Hello from Electron!");
const { app, BrowserWindow } = require("electron");
function createWindow() {
    app.on("window-all-closed", () => {
        if (process.platform !== "darwin") {
            app.quit();
        }
    });
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
}
app.on("ready", () => {
  createWindow();
  const win = new BrowserWindow({
    // https://www.electronjs.org/zh/docs/latest/api/browser-window   一些相关api
    width: 800,
    height: 600,
    autoHideMenuBar: true, //隐藏菜单栏
    x: 100, //窗口位置
    y: 100, //窗口位置
    resizable: false, //禁止改变窗口大小
    webPreferences: {
      nodeIntegration: true,
    },
  });
  win.loadFile("./pages/index.html");
});
// 监听所有窗口关闭事件
app.on("window-all-closed", () => {
  // 如果所处平台不是mac(darwin)，则退出应⽤。
  if (process.platform !== "darwin") app.quit();
});
// 监听mac下点击 dock 图标时触发
app.on("activate", () => {
  //如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

对实现过程而言，包含这样几个方面，在预加载脚本里去定义createFile方法，借助contextBridge将其暴露给渲染进程，在主进程当中，通过ipcMain监听文件创建请求，运用fs模块来执行写入操作，渲染进程调用预加载脚本所给予的接口进而完成整个流程，就这种模式来讲，确保了安全性和功能性之间的平衡。

参与项目开发的各位开发者，于实际运用之时，借助Electronic所进行的项目构建过程当中，可有碰到因进程通信方面设计不合理而致使的性能方面的问题呢？倘若有的话，欢迎在评论区域分享您所拥有的解决方案以及实践过程里积累的经验，要是感觉这篇文章具备一定帮助那么请给予点赞予以支持哦。

console.log("Hello from Electron!");
const { app, BrowserWindow } = require("electron");
app.on("ready", () => {
  const win = new BrowserWindow({
    // https://www.electronjs.org/zh/docs/latest/api/browser-window   一些相关api
    width: 800,
    height: 600,
    autoHideMenuBar: true, //隐藏菜单栏
    x: 100, //窗口位置
    y: 100, //窗口位置
    resizable: false, //禁止改变窗口大小
    webPreferences: {
      nodeIntegration: true,
    },
  });
  //加载一个页面
  win.loadURL('https://www.baidu.com/')
});