我想在 electron.js 應用程式中制作一個包含是和否按鈕的訊息框。我試圖用電子內部的對話來做到這一點。但它沒有用：
const electron = require('electron')
const { dialog } = electron
console.log(dialog) // undefined
const electron = require('electron')
const dialog = electron.remote.dialog
console.log(dialog) // Uncaught Error: Cannot read "dialog" of undefined (remote is undefined)
然后，我嘗試使用npm 中的一個模塊dialog來做到這一點。但它沒有做我想做的事情。沒有任何是或否按鈕，當我單擊確定或關閉視窗時，它也回傳相同的回應：
const electron = require('electron')
const dialog = require('dialog')
dialog.info('Are you sure?', 'Confirmation', function(exitCode) {
if (exitCode == 0) {
// Should clicked OK (always response)
}
if (exitCode == 1) {
// Should closed window (but never works)
}
})
我做錯了什么？
uj5u.com熱心網友回復：
您將需要使用 Electron 的dialog.showMessageBox();
方法。
dialog.showMessageBoxSync (); 方法會阻塞你的主行程，直到收到回應，所以除非有意，否則你不會想要使用它。
我已經把你的對話框的創建和管理放在了main.js檔案里。如果你想把它移到它自己的檔案中，那不是問題。get()如果您希望您的對話框成為主視窗的子視窗，您需要做的就是（主）視窗實體。
main.js（主要流程）
// Import required Electron modules
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronDialog = require('electron').dialog;
const electronIpcMain = require('electron').ipcMain;
// Import required Node modules
const nodePath = require('path');
// Prevent garbage collection
let window;
function createWindow() {
const window = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
window.loadFile('index.html')
.then(() => { window.show(); });
return window;
}
electronApp.on('ready', () => {
window = createWindow();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// ---
electronIpcMain.on('openDialog', () => {
electronDialog.showMessageBox(window, {
'type': 'question',
'title': 'Confirmation',
'message': "Are you sure?",
'buttons': [
'Yes',
'No'
]
})
// Dialog returns a promise so let's handle it correctly
.then((result) => {
// Bail if the user pressed "No" or escaped (ESC) from the dialog box
if (result.response !== 0) { return; }
// Testing.
if (result.response === 0) {
console.log('The "Yes" button was pressed (main process)');
}
// Reply to the render process
window.webContents.send('dialogResponse', result.response);
})
})
為了行程之間的正確通信，我們必須使用行程間通信。
preload.js（主要流程）
// Import the necessary Electron modules
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
// Exposed protected methods in the render process
contextBridge.exposeInMainWorld(
// Allowed 'ipcRenderer' methods
'ipcRenderer', {
// From render to main
openDialog: () => {
ipcRenderer.send('openDialog');
},
dialogResponse: (response) => {
ipcRenderer.on('dialogResponse', response);
}
}
);
最后，您的index.html檔案將偵聽按鈕單擊。單擊后，向主行程發送訊息以打開對話框。
一旦從對話框接收到有效回應，該回應就會被發送回渲染行程進行處理。
PS：
ipcRenderer.invoke()可以使用 render 方法代替ipcRenderer.send()方法。但如果是，您將需要在渲染程序中處理“否”或轉義 (ESC) 回應。
index.html（渲染程序）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<input type="button" id="openDialog" value="Show Dialog">
<hr>
<div id="response"></div>
</body>
<script>
// Open dialog (in main process) when "Show Dialog" button is clicked
document.getElementById('openDialog').addEventListener('click', () => {
window.ipcRenderer.openDialog('openDialog');
})
// Response from main process
window.ipcRenderer.dialogResponse((event, response) => {
if (response === 0) {
// Perform your render action here
document.getElementById('response').innerText = 'The "Yes" button was clicked';
}
});
</script>
</html>
要在對話框中使用超過 2 個按鈕，在創建對話框時，您可能需要指定一個cancelId并在執行任何操作之前檢查所有有效的回傳值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/493546.html