dialog 模塊提供了 api 來展示原生的系統對話框，例如打開文件框，alert 框，
所以 web 應用可以給用戶帶來跟系統應用相同的體驗。
dialog.js
var {remote}=require('electron'); //https://electronjs.org/docs/api/dialog var errorDom=document.querySelector('#error'); var mesageBoxDom=document.querySelector('#mesageBox'); var openDialogDom=document.querySelector('#openDialog'); var saveDialogDom=document.querySelector('#saveDialog'); errorDom.onclick=function(){ remote.dialog.showErrorBox('警告','操作有誤'); } mesageBoxDom.onclick=function(){ remote.dialog.showMessageBox({ type:'info', title:'提示信息', message:'內容', buttons:['ok','no'] },function(index){ console.log(index) }) } openDialogDom.onclick=function(){ remote.dialog.showOpenDialog({ // properties:['openDirectory','openFile'] properties:['openFile'] },function(data){ console.log(data); //["C:\Users\Administrator\Desktop\新建文件夾\js\index.js"] }) } saveDialogDom.onclick=function(){ remote.dialog.showSaveDialog({ title:'save file', defaultPath:"aaa.jpg", filters: [ {name: 'Images', extensions: ['jpg', 'png', 'gif']}, {name: 'Movies', extensions: ['mkv', 'avi', 'mp4']}, {name: 'Custom File Type', extensions: ['as']}, {name: 'All Files', extensions: ['*']} ] },function(path){ console.log(path); // C:\Users\Administrator\Desktop\新建文件夾\js\aaa.jpg //保存以后會打印保存的路徑 , 但是不會實現真的保存功能 （具體保存什么數據可以寫在nodejs里面） }) }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="error">失敗提示框</button> <br> <br> <button id="mesageBox">showMessageBox</button> <br> <br> <button id="openDialog">showOpenDialog</button> <br> <br> <button id="saveDialog">showSaveDialog</button> <script src="renderer/dialog.js"></script> </body> </html>