Electron把Chromium和HTML Web页面整合到了一起&＃xff0c;最终成为一个GUI桌面应用&＃xff0c;还有其他很强大的功能&＃xff0c;如访问硬件、通信等。
安装配置环境
$npm install -g yarn
$yarn init
$yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/
$yarn add electron --dev --platform&＃61;win64
"devDependencies": {"electron": "^19.0.8"}
配置package.json
{"name": "electron-test","version": "1.0.0","description": "electron test","main": "index.js","license": "MIT","devDependencies": {"electron": "^19.0.8"},"scripts": {"start": "electron index.js"}
}
新建入口程序&＃xff08;主进程&＃xff09;&＃xff1a;index.js
var electron &＃61; require("electron");
var app &＃61; electron.app;
var BrowserWindow &＃61; electron.BrowserWindow;
var win &＃61; null;
app.on("ready", ()&＃61;>{win &＃61; new BrowserWindow({"webPreferences": {nodeIntegration: true}});win.loadFile("index.html");win.on(&＃39;close&＃39;, ()&＃61;>{win&＃61;null;});
});
app.on(&＃39;window-all-closed&＃39;, ()&＃61;>{app.quit();
});
新建渲染程序(渲染进程)&＃xff1a;index.html
<html><head><title>窗口标题title>head><body><div style&＃61;"padding: 60px;font-size:38px;font-weight:bold;text-align:center;">Hello Worlddiv>body>
html>
运行
yarn start
vscode调试配置
修改.vscode/launch.json&＃xff1a;
{"version": "0.2.0","configurations": [{"name": "调试主进程","type": "node","request": "launch","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"},"args": ["."],"outputCapture": "std"}]
}
参考
https://www.electronjs.org/docs/latest
京公网安备 11010802041100号