关于前端:客户端开发Electron系统级API使用

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

     Electron 是一个应用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 容许您放弃一个 JavaScript 代码代码库并创立 在 Windows 上运行的跨平台利用 macOS 和 Linux——不须要本地开发 教训。

零碎对话框：

1. 调用零碎 API 实现文件保留或读取前的抉择性能：

    如上图所示的性能，咱们在应用电脑时就常常会遇到，在 Electron 中咱们能够通过调用 dialog.showOpenDialogSync 函数同步关上上面的对话框，抉择文件后将返回一个已文件门路组成的数组。
​

示例：

    咱们在 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()
})

总结：

    利用零碎提供的对话框 API 能够实现更加灵便的配置来减少用户的理论体验，菜单配置也是每个桌面利用必不可少的一块，目前只是首次演示 API 的应用，理论开发时还是要多查查官网 API。

欢送关注我的公众号“前端小鑫同学”，原创技术文章第一工夫推送。