likes
comments
collection
share

Electron 父子窗口数据传递，对话框

作者站长头像
站长
· 阅读数 41

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

1,初识Electron

2,初学Electron遇到的问题

3,Electron菜单的构建，内嵌浏览器

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)
})

Electron 父子窗口数据传递，对话框

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)
      })
    }

Electron 父子窗口数据传递，对话框

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)
          })
        }

Electron 父子窗口数据传递，对话框

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)
          })
        }

如下：效果图：

Electron 父子窗口数据传递，对话框

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，项目地址

项目代码地址和文档中的截图都是同步的，都已经实现

[持续更新中]

gitee.com/jamiedawn/e…

转载自:https://juejin.cn/post/7055681525794209822
评论
请登录