03-Electron打造Hello-World应用
上一节Electron环境搭建,这节我们简单打造一个Hello-World应用
一、修改package.json
1.main字段表示应用的启动脚本，我们修改为main.js
2.在“scripts”中创建start启动命令
代码如下：
{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "mian.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^8.2.3"
}
}二、创建main.js
electron模块提供的功能都公共命名空间暴露出来了。
electron.app管理生命周期（了解electron生命周期）
electron.BrowserWindow负责创建窗口
main.js 代码如下：
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
// 设置打开的窗口大小
let mainWindow = new BrowserWindow({width: 400, height: 400})
mainWindow.loadFile('index.html') // 加载页面
// 监听关闭事件，把主窗口设置为null
mainWindow.on('window-all-closed', () => {
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>
<h1>hello wolrd!</h1>
</body>
</html>四、运行项目
npm start
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。