Electron自定义顶部菜单

最新推荐文章于 2025-03-30 20:06:31 发布

YANGGEOL

最新推荐文章于 2025-03-30 20:06:31 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： js javascript css html5

本文链接：https://blog.youkuaiyun.com/qq_46253184/article/details/118636008

版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文展示了如何使用 Electron 框架创建一个带有自定义顶部菜单的桌面应用。通过 main.js 和 index.js 文件配置窗口和菜单，实现了无边框窗口、新窗口的创建以及链接在默认浏览器中打开的功能。同时，CSS 样式定义了菜单的布局和交互。这是一个基础的 Electron 应用实例，适合初学者了解和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义顶部菜单

main.js

const { app, BrowserWindow} = require('electron')

// 热加载
const reloader = require('electron-reloader')
reloader(module)

// 监听初始化完成的生命周期
app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        width: 700,
        height: 500,
        // 创建无边框窗口
        frame: false,
        //开启渲染进程node模块和remote模块
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: true,
            contextIsolation: false,
        }
    })

	// 加载页面
    mainWindow.loadFile('./src/index.html')

    // 打开控制台
    // mainWindow.webContents.openDevTools()

})

index.js

const {remote: {BrowserWindow}, shell} = require('electron')

const newWindow = document.querySelector('.new-window')

// 新建窗口
newWindow.onclick = function () {
    new BrowserWindow({
        width: 300,
        height: 200
    })
}

//跳转网页到默认浏览器打开
const allA = document.querySelectorAll('a')
allA.forEach(item => {
    item.onclick = function (e) {
        e.preventDefault()
        shell.openExternal(item.href)
    }
})

index.css

* {
    margin: 0;
    padding: 0;
}

.custom-menu {
    height: 40px;
    width: 100%;
    background-color: cornflowerblue;
    /* 支持拖动 */
    -webkit-app-region: drag;
}

.custom-menu ul {
    list-style: none;
}

.custom-menu ul li {
    float: left;
    width: 50px;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
    cursor: default;
    /* 不支持drag */
    -webkit-app-region: no-drag;
}

a {
    text-decoration: none;
    color: black;
}

index.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>ELectron</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="custom-menu">
        <ul>
            <li class="new-window">文件</li>
            <li class="about">
                <a href="http://yanggeol.top">关于</a>
            </li>
        </ul>
    </div>
    <h4>Hello YANGGEOL!</h4>
    <script src="./js/index.js"></script>
</body>
</html>