任务： 使用electron 编写 hello world 入门程序
electron是什么？
- Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。
学习electron前提条件
- 需掌握 html + css + javascript
- 了解/会使用基础node脚本（npm的使用）
- 电脑安装有node
建议您安装最新可用的 LTS 或 Current 版本
安装electron
mkdir learn_electron && cd learn_electron
npm init -y
npm install electron
// 安装全局的electron
npm install electron -g
electron应用最基本结构
learn_electron/
├── package.json
├── main.js
└── index.html
- 根据上面的结构创建一个基本的应用程序
编写Hello World 程序
修改
package.json
{
"name": "learn_electron",
"version": "1.0.0",
"description": "",
"main": "main.js", // 修改这里
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
编辑
main.js
// 从 electron 包导入了 app 和 BrowserWindow 模块
const { app, BrowserWindow } = require('electron');
// 声明要打开的主窗口
let mainWindow = null;
app.on('ready', () => {
// 创建一个宽高为 800 * 800 的窗口
mainWindow = new BrowserWindow({
width: 800,
height: 800
});
// 窗口加载网页（index.html）
mainWindow.loadFile('index.html');
// 监听窗口关闭事件
mainWindow.on('close', () => {
// 设置主窗口为null
mainWindow = null;
})
})
编写
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>hello world</h2>
</body>
</html>
运行程序
electron .
image.png
欢迎 点赞/评论/关注
END
