electron的HelloWorld
1.初始化项目
mkdir my-electron-app && cd my-electron-app //创建目录并进入
npm init -y // 初始化package.json
npm i --save-dev electron // 安装electron
2. 创建项目入口文件main.js,并编写如下代码
const { app, BrowserWindow } = require('electron') // 引入app和BrowserWindow模块
function createWindow () { // 声明创建窗口函数
const win = new BrowserWindow({ // 创建一个窗口,名字为win
width: 800, // 窗口宽度
height: 600, // 窗口高度
webPreferences: { // 配置首选项
nodeIntegration: true
}
})
win.loadFile('index.html') // 加载index.html文件到win窗口
}
app.whenReady().then(createWindow) // 当app准备好的时候调用createWindow方法创建窗口
app.on('window-all-closed', () => { // 窗口关闭监听
if (process.platform !== 'darwin') { // 当所有窗口都关闭时尝试退出整个app
app.quit()
}
})
app.on('activate', () => { // 只有在程序激活的时候(第一次运行或重启)时才能创建一个新的窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
⚠创建完main.js文件后需要注意:
- 初始化的package.json文件默认程序入口时index.js,需要将其改为main.js
- 在scripts中配置项目启动命令,通常情况下配置启动命令为start:
"start": "electron ."
3.创建index.html文件
第二步完成后,已经可以通过npm start
运行程序,但是只是一个空窗口,代码中引入的index.html并不存在
因此我们在项目根目录创建iindex.html文件并编写下面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>
document.write(process.versions.node) // 获取node版本
</script>,
Chrome <script>
document.write(process.versions.chrome) // 获取chrome版本
</script>,
and Electron <script>
document.write(process.versions.electron) // 获取electron版本
</script>.
</p>
</body>
</html>
此时再运行项目就可以看到窗口中出现了index.html中的内容