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

效果展示

相关推荐
wyzqhhhh6 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富13 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的29 分钟前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人43 分钟前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达1 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing1 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy1 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码1 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js