Electron dialog 模块

dialog 模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验.

对话框例子,展示了选择文件和目录:

var win = ...;  // BrowserWindow in which to show the dialogconst dialog = require('electron').dialog;console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));

OS X 上的注意事项: 如果你想像sheets一样展示对话框,只需要在browserWindow 参数中提供一个 BrowserWindow 的引用对象.

方法

dialog 模块有以下方法:

dialog.showOpenDialog([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)

  • options Object

    • title String

    • defaultPath String

    • filters Array

    • properties Array - 包含了对话框的特性值, 可以包含 openFile, openDirectory, multiSelections and createDirectory

  • callback Function (可选)

成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined.

filters 当需要限定用户的行为的时候,指定一个文件数组给用户展示或选择. 例如:

{
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}

extensions 数组应当只包含扩展名,不应该包含通配符或'.'号 (例如 'png' 正确,但是 '.png' 和 '*.png' 不正确). 展示全部文件的话, 使用 '*' 通配符 (不支持其他通配符).

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(filenames) 展示.

注意: 在 Windows 和 Linux ,一个打开的 dialog 不能既是文件选择框又是目录选择框, 所以如果在这些平台上设置 properties 的值为 ['openFile', 'openDirectory'] , 将展示一个目录选择框.

dialog.showSaveDialog([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)

  • options Object

    • title String

    • defaultPath String

    • filters Array

  • callback Function (可选)

成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined.

filters 指定展示一个文件类型数组, 例子 dialog.showOpenDialog .

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(filenames) 展示.

dialog.showMessageBox([browserWindow, ]options[, callback])

  • browserWindow BrowserWindow (可选)

  • options Object

    • type String - 可以是 none, info, error, question 或 warning. 在 Windows, question 与 info 展示图标相同, 除非你使用 icon 参数.

    • buttons Array - buttons 内容,数组.

    • defaultId Integer - 在message box 对话框打开的时候,设置默认button选中,值为在 buttons 数组中的button索引.

    • title String - message box 的标题,一些平台不显示.

    • message String - message box 内容.

    • detail String - 额外信息.

    • icon NativeImage

    • cancelId Integer - 当用户关闭对话框的时候,不是通过点击对话框的button,就返回值.默认值为对应 cancel 或 no 标签button 的索引值, 或者如果没有这种button,就返回0. 在 OS X 和 Windows 上, Cancel button 的索引值将一直是 cancelId, 不管之前是不是特别指出的.

    • noLink Boolean - 在 Windows ,Electron 将尝试识别哪个button 是普通 button (如 Cancel 或 Yes), 然后再对话框中以链接命令(command links)方式展现其它的 button . 这能让对话框展示得很炫酷.如果你不喜欢这种效果,你可以设置 noLink 为 true.

  • callback Function

展示 message box, 它会阻塞进程,直到 message box 关闭为止.返回点击按钮的索引值.

如果 callback 被调用, 将异步调用 API ,并且结果将用过 callback(response) 展示.

dialog.showErrorBox(title, content)

展示一个传统的包含错误信息的对话框.

+

在 app 模块触发 ready 事件之前,这个 api 可以被安全调用,通常它被用来在启动的早期阶段报告错误. 在 Linux 上,如果在 app 模块触发 ready 事件之前调用,message 将会被触发显示stderr,并且没有实际GUI 框显示.


可使用的修饰符

  • Command 或者 Cmd 

  • Control 或者 Ctrl 

  • CommandOrControl 或者 CmdOrCtrl 

  • Alt

  • Option

  • AltGr

  • Shift

  • Super

可使用的键盘符

  • 0 - 9 (0 到 9)

  • A - Z (A 到 Z)

  • F1 - F24 (F1 到 F24)

  • 标点符号: ~, !, @, #, $, 等.

  • Plus

  • Space

  • Tab

  • Backspace

  • Delete

  • Insert

  • Return (or Enter as alias)

  • Up, Down, Left and Right (箭头)

  • Home 和 End 

  • PageUp 和 PageDown

  • Escape 或者 Esc

  • VolumeUp, VolumeDown 和 VolumeMute

  • MediaNextTrack, MediaPreviousTrack, MediaStop 和 MediaPlayPause

  • PrintScreen

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要讲解了“electron打包中的坑如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“electron...
这篇文章主要介绍“electron打包的坑如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“electron打包的坑如何...
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟...
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内,和之前的vue-cli搭建项目流程没有任何区别 GIT地址:https://github.com/SimulatedGREG/electron-vue 搭建项目:1.全局安装脚手架:npminstall--globalvue-cli
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron,并测试。如下图
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
前言本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览器打开,还是有人会用别的浏览器打开,这种情况通常我们会去做适配(前端),最近公司有需求
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装,使用npm安装的有问题(没有尝试),先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
来源:https:/ewsn.net/say/electron-asar.html 在electron中,asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下,这些代码逻辑,是放置在resource/app目录下面的,明文可见,这样的话,也就有了代码加密(asar打包)的需求 asar如何解密加密?electron的asar的
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
在electron-vue中使用了字体图标,但是打包成.exe文件后图标不显示,路劲问题把字体图标放到static目录下就可以了,静态图片也一样我原来放在其它地方不行改到static目录就可以了
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法:单独设置electron为淘宝镜像,npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装,不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题(就
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG:<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
一.什么是Electron?它和NW.js的区别是什么?Electron是GitHub开发的桌面应用开发框架,它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是:1.整合Chromium和Node.js的方式不同。在NW.js中,Chromium是直接被打补丁打进去
1.打开父子模态创建,<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#