客户端开发（Electron）系统级API使用

前端小鑫同学

发布于 2022-12-26 10:07:39

2.5K0

发布于 2022-12-26 10:07:39

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

系统对话框：

1. 调用系统API实现文件保存或读取前的选择功能：

如上图所示的功能，我们在使用电脑时就经常会遇到，在Electron中我们可以通过调用dialog.showOpenDialogSync函数同步打开下面的对话框，选择文件后将返回一个已文件路径组成的数组。

示例：

&ensp;&ensp;&ensp;&ensp;我们在App.vue中新增了一个openFIle函数，设置了默认的左上角标题，默认打开的文件路径，确认按钮文案和文件类型的过滤：

openFile () {
  const { dialog, app } = remote
  const win = remote.getCurrentWindow()
  const filePath = dialog.showOpenDialogSync(win, {
    title: '请选择一张图片',
    defaultPath: app.getPath('pictures'),
    buttonLabel: '就它了',
    filters: [
      { name: 'PNG', extensions: ['png'] },
      { name: 'JPG', extensions: ['jpg'] }
    ]
  })
  console.log('[ filePath ] >', filePath)
}

Options参数均为可选，常见的API说明如下： 参数名 - 作用 title - 对话框窗口的标题 defaultPath - 对话框的默认展示路径 buttonLabel - 「确认」按钮的自定义标签 filters - 文件类型过滤 properties openFile 允许选择文件 openDirectory 允许选择文件夹 multiSelections 允许多选 showHiddenFiles 显示对话框中的隐藏文件
Electron给我们提供关于对话框的API如下： API名称 主要参数 showOpenDialogSync [browserWindow, ]options showOpenDialog [browserWindow, ]options showSaveDialogSync [browserWindow, ]options showSaveDialog [browserWindow, ]options showMessageBoxSync [browserWindow, ]options showMessageBox [browserWindow, ]options showErrorBox title, content showCertificateTrustDialog [browserWindow, ]options

2. 特殊对话框（关于面板）：

如上图就是我们设置过后的特殊对话框关于面板，通常显示当前客户端应用的信息。

示例：

API为app内用来配置面板的setAboutPanelOptions和用来随时显示面板的showAboutPanel：

const { app } = remote
app.setAboutPanelOptions({
  applicationName: app.getName(),
  applicationVersion: app.getVersion(),
  copyright: '©2022 小鑫同学'
})
// 通过调用此API可以随时打开
app.showAboutPanel()

菜单配置：

1. 菜单栏菜单：

Electron提供的默认菜单栏中的菜单都是一些为了演示和开发使用的，在实际的应用中我们还是需要进行配置来实现我们自己的功能。菜单栏自动隐藏，应用启动后默认隐藏，当按下ALT件后显示原菜单栏：

const win = new BrowserWindow({
    autoHideMenuBar: true,
})

通过Electron提供的Menu模块来覆盖默认菜单：

菜单的配置提供label配置菜单名称，role配置默认功能（undo、redo、cut、copy、delete、selectAll、reload、minimize、close、quit），配置自定义click实现特殊的功能，其他API可参考官网。

const { Menu } = remote
  Menu.setApplicationMenu(
    Menu.buildFromTemplate([
      {
        label: '文件',
        submenu: [{ label: '新建文件' }, { label: '新建窗口' }]
      },
      { label: '编辑' },
      { label: '选择' },
      { label: '查看' }
    ])
)

替换前后的效果对比：

2. 系统右键菜单：

通过覆盖oncontextmenu来实现弹出定义的菜单想：

const menus = [
  {
    label: '文件',
    submenu: [{ label: '新建文件' }, { label: '新建窗口' }]
  },
  { label: '编辑' },
  { label: '选择' },
  { label: '查看' }
]
const { Menu } = remote
const menuCtx = Menu.buildFromTemplate(menus)
window.oncontextmenu = function (e) {
  e.preventDefault()
  menuCtx.popup()
}
win.on('blur', () => {
  menuCtx.hide()
})