electron应用功能之旅(六) | 七日打卡

前端

2023-10-30 14:15:05

electron关于应用功能之旅(六)|七日打卡

Electron 是一个跨平台的应用程序开发框架，可让您使用 JavaScript、HTML 和 CSS 构建桌面应用程序。它基于 Chromium 和 Node.js，因此您可以使用熟悉的 Web 技术来创建跨平台的桌面应用程序。

在这一期的 electron 应用功能之旅中，我们将继续探讨 electron 的各种应用功能，包括文件图标、对话框、菜单和托盘。

文件图标

如果您想为您的应用程序中的任何窗口设置一个代表文件，您可以在 macOS 上做到这一点。这也意味着文件的 icon 也将展示在标题上面，我们可以使用 command-click 或者 control-Click 可以触发一个文件的展示。

我在实验过程中还遇到了一些问题，例如，如果所有网络请求都失败（例如，断开网络），您将无法打开文件对话框。

对话框

Electron 提供了多种类型的对话框，包括警报对话框、确认对话框和输入对话框。警报对话框用于向用户显示一条消息，确认对话框用于从用户那里获取一个确认，而输入对话框用于从用户那里获取一个输入。

您可以使用以下代码来创建一个警报对话框：

const { dialog } = require('electron')

dialog.showMessageBox({
  type: 'info',
  title: '这是一个警报对话框',
  message: '这是一条消息',
  buttons: ['确定', '取消']
})

您可以使用以下代码来创建一个确认对话框：

const { dialog } = require('electron')

dialog.showMessageBox({
  type: 'question',
  title: '这是一个确认对话框',
  message: '这是一个问题',
  buttons: ['是', '否']
})

您可以使用以下代码来创建一个输入对话框：

const { dialog } = require('electron')

dialog.showMessageBox({
  type: 'input',
  title: '这是一个输入对话框',
  message: '这是一个问题',
  buttons: ['确定', '取消'],
  defaultId: 0,
  cancelId: 1
})

菜单

Electron 还提供了菜单功能。您可以使用菜单来组织您的应用程序的功能。您可以使用以下代码来创建一个菜单：

const { Menu } = require('electron')

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => {
          // 在这里添加新建文件的代码
        }
      },
      {
        label: '打开',
        click: () => {
          // 在这里添加打开文件的代码
        }
      },
      {
        label: '保存',
        click: () => {
          // 在这里添加保存文件的代码
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        click: () => {
          // 在这里添加撤销操作的代码
        }
      },
      {
        label: '重做',
        click: () => {
          // 在这里添加重做操作的代码
        }
      },
      {
        label: '剪切',
        click: () => {
          // 在这里添加剪切操作的代码
        }
      },
      {
        label: '复制',
        click: () => {
          // 在这里添加复制操作的代码
        }
      },
      {
        label: '粘贴',
        click: () => {
          // 在这里添加粘贴操作的代码
        }
      }
    ]
  },
  {
    label: '视图',
    submenu: [
      {
        label: '放大',
        click: () => {
          // 在这里添加放大操作的代码
        }
      },
      {
        label: '缩小',
        click: () => {
          // 在这里添加缩小操作的代码
        }
      },
      {
        label: '重置缩放',
        click: () => {
          // 在这里添加重置缩放操作的代码
        }
      }
    ]
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于',
        click: () => {
          // 在这里添加关于应用程序的信息
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

托盘

Electron 还提供了托盘功能。托盘可以用来显示应用程序的图标，并提供一些基本的交互功能。您可以使用以下代码来创建一个托盘：

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

const icon = path.join(__dirname, 'icon.png')
const tray = new Tray(icon)

tray.setToolTip('这是一个托盘')
tray.on('click', () => {
  // 在这里添加托盘点击事件的代码
})