ElectronJS 删除菜单栏 - TypeScript

在使用 ElectronJS 开发应用程序时，我们可能需要使用自定义的菜单栏来增强用户体验。但在一些特定情况下（比如只需要使用快捷键或右键菜单），我们可能希望将菜单栏删除以减少 UI 噪声。本文将介绍如何在 TypeScript 中使用 ElectronJS 来删除菜单栏。

前置条件

在开始本文之前，我们需要先完成以下步骤：

1. 确认已安装 ElectronJS。如果还未安装，请参考官方文档进行安装：https://www.electronjs.org/docs/tutorial/installation。

2. 使用命令行工具创建一个 TypeScript 项目，并安装 electron 类型声明库。可以使用以下命令：

   mkdir my-electron-app
   cd my-electron-app
   npm init -y
   npm install --save-dev typescript electron @types/electron
   

步骤

1. 在 main.ts 中，导入 app 和 BrowserWindow。

   import { app, BrowserWindow } from 'electron';
   

2. 创建 mainWindow 并设置 menuBarVisibility 为 false。

   function createWindow() {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
       },
       menuBarVisibility: false,
     });
   
     mainWindow.loadFile('./index.html');
   }
   
   app.whenReady().then(() => {
     createWindow();
   });
   

3. 在 package.json 中，设置 "main" 字段为 dist/main.js（如果你对 TypeScript 进行了自定义配置，请将该路径替换为你的实际输出路径）。

   {
     "name": "my-electron-app",
     "version": "1.0.0",
     "description": "",
     "main": "dist/main.js",
     "scripts": {
       "start": "tsc && electron ."
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "@types/electron": "^12.0.4",
       "electron": "^13.1.6",
       "typescript": "^4.3.5"
     }
   }
   

完成上述步骤后，运行 npm start 启动应用程序即可看到菜单栏已被删除。

结论

在 TypeScript 中，删除 ElectronJS 应用程序的菜单栏非常简单。只需要在创建 BrowserWindow 实例时添加 menuBarVisibility: false 即可。另外，在 package.json 中设置 "main" 字段指向实际输出路径也非常重要。