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

主进程js:

const { app, BrowserWindow } = require("electron");

const path = require("path");
const createWindow = () => {      
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            nodeIntegration:true,  //开启渲染进程中使用nodejs
            contextIsolation:false, //开启渲染进程中使用nodejs    
        }
    }); 
    
    //在渲染进程中开启调试模式
    mainWindow.webContents.openDevTools()    
    mainWindow.loadFile(path.join(__dirname, "index.html"));

    //引入menu渲染进程
    require('./menu');
}

//监听应用的启动事件
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();
    }
});

渲染进程:menu.js

const { Menu } = require("electron");

//https://www.electronjs.org/docs/api/menu-item
var menuTemplate=[
    {
        label:"文件",
        submenu:[
            {
                label:"新建",
                accelerator:"ctrl+n",
                click:()=>{
                    console.log("Ctrl+N")
                }
            },
            {
                label:"打开",
                accelerator:"ctrl+o",
                click:()=>{
                    console.log("Ctrl+O")
                }
            },
            {
                type:"separator"
            },
            {
                label:"保存"
            }
        ]
    },
    {
        label:"编辑",
        submenu:[
            {
                label:"复制",
                role:"copy",
                click:()=>{
                    console.log("copy")
                }
            },
            {
                label:"黏贴",
                role:"paste"
            }            
        ]
    }
];

var menuBuilder=Menu.buildFromTemplate(menuTemplate);

Menu.setApplicationMenu(menuBuilder);


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

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫