Electron 快速入门_window.electron

作者：喵喵爱编程 | 2024-07-26 21:34:08

踩

window.electron

文章目录

1 Electron 是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

2 创建应用程序

初始化 package.json

npm init
1

修改 package.json

{
  "main": "main.js", // 入口文件为 main.js
  "description": "A minimal Electron application", // description 为 "" 会导致后续打包报错
  "scripts": {
    "dev": "electron .", // 启动 electron
  }
}
1
2
3
4
5
6
7

安装 electron 包

npm install --save-dev electron
1

若安装失败，设置一下 electron 下载镜像

npm config set electron_mirror "https://npmmirror.com/mirrors/electron/"
1

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    // macOS 应用在没有打开任何窗口的情况下也继续运行
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  // 除 macOS 外，应用关闭所有窗口则完全退出一个应用程序
  if (process.platform !== 'darwin') app.quit()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium
    <span id="chrome-version"></span>, 和 Electron
    <span id="electron-version"></span>.
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 通过预加载脚本从渲染器访问 Node.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
1
2
3
4
5
6
7
8
9
10
11

启动 electron

npm dev
1

在这里插入图片描述

3 打包应用程序

安装 Electron Forge

npm install --save-dev @electron-forge/cli
1

使用 Electron Forge 的"import"命令设置 Forge 的脚手架

npx electron-forge import
1

使用 Forge 的 make 命令来创建可分发的应用程序

npm run make
1

以上三个命令执行完后，会创建一个 out 文件夹，文件夹下包含安装包
在这里插入图片描述

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】