客户端开发(Electron)系统级API使用

简介: 客户端开发(Electron)系统级API使用

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。


系统对话框:


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

1.png

    如上图所示的功能,我们在使用电脑时就经常会遇到,在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. 特殊对话框(关于面板):

2.png

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


示例:

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: '查看' }
    ])
)
复制代码


替换前后的效果对比:

3.png

4.png


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。



相关文章
|
10天前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。
|
25天前
|
人工智能 自然语言处理 机器人
使用 API 编程开发扣子应用
扣子(Coze)应用支持通过 API 编程,将 AI 聊天、内容生成、工作流自动化等功能集成至自有系统。主要 API 包括 Bot API(用于消息交互与会话管理)及插件与知识库 API(扩展功能与数据管理)。开发流程包括创建应用、获取密钥、调用 API 并处理响应,支持 Python 等语言。建议加强错误处理、密钥安全与会话管理,提升集成灵活性与应用扩展性。
296 0
|
1月前
|
前端开发 Java API
利用 Spring WebFlux 技术打造高效非阻塞 API 的完整开发方案与实践技巧
本文介绍了如何使用Spring WebFlux构建高效、可扩展的非阻塞API,涵盖响应式编程核心概念、技术方案设计及具体实现示例,适用于高并发场景下的API开发。
210 0
|
1月前
|
存储 监控 算法
淘宝买家秀 API开发实录Python(2025)
本文讲述了作者在电商开发领域,尤其是对接淘宝买家秀 API 接口过程中所经历的挑战与收获。从申请接入、签名验证、频率限制到数据处理和实时监控,作者分享了多个实战经验与代码示例,帮助开发者更高效地获取和处理买家秀数据,提升开发效率。
|
10天前
|
存储
最新款electron38+vite7+vue3.5+pinia3桌面客户端聊天程序
最新原创electron38+vite7+vue3 setup+pinia3+element-plus电脑端仿微信聊天EXE应用。
29 1
|
1月前
|
测试技术 API 开发工具
API文档该怎么写,开发效率能翻几倍?
API文档是提升开发效率与协作的关键因素,本文探讨了API文档的核心要素、常见类型及编写规范,并介绍了如何借助现代化工具如Apifox实现高效管理与维护,助力团队打造高质量的API文档体系。
|
1月前
|
算法 前端开发 API
京东比价项目开发实录:京东API接口(2025)
本文分享了作者在电商开发中对接京东商品详情API的实战经验,涵盖了申请权限、签名算法、限流控制、数据解析等常见问题,并提供了亲测有效的Python代码示例,帮助开发者避坑。
|
1月前
|
人工智能 API 定位技术
MCP 开发实战:手把手教你封装高德地图与 arXiv API
本教程为 MCP(Model Context Protocol)开发实战第二阶段,带你从零封装第三方 API 为 AI 模型可用工具。通过高德地图地理编码与 arXiv 论文检索两个实例,涵盖项目搭建、工具声明、资源定义、错误处理等核心内容,助你快速上手 MCP 开发并集成至 Claude 使用。
|
1月前
|
缓存 Java API
Spring WebFlux 2025 实操指南详解高性能非阻塞 API 开发全流程核心技巧
本指南基于Spring WebFlux 2025最新技术栈,详解如何构建高性能非阻塞API。涵盖环境搭建、响应式数据访问、注解与函数式两种API开发模式、响应式客户端使用、测试方法及性能优化技巧,助你掌握Spring WebFlux全流程开发核心实践。
380 0
|
2月前
|
缓存 安全 测试技术
精选API实战问答,解决开发中的疑难杂症
这是一份精选的 API 开发高频问题与解决方案合集,涵盖基础概念、设计规范、安全认证、调试测试、性能优化等十大主题。每日学习 1-2 个问题,结合实战应用,快速掌握 API 开发核心技能,高效解决开发中的各类疑难杂症,适合开发者构建系统化知识体系。