Electron学习第十一章 dialog对话框

最新推荐文章于 2024-03-19 19:46:00 发布

梅子酱~

最新推荐文章于 2024-03-19 19:46:00 发布

阅读量903

点赞数 1

文章标签： electron 学习 javascript

本文链接：https://blog.csdn.net/mm_0123456789/article/details/122718003

版权

dialog对话框的使用

文章目录

dialog对话框的使用
一、打开文件对话框
二、告警dialog对话框
- 1. 渲染进程
- 2. 实现效果
三、dialog 打开图片
- 1. 渲染进程
- 2. 实现效果

一、打开文件对话框

1. 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>文件对话框</title>
</head>
<body>
    <button id="openBtn">打开图片</button>
    <button id="openFile">打开文件</button>
    <button id="message">对话框</button>
    // 打开图片显示位置
    <img id="image" style="width: 100%;" />
</body>
</html>

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

2、主进程

mian.js 代码如下（示例）：

// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut

// 声明要打开的窗口
let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences:{
            nodeIntegration:true, //开启node接口
            contextIsolation:false,
        }
    });

    // 打开调试工具
    mainWindow.webContents.openDevTools();
    mainWindow.loadFile("index.html");
})

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
});

3. 渲染进程

render.js 代码如下（示例）：

const {dialog} = require('@electron/remote')
const fs = require("fs")
// 保存文件 showSaveDialog
let openFile = document.querySelector("#openFile");
        openFile.onclick = () =>{
            dialog.showSaveDialog({
                title: "保存文件",

            }).then(result=>{
                console.log(result);
                fs.writeFileSync(result.filePath,'dialog保存文件')

            }).catch(err=>{
                console.log(err)
            })
        }

4.实现效果

在这里插入图片描述

二、告警dialog对话框

1. 渲染进程

render.js 代码如下（示例）：

const {dialog} = require('@electron/remote')
const fs = require("fs")
 let message = document.querySelector("#message");
        message.onclick = () =>{
            dialog.showMessageBox({
                type: 'warning',
                title: '警告',
                message: '错误类型',
                buttons: ['查看详情','忽略'],

            }).then(result=>{
                console.log(result)
            }).catch(err=>{
                console.log(err)
            })
        }

2. 实现效果

在这里插入图片描述

三、dialog 打开图片

1. 渲染进程

render.js 代码如下（示例）：

const {dialog} = require('@electron/remote')
const fs = require("fs")

// 打开文件 showOpenDialog
var openBtn = document.querySelector('#openBtn');
openBtn.onclick = function(){
    dialog.showOpenDialog({
      title:'请选择你喜欢的图片',
      defaultPath: "wrapBg.jpg", // 文件名框中的默认路径
      filters:[{name:'.jpg',extensions:['jpg']}], // 过滤器，选择想要的文件类型
      buttonLabel:"打开图片"  // 确认按钮位置的名称显示
            }).then(result=>{
                img = document.querySelector("#image");
                img.setAttribute("src",result.filePaths[0]) // 给 img 标签添加src属性，显示选择的图片
            }).catch(err=>{
                console.log(err)
            })
        }

2. 实现效果

在这里插入图片描述

梅子酱~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Electron学习第十一章 dialog对话框

dialog对话框的使用文章目录dialog对话框的使用一、打开文件对话框1. html页面2、主进程3. 渲染进程4.实现效果二、告警dialog对话框1. 渲染进程2. 实现效果三、dialog 打开图片1. 渲染进程2. 实现效果一、打开文件对话框1. html页面代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h
复制链接

扫一扫