从渲染过程中要求电子对话是未定义的

Question

我正在使用电子,并且在用户点击按钮时尝试打开文件浏览器.从渲染过程中,我试图包含像这样的elctron.dialog包.

const dialog = require( 'electron' ).dialog;

console.log( dialog );

但是,控制台日志的结果是 undefined

我绝对相信我在渲染过程中所以我不确定为什么这不起作用.文档表明这是正确的做事方式,但似乎无法正常工作.

这是我的package.json档案

{
  "name": "my-app",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^0.4.1"
  }
}

这是我的main.js档案

    'use strict';

    var app = require( 'app' );
    var BrowserWindow = require( 'browser-window' );
    var ipc = require( 'ipc' );

    var mainWindow = null;

    app.on(
        'ready', function () {
            mainWindow = new BrowserWindow(
                {
                    frame : true,
                    height: 700,
                    width : 500
                }
            );

            mainWindow.loadUrl( 'file://' + __dirname + '/app/index.html' );

            mainWindow.openDevTools();
            mainWindow.on(
                'closed', function () {
                    mainWindow = null;
                }
            );

        }
    );

    ipc.on(
        'close-main-window', function () {
            app.quit();
        }
    );

这是渲染的流程文件

    // Add your index.js code in this file
    var ipc = require( 'ipc' );

    const dialog = require( 'electron' ).dialog;

    console.log( dialog );

这是控制台

这是不正确的？

Answer 1

在Renderer进程中,必须使用"远程"模块.

const dialog = require('electron').remote.dialog 

更多信息:
Electron Dialog API
Electron Remote API

Answer 2

我很惊讶没有一个答案提到这一点，但由于该模块已被删除，并且由于此处讨论的各种原因remote最好不要使用用户区，因此您将需要使用 ipc 让主进程显示对话框。remote

渲染器.js：

const { ipcRenderer } = require("electron");
ipcRenderer.invoke("showDialog", "message");

main.js：

const { ipcMain, dialog } = require("electron");
ipcMain.handle("showDialog", (e, message) => {
    dialog.showMessageBox(mainWindow, { message });
});

Answer 3

最新版本中的 Electron 改变了要求模块的方式。模块封装在电子名称空间中。

// for getting the electrons modules here the new method now i'm using 1.7.12 Electron version (i don't know what that will be in the future)
// you require electron first! it's a name space (module)
var electron = require("electron");
var remote = electron.remote; // you get all the subModuls directly as property (cool incapsulation)
//remote = require("remote") ===> will not work!!!!

// for dialog it's the same !! but we now use remote as modul
var dialog = remote.dialog;

您也可以使用此语法，以较少的编写导入多个模块并将它们收集在一起：

var {remote, ipcRenderer, someOtherModulFromElectron} = electron;

例如在 main.js（主进程）中，我们可以编写这样一个调用：

const electron = require('electron')
const {app, BrowserWindow, Menu} = electron;

代替：

const electron = require('electron')

// Module to control application life.
const app = electron.app

// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

//modul for bar menu
const Menu = electron.Menu

Answer 4

根据https://github.com/ Electron/remote
，远程模块在 Electron 12 中已被弃用，@electron/remote是替代品。

$ npm install --save @electron/remote

在main.js：

require('@electron/remote/main').initialize()

我还必须webPreferences为 BrowserWindow设置一些

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })

在renderer.js：

const {dialog} = require('@electron/remote')

function showError() {
    dialog.showErrorBox(...)
}

之后dialog为我工作。

Answer 5

经过几个小时的研究后，其他人向我指出，执行此操作的“新”方法（2016 年 4 月 15 日）如下。

var remote = require('remote');
var dialog = remote.require('dialog');

dialog.showOpenDialog({ 
  properties: [ 'openFile' ] }, function ( filename ) {
    console.log( filename.toString() );
  }
);

您必须要求remote，然后从远程要求对话框。看起来你不再需要要求electron