Electron渲染进程引入dialog问题

项目场景:

最近开始学习electron,学到dialog后,一直卡着,无法实现API文档中的弹窗方法。经过半天百度和翻阅材料,终于找到解决方法。


问题描述

官网的dialog例子是这样的:

const { dialog } = require('electron')
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

如果你按照以上例子复制到渲染进程,100%会失败。该例子只能在主进程中使用。还是怪我自己,没有好好看文档。dialog文档第一句就写明了进程:主进程。而且渲染进程api文档没有记录写法,导致新手容易迷失>.<


原因分析:

其实关于该问题,我感觉最核心问题是官网文档没有较为友好的引导,。
而且网上的解决方案普遍偏旧,我使用electron的版本是v18.2.3


解决方案:

好了,言归正传,怎样才能在渲染进程中使用dialog呢?

  • 老文档方法,引用改为
const { dialog } = require('electron').remote
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

以上方法也是不行的。经过翻阅Electron文档,里面有一栏目References->重点更改,这里明确表明了在Electron 14中已经废弃了remote了,需要使用

//渲染进程
const { dialog } = require('@electron/remote')
//主进程引入
require('@electron/remote/main').initialize()

如果使用@electron/remote需要使用npm按照

npm install --save @electron/remote

经过以上方法,应该可以解决大部分人的问题了。很不幸,我就是大部分人之外。。。于是我接着翻阅各种资料,再在主程序配置了以下两个地方即可

  • main.js
function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,//增加该配置,默认是false,新版本不能使用remote

        }
    })
    mainWindow.loadFile('index.html')

    //增加该配置
    require('@electron/remote/main').enable(mainWindow.webContents)

}

经过以上配置~应该可以顺利跑通dialog例子

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值