electron第二弹
选择文件对话框:dialog.showOpenDialog()
- 有两个参数，一个设置基本属性，另外一个是回调函数，如果一部可以使用then来实现
小例子；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Electron</title>
</head>
<body>
<button id="openBtn">打开文件</button>
<img id="images" style="width: 100%;" />
<script>
const {
dialog
} = require('electron').remote;
var openBtn = document.getElementById('openBtn')
openBtn.onclick = function() {
dialog.showOpenDialog({
title: '请选择你喜欢的照片',
//默认路径,默认选择的文件
defaultPath: 'default.jpg',
//过滤文件后缀
filters: [{
name: 'img',
extensions: ['jpg', 'png']
}],
//打开按钮
buttonLabel: '打开按钮文字',
//回调结果渲染到img标签上
}).then(result => {
let image = document.getElementById('images')
image.setAttribute("src", result.filePath[0])
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
小结：主要就是用dialog里的showOpenDialog可以触发选择文件事,然后里面的默认文件，过滤文件后缀，打开按钮自定义，回调渲染，可以理解一下
保存文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Electron</title>
</head>
<body>
<button id="openBtn">打开文件</button>
<button id="saveBtn">保存文件</button>
<img id="images" style="width: 100%;" />
<script>
const fs = require('fs')
var saveBtn = document.getElementById('saveBtn')
saveBtn.onclick = function() {
dialog.showSaveDialog({
title: '保存文件'
}).then(result => {
console.log(result)
fs.writeFileSync(result.filePath, 'baocunde.js')
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
小结：首先引入node.js的fs，然后调用dialog.showSaveDialog,选择文件，回调会给你一个文件名，然后使用fs.writeFileSync(文件名称，文件内容)
消息对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Electron</title>
</head>
<body>
<button id="messageBtn">保存文件</button>
<img id="images" style="width: 100%;" />
<script>
const {
dialog
} = require('electron').remote;
const fs = require('fs')
var messageBtn = document.getElementById('messageBtn')
messageBtn.onclick = function() {
dialog.showMessageBox({
title: '选择一个按钮',
type: 'warning',
message: '去吃饭吗',
buttons: ['去', '不去']
}).then(result => {
if (result == 0) {
console.log('用户点击了去')
}
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
小结：使用dialog.showMessageBox，可以弹出一个选择框，buttons是按钮选项，为一个数组，点击返回的是数组中的下标，然后在回调中做判断
