electron踩坑之dialog中的callback解决

踩坑分析

之前版本使用dialog时选择文件时，可以加入callback，来获取被选择文件的路径，而electron10更新后发生了改动，采用了Promise对象来获取结果。

electron 10之前我们获取文件路径，只需加入callback即可，也就是下述写法，且之前返回的data结果直接是文件的路径。

openDialogDom.onclick = function(){

  remote.dialog.showOpenDialog({
    properties:['openFile']

  },function(data){
    console.log(data)
  })

}

解决

electron10之后，写项目时我发现callback无效，在之前的踩坑经历来说，我觉得又是因为版本更新所带来的结果，查看官方文档，又带给了我踩坑结束的收获。

可以看出在该方法的返回值变为了Promise对象，且在Promise对象中增加了cancele，filePaths，bookmarks属性，此时我们要想获取被选中的文件的路径，也需要与原先未更新版本前有着不一样的改变，也就是如下写法。

openDialogDom.onclick = function(){

  remote.dialog.showOpenDialog({
    properties:['openFile']

  }).then(res => {
    console.log(res.canceled)
    console.log(res.filePaths)
  })

}

问题解决，踩坑完毕。

到此这篇关于electron踩坑之dialog中的callback解决的文章就介绍到这了,更多相关electron dialog callback内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决npm安装Electron缓慢网络超时导致失败的问题

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,小编碰到npm安装Electron缓慢网络超时导致失败情况,下面我们来看看. 1. npm源过慢的话,可以把源切到国内的淘宝的镜像上. npm config set registry https://registry.npm.taobao.org 2. 到electron的国内镜像下载最新的安装包,主要看好自

  • 从零开始用electron手撸一个截屏工具的示例代码

    最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP.作为一个聊天工具,截屏可以说是一个必备功能了.不过遗憾的是没有找到很成熟的库来用,也可能是打开方式不对,总之呢没看到现成的,于是就想从头撸一个简单的截图工具.下面就进入正题吧! 思路 electron 提供了截取屏幕的 API,可以轻松的获取每个屏幕(存在外接显示器的情况)和每个窗口的图像信息. 把图片截取出来,然后创建一个全屏的窗口盖住整个屏幕,将截取的图片绘制在窗口上,然后再覆盖一层黑色半透明的元素,看起来

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • Electron 如何调用本地模块的方法

    Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1

  • electron 如何将任意资源打包的方法步骤

    如何打包资源 只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了. 那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢? 直接看下 packages.json 里面吧. { "name": "....", "version"

  • electron-vue开发环境内存泄漏问题汇总

    package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plu

  • Electron 调用命令行(cmd)

    因为最近的项目需求,需要在 Electron 客户端启动的时候启动 nginx 服务,所以研究了一下怎么在 Electron 调用 命令行. 因为 Electron 基于 Chromium 和 Node.js,可以直接使用 Node.js 的 API 和一些包.目前研究有以下两种方法: child_process child_process是 Node.js 的内置模块,该模块提供了衍生子进程的能力. 实现代码: const exec = require('child_process').exe

  • 详解Webpack实战之构建 Electron 应用

    Electron可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的. Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互. 当你在 Electron 应用中的一个窗口操作时,实际上是在操作一个网页.当你的操作需要通过操作系统去完成时,网页会通过 N

  • electron demo项目npm install安装失败的解决方法

    electron demo项目npm install安装失败的解决方法

    electron官网提供的demo项目,在npm install 的时候总是报错显示安装失败, 解决办法:FQ即可成功安装. 以上这篇electron demo项目npm install安装失败的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决npm安装Electron缓慢网络超时导致失败的问题

  • electron踩坑之dialog中的callback解决

    踩坑分析 之前版本使用dialog时选择文件时,可以加入callback,来获取被选择文件的路径,而electron10更新后发生了改动,采用了Promise对象来获取结果. electron 10之前我们获取文件路径,只需加入callback即可,也就是下述写法,且之前返回的data结果直接是文件的路径. openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFile'] },fu

  • electron踩坑之remote of undefined的解决

    之前的项目,引用electron的remote可以直接调用 electron.remote 来去使用,而近期使用electron却频繁报错???踩坑后我快速去查看了下官方文档,是不是electron进行了更新?果然不出所料,在electron 10中,修改了enableRemoteModule默认为false,我们需要手动将其修改为true. 此前版本中我们使用electron中的remote模块时,不需在主进程的窗口中加入 enableRemoteModule:true 参数才能够调用remo

  • Web Worker线程解决方案electron踩坑记录

    Web Worker线程解决方案electron踩坑记录

    目录 初始化项目 编写入口文件和 electron 插件 websocket websocket 服务 连接 websocket 服务 发送心跳 取消心跳 重新连接 其它优化 Worker 初始化项目 electron 开发时会遇到一对多的情况,在进行 websocket 通信时,如果接收到服务端多个指令时,而这个指令刚好需要占用线程,这个时候整个界面就会失去响应,那么我们就可以使用线程来解决这个问题. npm create vite@latest electron-worker 执行完后修改

  • ReactNative踩坑之配置调试端口的解决方法

    本文介绍了ReactNative踩坑之配置调试端口的解决方法,分享大家,顺便也给自己留个笔记 问题是这样的,由于公司的机器安装了安全软件,http://localhost:8081被占用了.(windows上配置环境真不易,最后一步还是被公司环境坑了) 所以导致按照教程配置完环境最后到真机上还是刷不出来界面 那么我们就这么放弃了吗?当然不,不然就白忙活了 分析问题:端口被占用,那我们换一个端口不就行啦,于是乎各种查阅资料,发现PackageManager(包管理服务)在启动的时候是可以配置端口的

  • vue实力踩坑 当前页push当前页无效的解决

    目录 vue当前页push当前页无效 vue push报错 TypeError: Cannot read property ‘push‘ of undefined 解决方法 vue当前页push当前页无效 当在当前页面中push页面跳转当前页,只是push的参数不同时,只能用字符串拼接,parames和query都不会起作用.不知道为什么... 比如说:当前页的url是 /invest/myinvest?page=1&day=0-30` 但是想点击的时候改变参数,所以就 this.$router

  • 踩坑记录关于"authentication failed "的解决方法

    报错 authentication failed这个报错的原因是“身份验证失败”,在target “send_emai” 的password属性我们有段注释.通过查阅的相关资料来看,很多人都说这里输入的是邮箱的密码,即使是给出正确的密码仍报错的情况下,还是让大家输入正确的密码. 其实不然,这里的“password”输入的并不是密码,而是一种授权码,专门作用于登陆 第三方邮件客户端授权的专用密码,适用于登录以下服务: POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

  • Java必踩的坑之方法中形参、实参传递

    首先亮明Java中方法参数传递的规则,这两点很重要: 如果实参是基本类型(包括包装类型)或者String,则实参不会变(传的是值): 如果实参是对象集合或者数组,则实参会改变(传的是引用). 上面这两条比较简单,笔者就不展开说了,这里只说一点,关于方法中引用的传递,很多人会踩坑,如下: 我们先以数组举例,如下代码,很简单的几行,大家猜一下会最终输出的结果是什么样子的呢? public class PassByValueDemo { public static void main(String[]

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    react.vue.angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件.生命周期.单向数据流.双向绑定等.这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react.vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想. 1.想要使用vue,我首先该怎么做? 想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide.

  • Angular 4.X开发实践中的踩坑小结

    本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.使用ngIf或者ngSwitch出错 在html文件中使用ngIf或者ngSwitch时,会解析出错,错误提示如下: Error: Template parse errors: Can't bind to 'ngSwitch' since it isn't a known property of 'div'. 这个是因为没有在此Component所在的Module中导入

  • SQL Server在AlwaysOn中使用内存表的“踩坑”记录

    SQL Server在AlwaysOn中使用内存表的“踩坑”记录

    前言 最近因为线上alwayson环境的一个数据库上使用内存表.经过大概一个星期监控程序发现了一个非常严重问题这个数据库的日志文件不会截断,已用空间一直在增加(存在定时的每个小时的日志备份),同时内存表数据库文件也无法删除,下面就介绍一下后面我的处理过程,话不多说了,来一起看看详细的介绍吧. 数据库:SQL Server2014 Enterprise Edition (64-bit) 删除文件 使用一个单独非alwayson环境的数据库测试. 一.创建内存表 ---创建内存表文件组 ALTER

随机推荐