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

index.js

/**
 * 消息对话框：显示简单的消息对话框
 * 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

<!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

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