Electron自定义顶部菜单

最新推荐文章于 2024-01-09 20:39:06 发布

YANGGEOL

最新推荐文章于 2024-01-09 20:39:06 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_46253184/article/details/118636008

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

自定义顶部菜单

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>

调试
```
npm run electron
```

效果

在这里插入图片描述

YANGGEOL

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Electron自定义顶部菜单

自定义顶部菜单main.jsconst { app, BrowserWindow} = require('electron')// 热加载const reloader = require('electron-reloader')reloader(module)// 监听初始化完成的生命周期app.on('ready', () => { const mainWindow = new BrowserWindow({ width: 700, he
复制链接

扫一扫