Electron - 搭建Electron项目

最新推荐文章于 2025-10-31 16:09:07 发布

原创最新推荐文章于 2025-10-31 16:09:07 发布 · 399 阅读

1 ·

CC 4.0 BY-SA版权

ElectronJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript通过Electron框架构建跨平台的桌面应用程序，包括环境配置、项目搭建、代码编写及运行。

Electron是什么

使用HTML、CSS和Javascript 构建跨平台的桌面应用程序。

环境要求

Windows运行环境需要win7及以上，因为Electron是基于Chrome V8 ，它不支持xp
nodejs 和 npm，这两个使用稳定版，越新越好
代码编辑器，推荐使用vscode

搭建Electron项目

创建项目的根目录文件夹
在根目录下运行 npm init 命令
修改package.json文件

//修改的内容主要有两个，main节点值改成main.js(程序入口，不一定是这个名字，默认使用它),scripts节点增加start
{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

安装electron
建议配置npm的淘宝镜像和electron镜像，否则安装速度会很慢，甚至安装不上。

npm config set registry https://registry.npm.taobao.org
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

# 在根目录下运行
npm install --save-dev electron

创建main.js，编写代码运行（npm start 运行）
简单示例：

//main.js
const {app,BrowserWindow} = require('electron');

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

    win.loadFile('index.html');

}
app.whenReady().then(createWindow);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Electron</title>
</head>
<body>
    <h1>Welcome to the Electron's world!!!</h1>
</body>
</html>