Electron环境搭建

沿着路走到底

已于 2022-01-29 11:12:24 修改

阅读量331

点赞数

分类专栏： Electron 桌面应用文章标签： electron javascript 前端

于 2022-01-28 10:38:20 首次发布

本文链接：https://blog.csdn.net/m0_38066007/article/details/122727917

版权

Electron 桌面应用专栏收录该内容

9 篇文章 1 订阅

订阅专栏

官网：Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

初始化项目目录

安装 electron

npm i electron -D

main.js

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

// 当 app 启动之后，执行窗口创建等操作
app.whenReady().then(() => {
  // 创建主进程
  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()
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document - Electron</title>
</head>
<body>
  <h2>我的桌面应用</h2>
</body>
</html>

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^16.0.8"
  }
}

启动项目