简单创建一个electron项目

-

electron中文教程：https://www.w3cschool.cn/electronmanual/p9al1qkx.html

项目目录：

 

 

 安装electron

npm install electron@4.2.12 --save-dev

package.json

{
  "name": "electronTest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", // 项目入口  不指定默认为index.js
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "electron ." //启动命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^4.2.12"
  }
}

main.js

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

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

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</title>
</head>
<body>
  <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>

启动： npm run serve

 

-

posted @ 2022-01-04 22:36  古墩古墩  Views(186)  Comments(0)    收藏  举报