乐趣区

关于前端:客户端开发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。


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

退出移动版