Electron桌面应用开发：创建应用

Electron 是一个由 GitHub 开发并开源的框架，允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它结合了 Chromium 引擎和 Node.js，使得开发者可以轻松地将 Web 应用程序转换为原生桌面应用。

Electron 支持 Windows、macOS 和 Linux 三大主流操作系统，开发者只需编写一次代码即可在多个平台上运行，同时可以直接复用现有的前端技术栈和工具链（如 React、Vue、Angular 等），轻松集成各种npm包，它还内置 Chrome DevTools，开发者可以直接调试界面和逻辑，提高开发效率。

不过Electron也存在明显缺陷，Electron 应用通常包含整个 Chromium 引擎和 Node.js 运行时，导致生成的应用程序体积较大，每个 Electron 应用都运行在一个独立的Chromium实例中，因此内存占用较高，所以并不适用于对性能要求极高及对资源占用敏感的应用

准备操作

Electron 基于 Node.js，因此需要先安装Node.js和 npm（Node 包管理器）。安装完成后在cmd中输入检查下是否安装成功：

bash 复制代码

node -v
npm -v

在使用npm时，有时会因为网络问题导致安装依赖包的速度很慢，为了提高效率，可以将npm的默认源切换为国内的镜像源npm切换为国内镜像源，在终端中输入以下命令即可切换为阿里巴巴的国内镜像：

bash 复制代码

npm config set registry https://registry.npmmirror.com

切换完成后再输入命令检查下是否切换成功：

bash 复制代码

npm config get registry

如果想要在多个镜像源中切换，可以在终端里全局安装使用nrm：

bash 复制代码

npm install -g nrm
nrm ls

这样就可以看到可用的镜像源列表了

随后我们再找到萨满问问米，使用命令挑选一个吉利的镜像源：

bash 复制代码

nrm use taobao

准备就绪后我们新建一个文件夹，比如：

bash 复制代码

mkdir ggbond_app

进入文件夹：

bash 复制代码

cd ggbond_app

使用命令初始化项目：

bash 复制代码

npm init -y

命令执行后在项目文件夹中会出现配置文件package.json

内容大体如下：

json 复制代码

{
  "name": "ggbond_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这里将程序入口设定为index.js，我们可以自行更改，比如更改为main.js：

json 复制代码

"main": "main.js"

接下来安装electron到项目中:

bash 复制代码

npm install electron --save-dev

下载后的electron文件保存在node_modules里

接下来安装构建工具electron-builder，用来将我们的代码打包为应用程序:

bash 复制代码

npm install electron-builder --save-dev

同样，下载后的electron-builder文件保存在node_modules里面。

构建基础应用

以上步骤完成后，我们先新建一个main.js文件，这个是主程序代码，在里面添加以下内容：

javascript 复制代码

const {app, BrowserWindow} = require('electron');

let win = null;

function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

在这行代码中我们将主程序页面指定为了index.html:

javascript 复制代码

    win.loadFile('index.html');

接下来新建index.html，我这里将CSS单独放置到一个style.css文件中：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>GGBond勇猛无敌</title>
</head>
<body>
    <h1>Hello GGBond</h1>
</body>
</html>

style.cssCSS文件内容:

css 复制代码

body {
    background-color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 15px red, 0 0 30px blue, 0 0 45px red, 0 0 60px blue;
    animation: breathe 3s infinite alternate;
}

@keyframes breathe {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

完成后的项目结构如下：

再次修改package.json，在scripts中添加启动命令：

json 复制代码

    "start": "electron ."

完整的package.json如下：

json 复制代码

{
  "name": "ggbond_app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^35.0.0",
    "electron-builder": "^25.1.8"
  }
}

完成后我们再项目根目录中输入命令即可启动我们的Electron应用：

bash 复制代码

npm start

这样一个最为基础的Electron桌面应用构建完成，接下来可以Happy的敲码搞定其他功能了。