北屋教程网

ElectronJs里面的dialog是运行在Main进程里面的，所以如果需要调用dialog API，就需要发送消息到Main进程。

这边是一个简单的示例

首先编写一个页面，button点击之后，调用openDialog()函数。

    <button onclick="openDialog()">MyButton</button>

主进程里面监听"open-dialog"消息。

    ipcMain.on("open-dialog", (event) => {
        dialog.showOpenDialog(win, { properties: ['openFile'] }).then(result => {
            event.reply('open-dialog-reply', result.filePaths);
        });
    });

接着通过preload.js，定义发送消息给主进程的API。并且使用contextBridge，将api暴露到window对象里面。

const { contextBridge, ipcRenderer } = require('electron');

function myOpenDialog(callback) {
    ipcRenderer.send("open-dialog");
    ipcRenderer.once('open-dialog-reply', (event, filePaths) => {
        callback(filePaths);
    });
}

contextBridge.exposeInMainWorld("myapi", {
    openDialog: myOpenDialog
});

接着就能在页面里面进行调用了。

function openDialog() {
    console.log("opendialog");
    window.myapi.openDialog((result) => {
        console.log(result);
    });
    return;
}

运行效果如下：