electron dialog.showMessageBox使用案例

electron 版本:25.3.1

index.html

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Hello World!</h1>
<button id="sad">点我弹出消息对话框</button>
<script>
    const {ipcRenderer} = require('electron')
    document.querySelector('#sad').addEventListener('click', () => {
        ipcRenderer.send('open-message-dialog')
    })
</script>
</body>
</html>

main.js

js 复制代码
const {app, BrowserWindow, ipcMain, dialog} = require('electron')

function createWindow() {
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    win.loadFile('index.html')

    ipcMain.on('open-message-dialog', () => {
        dialog.showMessageBox({
            title: '消息',
            message: '这是一个消息框。',
            type: 'info',
            buttons: ['确定', '取消']
        })
    })
}

app.whenReady().then(createWindow)


app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

效果展示

相关推荐
蓝瑟2 分钟前
前端测试不再难:Vite+React+Vitest单元测试完整手册
前端·react.js·单元测试
爱分享的鱼鱼5 分钟前
Vue中如何实现可切换显示/隐藏侧边栏的按钮
前端
Mike_jia7 分钟前
DBdoctor:数据库性能的“AI名医”,诊断效率提升10倍的终极利器
前端
怪可爱的地球人8 分钟前
向宇宙发送一枚小可爱
前端
数字元匠_山步12 分钟前
一篇笔记彻底搞懂 “脚手架” “框架” “构建工具” 的关系
前端
李剑一19 分钟前
前端实现时间轴组件拼接N多个不连续监控视频展示
前端·vue.js
岁月向前22 分钟前
iOS UI基础和内存管理相关
前端
Magicman27 分钟前
JS筑基(二)-关于this指向
前端
Asort28 分钟前
精通React JSX:高级开发者必备的语法规则与逻辑处理技巧
前端·javascript·react.js
Mintopia30 分钟前
想摸鱼背单词?我用 Cursor 一个小时开发了一个 Electron 应用
前端·javascript·cursor