Electron学习-对话框（2021.1.31&2.1）

最新推荐文章于 2024-05-18 12:00:00 发布

原创最新推荐文章于 2024-05-18 12:00:00 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

注意：

真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555)
但是看了几集发现这个老师举例不太恰当，望注意哈。
之前的学习记录都在电脑里，之后有空慢慢传上来
学的是electron，用的是vs code
写这个的主要目的是怕自己之后忘了，方便捡起来
说句题外话，我26号出门的时候手机被偷了，搞的我这两天不得安宁。这事非常离谱，大家一定注意莫名其妙往你身上靠的人。
另外一句题外话，做什么都别着急。我丢了手机之后立马买了一部。上午买的，下午就打电话给我说找到了。不得不说这真离谱。
不知不觉2021年的第一个月就过去了，感觉自己啥都没干，要加油啊！（这不是你自己给自己点赞的理由）

--学习内容：对话框API

对话框有三种：一、选择文件二、保存文件三、确认

dialog是主线程中的一个类（渲染进程中remote）

基本属性（可选）
1.title对话框标题
2.defaultPath默认打开路径
3.buttonLabel确认按钮的自定义标签（为空时，使用默认标签）
4.filters文件选择过滤器（按扩展名）
5.properties文件属性（文件/文件夹/隐藏文件）
回调函数
*：如果是异步可以用then实现

一、dialog.showOpenDialog(基本属性).回调函数
step1:打开文件选择对话框
在html中body下添加script组件，点击按钮就打开“打开文件”对话框

<script>
    const {dialog}=require('electron').remote
    var dlgbtn=document.getElementById('dlgbtn')
    //var dlgbtn=document.querySelector('#dlgbtn')//可互换
    dlgbtn.onclick=function(){
        //打开文件选择对话框
        dialog.showOpenDialog({
            title:'打开文件'
        })
    }
</script>

step2:显示所选择的图片
异步处理.then，把获取到的result用于函数段。
1.在渲染层的html中,body里整一个image单标签组件

<img id="img1" style="width:100%" />

2.在body外的script中，把result中的src赋给image组件

//紧紧跟在dlgbtn.onclick那一段后面！
.then(res=>{
            //打印结果
            console.log(res)
            //获取body中的image组件img1
            let img1=document.getElementById('img1')
            //把res中的文件路径字段赋给img1。[0]是指如果选了多张图片，那就是第一张
            img1.setAttribute("src",res.filePaths[0])
        }).catch(err=>{
            //如果错误，打印错误信息
            console.log(err)
        })

二、showsavedialog(基本属性).回调函数
step1:和一、的step1相似，在script里写：点击按钮打开“保存文件对话框”

var svbtn=document.getElementById('svbtn')
    svbtn.onclick=function(){
        dialog.showSaveDialog({
            title:'保存到'
        })

step2:保存位置获取，并向保存的文件中写入内容：.then中用fs方法
*：所以要在script的开头补一句

const fs=require('fs')

.then(result=>{
            console.log(result.filePath)
            //按照路径写入文件，后一个参数是写入内容
            fs.writeFileSync(result.filePath,'轻轻松松')
        }).catch(err=>{
            console.log(err)
        })

效果：输入路径为333.txt

三、dialog.showMessageBox()
1.属性：

type:String,对话框类型，可选填入none,warning,info,error,question
title:String,对话框标题
message:必填,String
buttons:数组类型

2.示例
step1:跟上面一样，在body里整一个按钮

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

step2:在script里获取按钮，然后监听点击事件弹出消息框，并设置消息框的一些参数

var msgbtn=document.getElementById('msgbtn')
    msgbtn.onclick=function(){
        dialog.showMessageBox({
            type:'warning',
            title:'华',
            message:'闭上眼睛，这叫养精蓄锐',
            //这里会根据选择的按钮返回对应的数组下标
            buttons:['好诶!','该死！']
        })

step3:根据按钮选择进一步操作

.then(res=>{
            console.log(res)
            //如果选择好诶
            if(res.response==0){
                alert('zzz')
            }
            else{
                alert('今日事，今日毕')
            }
        })

效果如下：选择不同，response不同（对应按钮的数组下标）可以用if来分别响应