安装
1. 新建文件夹,初始化npm,安装electron(淘宝源) mkdir electrontest
cd electrontest
npm init
npm install electron@^17.1.0 --registry=https://registry.npmjs.org/
2.package.json 中添加启动electron指令
{
"scripts": {
"start": "electron ."
}
}
3.新建html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
- 新建项目入口main.js文件,引入app,browserWindow 模块
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
createWindow()
此时启动项目报错,
只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。
添加代码:
app.whenReady().then(() => {
createWindow()
})
5 再次启动项目
npm run start
启动成功,弹出窗口