保存对话框

有了上期的基础，再学习保存对话框dialog.showSaveDialog()就容易很多，因为他们大部分的API都是相同的，只有部分不一样，所以如果你已经掌握好了上期的内容，这期就变的非常容易了。这期我们作一个保存按钮，保存后能把固定的内容保存到文件中。

制作一个保存按钮

先在index5.html中，编写一个按钮：

<button id="saveBtn">保存文件</button>

然后在<script>标签中加入下面的代码,这时候就可以顺利的弹出保存文件对话框了，我们可以随便写一个文件名，然后会在控制台给我们返回出来结果。

const saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件',

        }).then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }

其实我们还可以作的更多，比如我们引入Node中的fs模块，然后进行文件流的操作，就可以真的生成一个文件。 先引入fs模块。

 const fs = require('fs')

然后在保存后，向文件里写入内容。

saveBtn.onclick = function(){
    dialog.showSaveDialog({
        title:'保存文件',
    }).then(res=>{
        console.log(res.filePath)
        fs.writeFileSync(res.filePath,'微信公众号：Code程序人生')
    }).catch(err=>{
        console.log(err)
    })
}

写完这一步就可以在终端中输入electron . 来打开应用，进行预览了。这期的内容就到这里了。

消息对话框

打开文件对话框和保存文件对话框我们都学习过了，这节学习一下最为普通的消息对话框dialog.showMessageBox()，它的属性还是比较多的，所以我们先来看一下他的相关属性。

showMessageBox相关属性

它有太多的属性，这里我们也只挑一些常用的属性来讲解，如果你在工作中具体使用，可以先到官网查询相关的API后，再根据需求具体使用。

• type ：String类型，可以选，图标样式，有none、info、error、question和warning
• title: String类型，弹出框的标题
• messsage : String 类型，必选 message box 的内容，这个是必须要写的
• buttons: 数组类型，返回的是一个索引数值（下标）

制作一个确认对话框

先在index5.html中增加一个按钮。

 <button id="msgBtn">弹出对话框</button>

然后这个对话框的内容也非常简单，就是简单的弹出一句话，用户可以点击“确定”或者“取消”。代码如下：

var msgBtn = document.getElementById('msgBtn')
    msgBtn.onclick = () => {
        dialog.showMessageBox({
           type:'warning',
           title:'Hello World',
           message:'你好吗',
           buttons:['好','不好']                
       }).then(res => {
           console.log(res);    
       })
    }

可以看到回调中res里有一个response这个里会给我们返回按钮的数组下标，这样我们就可以知道用户点击的是哪个按钮，然后做出相应交互。

为什么会鼓励使用showMessageBox，因为这样比JS里的alert更加灵活,比如可以设置按钮，可以设置title。最常用的对话框就是这三种了，当然还有两个不常用的，我在这里就不讲了。