index.js

9、Electron消息对话框、错误对话框_ico

9、Electron消息对话框、错误对话框_html_02

/**
* 消息对话框:显示简单的消息对话框
* titile 和 message
* showMessageBox(options)
*
* 设置消息对话框的图标
* icon
*
* 设置消息对话框类型
* 1、默认对话框:none
* 2、信息对话模型:info
* 3、错误对话框:error
* 4、询问对话框:question
* 5、警告对话框:warning
*
* 设置消息对话框的按钮
* bttons
*
* 错误对话框
* showErrorBox()
*/
const {app,BrowserWindow} = require('electron');
function createWindow(){
win = new BrowserWindow({
//show:false,
webPreferences:{
nodeIntegration: true, // 是否集成 Nodejs
enableRemoteModule: true,
contextIsolation: false,
}
});
win.loadFile('index.html');
win.on("ready-to-show",()=>{
win.show();
});
if(process.platform!="darwin"){
win.setIcon("images\\logn.jpg");
}
win.on('closed',()=>{
console.log('closed')
win=null;
});
}
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
console.log('window-all-closed');
if(process.platform!='darwin'){

}
});
app.on('activate',()=>{
console.log('activate');
if(win==null){
createWindow();
}
});

View Code

index.html

9、Electron消息对话框、错误对话框_ico

9、Electron消息对话框、错误对话框_html_02

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消息对话框</title>
<script src="event.js"></script>
<body>
<button onclick="onClick_MessageBox()">显示简单的消息对话框</button>
<br/>
<button onclick="onClick_MessageBoxIcon()">定制消息对话框的图标</button>
<br/>
<button onclick="onClick_MessageBoxType()">设置消息对话框类型</button>
<br/>
<button onclick="onClick_MessageBoxButton()">设置消息对话框的按钮</button>
<br/>
<button onclick="onClick_ErrorBox()">错误对话框</button>
<br/>
<label id="label"></label>
</body>
</html>

View Code

event.js

9、Electron消息对话框、错误对话框_ico

9、Electron消息对话框、错误对话框_html_02

const remote = window.require('electron').remote;
const dialog =remote.dialog;

//显示简单的消息对话框
function onClick_MessageBox()
{
const label=document.getElementById("label");
var options={};
options.title="消息";
options.message="显示简单的消息对话框"
var p= dialog.showMessageBox(options).then(result=>{
console.info("result",result);
label.innerText=result.response;
}).catch(err=>{
console.info("err",err);
});
}
//定制消息对话框的图标
function onClick_MessageBoxIcon()
{
const label=document.getElementById("label");
var options={};
options.title="消息";
options.message="定制消息对话框的图标";
options.icon="./images/shj8.jpg";
var p= dialog.showMessageBox(options).then(result=>{
console.info("result",result);
label.innerText=result.response;
}).catch(err=>{
console.info("err",err);
});
}
/**
* 1、默认对话框:none
* 2、信息对话模型:info
* 3、错误对话框:error
* 4、询问对话框:question
* 5、警告对话框:warning
*/
//设置消息对话框类型
function onClick_MessageBoxType()
{
const label=document.getElementById("label");
var options={};
options.title="消息";
options.message="设置消息对话框类型";
options.type="error";
//options.icon="./images/shj8.jpg";
var p= dialog.showMessageBox(options).then(result=>{
console.info("result",result);
label.innerText=result.response;
}).catch(err=>{
console.info("err",err);
});
}
//设置消息对话框的按钮
function onClick_MessageBoxButton()
{
const label=document.getElementById("label");
var options={};
options.title="消息";
options.message="设置消息对话框的按钮";
options.type="error";
options.buttons=['按钮1','按钮1'];
var p= dialog.showMessageBox(options).then(result=>{
console.info("result",result);
label.innerText=result.response;
}).catch(err=>{
console.info("err",err);
});
}
//错误对话框
function onClick_ErrorBox()
{
const label=document.getElementById("label");
var options={};
options.title="消息";
options.content="错误对话框";
var p= dialog.showErrorBox("错误","错误对话框").then(result=>{
console.info("result",result);
label.innerText=result.response;
}).catch(err=>{
console.info("err",err);
});
}

View Code