一个简单的 Electron 程序的开发步骤

最新推荐文章于 2024-07-11 11:25:25 发布

baeiou

最新推荐文章于 2024-07-11 11:25:25 发布

阅读量445

点赞数 5

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/baeiou/article/details/130409618

版权

1.创建项目
在终端中创建一个新的目录，并进入该目录，执行以下命令来创建一个新的 Electron 项目：

mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --save-dev

如果 npm install electron --save-dev 有错误
请先升极node 或 npm
删除node_modules和package-lock.json重来
再不行就
修改package.json添加依赖修改如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "dependencies": {
    "electron": "^12.0.0",
    "electron-packager": "^15.2.0"
  },
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.创建主进程代码
在项目根目录下创建一个名为 main.js 的文件，用于编写 Electron 主进程的代码，如下：

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

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

  win.loadFile('index.html')

  win.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

以上代码创建了一个 Electron 应用程序窗口，并加载了 index.html 文件。在 webPreferences 中设置 nodeIntegration: true 可以启用 Node.js 支持，使得在渲染进程中可以使用 Node.js 的模块。

3.创建渲染进程代码
在项目根目录下创建一个名为 index.html 的文件，用于编写 Electron 渲染进程的代码，如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is an Electron app.</p>
</body>
</html>

以上代码创建了一个简单的 HTML 页面，用于在 Electron 应用程序窗口中显示内容。

4.运行应用程序
在终端中执行以下命令，启动 Electron 应用程序：

npm start

以上命令将会执行 main.js 文件中的代码，启动 Electron 应用程序窗口，并加载 index.html 文件。在窗口中，将会显示一个标题为 "Hello World!" 的页面，用于展示 Electron 应用程序的基本功能。

以上是一个简单的 Electron 程序的开发步骤，通过以上步骤，您可以快速创建一个基本的 Electron 应用程序，并在浏览器中展示一个简单的页面。在此基础上，您可以根据自己的需求，进一步开发和扩展 Electron 应用程序的功能。

baeiou

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
一个简单的 Electron 程序的开发步骤

在 webPreferences 中设置 nodeIntegration: true 可以启用 Node.js 支持，使得在渲染进程中可以使用 Node.js 的模块。以上命令将会执行 main.js 文件中的代码，启动 Electron 应用程序窗口，并加载 index.html 文件。" 的页面，用于展示 Electron 应用程序的基本功能。以上是一个简单的 Electron 程序的开发步骤，通过以上步骤，您可以快速创建一个基本的 Electron 应用程序，并在浏览器中展示一个简单的页面。
复制链接

扫一扫