客户端开发(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。
相关文章
- Freemarker-数字默认格式化问题
- Chrome扩展插件的开发--获取网页Cookies
- 【以解决】项目使用feign时候提示bean不能注入feign
- Docker设置容器开机自启
- 常用的淘汰算法
- 分布式事务seata,TCC,最大努力通知,最终一致性解决方案——总结三!
- java分布式事务——最终一致性,最大努力通知总结!
- java分布式事务——seata,tcc解决方案总结!
- 分布式系统–拜占庭将军问题(The Byzantine Generals Problem)
- idea中启动SSM项目
- 【编程】给定一个部门,变量出当前部门的所有父部门包含当前部门
- 【解疑】ConcurrentHashMap 在JDK1.7时候put或get时候,怎么定位到数据的?
- Spring的BeanFactoryPostProcessor
- spring注解开发AnnotationConfigApplicationContext的使用
- 匿名内部类方式实现线程的创建
- spring异常:No runnable methods 解决方法
- 基础IO的理解与操作 - fd
- 【图文教程】Centos 7下安装Hadoop-管杀管埋的
- 【Flink教程-已解决】在idea中测试flink的时候,提示读取文件时候错误,提示文件不存在解决方案
- frp 服务器端 frps 一键安装卸载脚本