作者：OBKoro1Electron原生对话框，electron原生对话框dialog，提供系统对话框，提供消息提示，消息提示操作，选择文件，保存文件等操作。今天就关注这篇文章，了解Electron。PS：本文及相关例子来自electron-playground。所有示例都可以立即运行。这是一个可以快速实验electron各种相关API的项目。你可以基于它学习和理解electron的相关API。1、消息提示dialog.showMessageBoxSync1.1消息提示const{dialog}=require('electron')dialog.showMessageBoxSync({type:'info',title:'这里是标题',message:'提示内容',detail:'Additionalinformation'})electron-playgroud运行示例：1.2消息提示和确认const{dialog}=require('electron')constres=dialog.showMessageBoxSync({type:'info',title:'这里是标题',message:'提示内容',detail:'附加信息',cancelId:1,//默认按esc键点击索引按钮defaultId:0,//默认高亮按钮下标buttons:['确认按钮','取消按钮'],//按钮按索引从右到左排序})console.log('操作结果',res,res===0?'点击确认按钮':'点击取消按钮')//根据按钮数组console.log('运行中有一个checkboxLabel单选按钮，需要使用showMessageBoxapi获取返回值')Electron-playgroud运行示例：1.3API说明dialog.showMessageBoxSync(browserWindow,options)显示一个消息框，它将阻塞进程直到消息框关闭。返回值是被点击的按钮的索引。参数：browserWindow可以指定一个父窗口作为模态窗口附加到。optionstype:String(optional)-"none"｜"info"｜"error"｜"question"不同的类型提示有不同的图标；title:String(optional)-消息框的标题，部分平台不显示，推荐使用message和detail；message:String-消息框的内容。detail:String(optional)-附加信息buttonsString[]-字符串按钮数组，按钮按索引从右到左排序，如果不指定，默认有“确定”按钮。defaultId:Integer(optional)-默认高亮按钮的下标，回车时自动选中该项cancelId:Integer(optional)默认按esc点击index按钮返回值类型：number:单击按钮对话框.showMessageBox(browserWindow,options)类似于dialog.showMessageBoxSync，不同的是这是一个异步方法，返回值是Promise类型；对话框可以指定一个复选框（checkbox），相应的字段也被添加到返回值中，同步方法（showMessageBoxSyc）无法获取到该字段；下面是一个带复选框的例子：const{dialog}=require('electron')constres=dialog.showMessageBox({type:'info',title:'这里是标题',message:'提示内容',detail:'附加信息',cancelId:1,//按esc键默认点击索引按钮defaultId:0,//默认高亮按钮下标checkboxLabel:'单选框内容',checkboxChecked:false,//是否显示查看单选按钮buttons:['确认按钮','取消按钮'],//按钮按索引从右到左排序})console.log('操作结果promise',res)//返回一个判断的promise结果electron-playgroud运行示例：2.选择文件和文件夹2.1选择文件实例const{dialog,app}=require('electron')constres=dialog.showOpenDialogSync({title:'Titleofthedialogwindow',//默认打开的路径，比如这里默认打开下载文件夹defaultPath:app.getPath('downloads'),buttonLabel:'确认按钮文案',//限制可以选择的文件类型filters:[//{名称：'图片'，扩展名：['jpg','png','gif']},//{name:'Movies',extensions:['mkv','avi','mp4']},//{name:'自定义文件类型',extensions:['as']},//{name:'AllFiles',extensions:['*']},],properties:['openFile','openDirectory','multiSelections','showHiddenFiles'],消息:'macfileselectortitle'})console.log('res',res)electron-playgroud运行示例：API描述dialog.showOpenDialogSync(browserWindow,options)参数：optionsdefaultPathString(optional)-设置对话框默认打开的路径，Avalidpath需要设置，否则不生效buttonLabelString(optional)-确认按钮的文本，为空时，将使用默认的labelfilters。默认情况下，可以选择所有文件类型。设置后，只能选择允许的文件类型。propertiesString[]（可选）openFile-允许选择文件openDirectory-允许选择文件夹multiSelections-允许多项选择。showHiddenFiles-在对话框消息中显示隐藏文件String(optional)-mac文件选择器的titletips：尝试修改options中的参数看看效果；返回值类型：String[]|undefined-用户Path选择的文件或文件夹；如果对话框被取消，返回undefined完整的API解释参考文档3.保存文件3.1实例const{dialog}=require('electron')constres=dialog.showSaveDialogSync({title:'对话框窗口的标题',defaultPath:'',//文件选择器打开哪个路径需要输入有效路径buttonLabel:'确认按钮文本',//限制可以选择的文件为某些类型filters:[//{name:'Images',extensions:['jpg','png','gif']},//{name:'Movies',extensions:['mkv','avi','mp4']},//{名称:'CustomFileType',extensions:['as']},//{name:'AllFiles',extensions:['*']},],nameFieldLabel:'ReplaceFile',//在前面"FileName"textfieldDisplayedtextcustomtagshowTagField:true,//显示标签输入框，默认值为trueproperties:['showHiddenFiles'],message:'macfileselectortitle'})console.log('res',res)Electron-playgroud运行示例：3.2API说明dialog.showSaveDialogSync(browserWindow,options)参数：optionsdefaultPathString(optional)-设置对话框默认打开的路径。需要设置有效路径，否则不生效。buttonLabelString(optional)-确认按钮的文本，当它为空时，将使用默认的标签过滤器。默认情况下，可以选择所有文件类型。设置后，只能选择允许的文件类型。propertiesString[]（可选）openFile-允许选择文件openDirectory-允许选择文件夹multiSelections-允许多项选择。showHiddenFiles-在对话框消息中显示隐藏文件String（可选）-mac文件选择器的标题返回值类型：String[]|undefined-用户选择的文件或文件夹路径；如果对话框被取消，则返回undefined；完整的API说明参考文档3.3不同场景选择已有文件，提示“文件夹中已有同名文件或文件夹，替换掉，会覆盖当前内容。”，点击确定返回文件地址选择一个不存在的文件，返回不存在文件的地址4.错误信息弹出dialog.showErrorBox该API可以在app模块触发ready事件前安全调用，通常用于启动时报错。在Linux上，在ready事件之前调用此API，消息将发送到stderr，并且不会出现GUI对话框。const{dialog}=require('electron')dialog.showErrorBox('错误标题','错误内容')console.log('API很简单方便报错')总结以上就是本文的内容,更多关于electron的知识，点击进入electron-playground库了解。希望通过这个项目，让大家更好的学习和理解electron，少走弯路。electron-playground是通过尝试electron的各种特性，达到我们快速入门和学习electron的目的，做到所见即所得。electron-playground系统整理了electron相关的API，方便您在实际业务中选择对应的app。electron-playground中的所有代码都可以立即运行并提供即时反馈。您可以下载我们的项目并试用。我相信你不会失望的。对电子感兴趣？请关注我们的开源项目ElectronPlayground，带你快速上手Electron。每周五我们都会挑选一些有趣的文章和新闻与大家分享。快来关注我们的小风周刊吧。我们是好未来小黑板的前端技术团队。我们会经常与您分享最新最酷的行业技术知识。欢迎知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园关注我们。
