Electron 父子窗口数据传递，对话框
站长
· 阅读数 8
「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
1, 子窗口向父窗口传递
原理：消息的传递都是通过postMessage完成
window.opener.postMessage('data')
父页面监听
window.addEventListener('message', callback)
首先定义一个子页面: children.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是弹出子窗口</h2>
<button id="children">向父窗口传递信息</button>
</body>
<script>
var childBtn = document.querySelector('#children')
childBtn.onclick = function(e) {
window.opener.postMessage('我是子窗口传递过来的信息')
}
</script>
</html>
然后定义一个父页面：
<button id="btn2">打开子窗口</button>
<div id="text"></div>
定义一个父页面加载的JS,
注意： 监听方法message, 收到的msg是一个对象， 需要通过JSON.stringfy解析
var mybtn = document.querySelector('#btn2')
mybtn.onclick = function(e) {
window.open('children.html')
}
window.addEventListener('message', (msg) => {
let text = document.querySelector('#text')
text.innerHTML = JSON.stringify(msg.data)
})
2, 打开文件对话框
dialog ： 是主线程的一个类
打开文件选择对话框可以使用：dialog.showOpenDialog()方法， 他有两个参数， 一个是设置基本属性，另一个是回调函数，如果是异步可以使用：then, 下面是参数说明
title: 对话框的标题
defaultPath: 默认打开路径
buttonLabel: 确认按钮的自定义标签
filters: 文件选择过滤器
properties:打开文件的属性
在index.html页面中定义一个按钮和显示图片的标签
<button id="openBtn">打开一个图片</button>
<img id="images" style="width: 100%;" />
定义一个js， 通过HTML页面进行加载
const { dialog } = require('@electron/remote')
let openBtn = document.querySelector('#openBtn')
openBtn.onclick = function() {
dialog.showOpenDialog({
title: '请选择本地图片',
// defaultPath: 'a.jpg', 默认选择文件
filters: [{name: 'img', extensions: ['jpg']}],
buttonLabel: '打开图片'
}).then(result => {
let images = document.querySelector('#images')
images.setAttribute('src', result.filePaths[0])
}).catch((err) => {
console.log(err)
})
}
3, 保存文件对话框
文件保存对话框也是通过dialog实现
对应的方法：dialog.showSaveDialog, 所拥有的的属性和打开按钮相同
引入一个node中 读取文件的 fs模块，在之前的html文件中定义个saveBtn按钮，
目的： 实现一个保存save.txt文件，并写入‘感谢使用'
const { dialog } = require('@electron/remote')
const fs = require('fs')
let saveBtn = document.querySelector('#saveBtn')
saveBtn.onclick = function() {
dialog.showSaveDialog({
title: '保存文件'
}).then(result => {
console.log(result)
fs.writeFileSync(result.filePath, '感谢使用')
}).catch(err => {
console.log(err)
})
}
4， 消息对话框
同上：实现的方法是：dialog.showMessageBox()
我们常用的主要属性：
type: 图标样式类型：有 none， info, error, question, warning
title:弹出框的标题
message: 必填， messageBox的内容
buttons: 数组类型
（1）首先定义一个messageBtn按钮
<button id="messageBtn">弹出对话框</button>
（2）在js文件中获取
let messageBtn = document.querySelector('#messageBtn')
messageBtn.onclick = function() {
dialog.showMessageBox({
type: 'warning',
title: '你学会了吗',
message: 'Electron到底难不难',
buttons: ['难', '容易']
}).then(result => {
console.log(result)
})
}
如下：效果图：
5， 完整代码
所有的对话框JS逻辑代码都在：open.js文件中
// const { dialog } = require('electron').remote 低版本的代码引入方式
const { dialog } = require('@electron/remote')
const fs = require('fs')
let openBtn = document.querySelector('#openBtn')
openBtn.onclick = function() {
dialog.showOpenDialog({
title: '请选择本地图片',
// defaultPath: 'a.jpg', 默认选择文件
filters: [{name: 'img', extensions: ['jpg']}],
buttonLabel: '打开图片'
}).then(result => {
let images = document.querySelector('#images')
images.setAttribute('src', result.filePaths[0])
}).catch((err) => {
console.log(err)
})
}
let saveBtn = document.querySelector('#saveBtn')
saveBtn.onclick = function() {
dialog.showSaveDialog({
title: '保存文件'
}).then(result => {
console.log(result)
fs.writeFileSync(result.filePath, '感谢使用')
}).catch(err => {
console.log(err)
})
}
let messageBtn = document.querySelector('#messageBtn')
messageBtn.onclick = function() {
dialog.showMessageBox({
type: 'warning',
title: '你学会了吗',
message: 'Electron到底难不难',
buttons: ['难', '容易']
}).then(result => {
console.log(result)
})
}
6，项目地址
项目代码地址和文档中的截图都是同步的，都已经实现
[持续更新中]