VSCode 使用electron主進程調用js文件

本文轉載自查看原文 2019-03-09 00:08 1594

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 項調試

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Visual Studio Code調試Electron主進程 electron代碼示例在 html 中調用 electron 的函數主進程的函數 nodejs electron主進程與渲染進程的通信方式 Electron 主進程和渲染進程互相通信 Electron 主進程與渲染進程的通信 (原)Electron+vue 應用實戰 - 渲染進程直接調用主進程方法 electron 主進程，和渲染進程的通信 electron-vue 中使用Electron Api和nodejs以及主進程渲染通信 Electron 運行流程、主進程渲染進程、讀取本地文件、開啟調試模式 Visual Studio Code調試electron主進程