03-Electron打造Hello-World应用

上一节Electron环境搭建,这节我们简单打造一个Hello-World应用

一、修改package.json

{ "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>