1. package.json
{ "name": "electrontest", "version": "0.1.0", "main": "main.js" }
2.main.js
var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; var ipc = electron.ipc; var mainWindow = null; app.on('window-all-closed', function () { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function () { // 创建浏览器窗口。 mainWindow = new BrowserWindow({ width: 800, height: 600 }); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭,这个事件会被发出 mainWindow.on('closed', function () { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 但这次不是。 mainWindow = null; }); mainWindow.webContents.openDevTools() });
3.index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
var alertOnlineStatus = function () {
//window.alert(navigator.onLine ? 'online' : 'offline');
ipc.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
};
window.addEventListener('online', alertOnlineStatus);
window.addEventListener('offline', alertOnlineStatus);
alertOnlineStatus();
</script>
<h1>Hello World!</h1>
We are using io.js111
<script>document.write(process.version)</script>
and Electron
<script>document.write(process.versions['electron'])</script>.
</body>
</html>
4.launch.json
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Electron Main", "cwd": "${workspaceRoot}", "runtimeExecutable": "/home/rox/.nvm/versions/node/v10.15.1/bin/electron", "windows": { "runtimeExecutable": "/home/rox/.nvm/versions/node/v10.15.1/bin/electron.cmd" }, "args" : ["."], "outputCapture": "std" //"program": "${workspaceFolder}/main.js" } ] }
5.在js文件中设置断点 使用Electron Main 项调试
