electron 快速创建一个本地应用

news2024/12/24 21:21:23

参考官方文档流程快速入门 | Electron

建议先全局安装electron，npm install -g electron 开发过程中可以在本地开发安装

使用electron快速创建一个web页面，参考官方demo 实例 electron-quick-start

第一步：

mkdir my-electron-app && cd my-electron-app 创建一个文件夹并且进入文件
npm init 初始化文件
npm install --save-dev electron 安装electron环境
最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

{

"scripts": {
"start": "electron ."
}
}

第二步：

在你本地的文件中创建 main.js 入口文件，引入electron

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

app.whenReady().then(() => {
  // 创建一个web窗口
  const mainWin = new BrowserWindow({
    width: 600,
    height: 400,
  });
  
  // 引入页面要展示的文件
  mainWin.loadFile("index.html");

  // 监听当前窗口关闭要做的事情
  mainWin.on("close", () => {
    console.log("close");
  });
});

// 监听所有窗口关闭要做的事情
app.on("window-all-closed", () => {
  console.log("window-all-closed");
  app.quit(); // 窗口关闭api
});

第三步：

本次创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>桌面应用</div>
</body>
</html>

第四步：

运行 npm start 命令，即可展示如下界面