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。
