Electron file pop - yaokun123/php-wiki GitHub Wiki
对话框一般会有选择文件对话框,保存文件对话框和确认对话框。
我们先来看一下打开对话框的相关API,打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开,它有两个参数,一个是设置基本属性,另一个是回调函数,如果是异步可以使用then来实现。
-
title : String (可选),对话框的标题
-
defaultPath : String (可选),默认打开的路径
-
buttonLabel : String (可选), 确认按钮的自定义标签,当为空时,将使用默认标签
-
filters : 文件选择过滤器,定义后可以对文件扩展名进行筛选
-
properties:打开文件的属性,比如打开文件还是打开文件夹,甚至是隐藏文件。
对基本的API了解以后,就可以写代码看看具体的效果了。
在根目录新建一个demo4.html文件,然后编写一个按钮,点击按钮可以打开窗口选择文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="openBtn">打开文件</button>
</body>
<script>
const {dialog} = require('electron').remote
var openBtn = document.getElementById('openBtn');
openBtn.onclick = function(){
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片'
})
}
</script>
</html>
写完后记得把main.js中的引入页面改成demo4.html代码如下:
mainWindow.loadFile("demo4.html");
使用electron . 预览一下,可以看到,已经可以顺利打开文件选择窗口了。
这时打开的窗口是没有默认文件的,比如我们想直接定位到小姐姐文件xiaojiejie.jpg,就可以用defaultPath来进行制作。 代码如下:
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片',
defaultPath:'xiaojiejie.jpg'
})
现在程序还是可以看到很多其他的文件,我们的原则就是想选择一个美女照片,然后显示在界面上,这时候就需要用到过滤器了。
openBtn.onclick = function(){
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片',
defaultPath:'xiaojiejie.jpg',
filters:[
{name:'jpg',extensions:['jpg']}
]
})
}
可以直接使用buttonLabel来自定义确定按钮的文字,比如现在把文字改成'打开图片'
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片',
defaultPath:'xiaojiejie.jpg',
buttonLabel:'打开图片',
filters:[
{name:'jpg',extensions:['jpg']}
]
})
当我们选择到了一个文件后,showOpenDialog提供了回调函数,也就是我们的第二个参数。现在来看一下回调函数如何获得图片路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="openBtn">打开文件</button>
<img id="images" style="width:100%" />
</body>
<script>
const {dialog} = require('electron').remote
var openBtn = document.getElementById('openBtn');
openBtn.onclick = function(){
dialog.showOpenDialog({
title:'请选择你喜欢的小姐姐照片',
defaultPath:'xiaojiejie.jpg',
filters:[{name:'jpg',extensions:['jpg']}]
}).then(result=>{
let image = document.getElementById('images')
image.setAttribute("src",result.filePaths[0]);
console.log(result)
}).catch(err=>{
console.log(err)
})
}
</script>
</html>
这样完成了选择照片,并显示在界面上的功能,有的小伙伴这时候就会问了,我用html的选择文件也可以实现这个效果,确实是可以实现的,但我认为既然用了Electron就最好使用原生的形式打开。