技术思绪摘录旅行
Electron一个使用HTML、CSS和JavaScript开发桌面应用程序的框架。Electron可以生成在Windows、macOS和Linux上运行的应用程序,借助Electron可以把我们的web端应用直接移植到桌面端而无需再次开发,这样我们可以使用同一套代码在不同平台上运行应用,极大的缩短了开发时间。

右键菜单,使用remote模块

const { app, BrowserWindow } = require("electron");
const remote=require('@electron/remote/main');
remote.initialize();

const path = require("path");
const createWindow = () => {      
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            nodeIntegration:true,  //开启渲染进程中使用nodejs
            contextIsolation:false, //开启渲染进程中使用nodejs    
        }
    }); 
    //启动remote模块
    remote.enable(mainWindow.webContents)

    //在渲染进程中开启调试模式
    mainWindow.webContents.openDevTools()    
    mainWindow.loadFile(path.join(__dirname, "index.html"));

}

//监听应用的启动事件
app.on("ready", createWindow)

//监听窗口关闭的事件,关闭的时候退出应用,macOs 需要排除 
app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {
        app.quit();
    }
});

//Macos 中点击 dock 中的应用图标的时候重新创建窗口 
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

渲染进程:index.js

const remote = require('@electron/remote')
const Menu=remote.Menu;

var menuContextTemplate=[
    {
        label:"复制",
        role:"copy",
        click:()=>{
            console.log("copy")
        }
    },
    {
        label:"黏贴",
        role:"paste"
    },
    { type: 'separator' }, //分隔线
    {
        label:"其他功能",
        click:()=>{
            console.log("其他功能")
        }
    }, {
        label:"文件",
        submenu:[
            {
                label:"新建",
                accelerator:"ctrl+n",
                click:()=>{
                    console.log("Ctrl+N")
                }
            },
            {
                label:"打开",
                accelerator:"ctrl+o",
                click:()=>{
                    console.log("Ctrl+O")
                }
            },
            {
                type:"separator"
            },
            {
                label:"保存"
            }
        ]
    },
];
var menuBuilder=Menu.buildFromTemplate(menuContextTemplate);

window.onload=()=>{
    window.addEventListener("contextmenu",(e)=>{
        console.log("鼠标点击了右键")
        e.preventDefault()
        menuBuilder.popup({
            window:remote.getCurrentWindow()
        })
    },false)
}


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫