Electron 简单搭建项目

准备工作
  1. 全局安装 node npm
  2. 创建文件夹,并执行 npm init
  3. 安装 electron npm i electron --save-dev
  4. 在 package.json 配置文件中的scripts字段下增加一条start命令:
javascript 复制代码
{
  "scripts": {
    "start": "electron ."
  }
}
  1. 由于配置中的入口文件是 main.js ,需要在根目录下创建 main.js
javascript 复制代码
// main.js
// 这个文件控制主进程,运行在Node.js环境中,控制应用的生命周期,显示原生界面,执行特殊操作并管理渲染器进程。

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

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 预加载 js
    }
  })

  // 加载 index.html
  mainWindow.loadFile('index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
  1. 创建 index.html
html 复制代码
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>
  1. 创建 prelode.js
javascript 复制代码
// preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用。它拥有与Chrome扩展一样的沙盒。
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. 最后执行 npm run start启动应用
相关推荐
今天也想MK代码3 天前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
yqcoder3 天前
electron 中 ipcRenderer 的常用方法有哪些?
前端·javascript·electron
yqcoder3 天前
electron 中 ipcRenderer 作用
前端·javascript·electron
伍嘉源4 天前
关于electron进程管理的一些认识
前端·javascript·electron
yqcoder4 天前
electron 设置最小窗口缩放
前端·javascript·electron
yqcoder6 天前
区分 electron 全屏和最大化
前端·javascript·electron
li.siyuan6 天前
electron + vue 打包完成后,运行提示 electrion-updater 不存在
前端·vue.js·electron
努力挣钱的小鑫7 天前
【客户端开发】electron 中无法使用 js-cookie 的问题
前端·javascript·electron
蓝胖子不是胖子7 天前
尝鲜electron --将已有vue/react项目转换为桌面应用
vue.js·react.js·electron
非晓为骁7 天前
windows 下 electron-builder ERR_ELECTRON_BUILDER_CANNOT_EXECUTE 报错处理
javascript·windows·electron