Electron 是什么
Electron 是一个可以创建桌面应用程序的框架。
安装
全局安装：npm install electron。
创建应用
创建空文件夹作为 demo 的根目录，然后创建 index.html 和 main.js。index.html 里只需要写个 Hello World，主要内容要在 main.js 里。
在 main.js 里要先引入 electron，然后再引入 electron 里的 app 和 BrowseWindow。app 相当于应用，BrowseWindow 用来创建窗口。mainWindow 用来存放窗口。
let electron = require('electron')
let app = electron.app
let BrowserWindow = electron.BrowserWindow
let mainWindow = null
引入完之后需要监听 ready，触发 ready 后就可以创建窗口实例了，new BrowseWindow。需要传一个对象，里面指定了窗口的宽高，创建完窗口实例后需要调用 loadFile 函数指定加载哪个文件。最后监听 close，关闭窗口时将 mainWindow 变为 null。
app.on('ready', () => {
mainWindow = new BrowserWindow({
width:600,
height:300
})
mainWindow.loadFile('index.html')
mainWindow.on('close', () => {
mainWindow = null
})
})
写完之后需要终端运行 npm init --yes 来生成一个 package.json，不然无法运行，--yes 的作用是全部选是。生成 package.json 后运行 electron . (有点)命令就可以出现一个窗口，窗口的内容就是 index.html 里的内容。
效果图
总代码
JS 部分
// 引入 electron
let electron = require('electron')
// 引入app
let app = electron.app
// 引入窗口
let BrowserWindow = electron.BrowserWindow
// 要打开的主窗口
let mainWindow = null
// 监听 ready
app.on('ready', () => {
console.log('ready')
// 一个高 600 宽 300 的窗口
mainWindow = new BrowserWindow({
width:600,
height:300
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 监听 close
mainWindow.on('close', () => {
console.log('close');
mainWindow = null
})
})
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>
<p>Hello World</p>
<button onclick="alert(111)">111</button>
</body>
</html>
Hello World 就 OK 了。
标签：index,窗口,app,electron,mainWindow,Electron,let,World,Hello From： https://www.cnblogs.com/0529qhy/p/16821275.html