Electron 从入门到实践01

最新推荐文章于 2024-12-09 22:04:27 发布

haeasringnar

最新推荐文章于 2024-12-09 22:04:27 发布

阅读量293

点赞数

分类专栏： Electron 文章标签： electron

Electron 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用Electron创建桌面应用的方法。Electron可让纯JavaScript调用原生APIs，用web页面作GUI。开始前需安装node环境，国内建议用cnpm安装。详细说明了初始化项目、编写入口文件main.js和index.html，最后介绍了运行步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
在开始之前，请确定已经安装好了 node 环境。
国内使用 npm 命令安装 Electron 时，建议使用 cnpm ，否则可能会出现无法下载或下载缓慢的问题。

1、初始化项目

新建一个目录用于存放第一个demo

mkdir demo01

j进入目录后，初始化

npm init   # 这里要根据提示输入相关内容

创建好必要文件

touch index.html
touch main.js

完整的目录结构
在这里插入图片描述
packge.json 代码展示

{
  "name": "demo01",
  "author": "admin",
  "version": "1.0.0",
  "description": "frist electron demo",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.4"
  }
}

2、编写入口文件main.js

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  win = new BrowserWindow({
    // 设置窗口大小
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开调试工具
  win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

3、编写index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>