web-dev-qa-db-ja.com

レンダリングプロセスからの電子ダイアログの要求は未定義です

Electronを使用していて、ユーザーがボタンをクリックしたときにファイルブラウザーを開こうとしています。レンダリングプロセスから、次のような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 );

これはコンソールです

これは間違っていますか?

16
Edgar Martinez

数時間調べた後、 他の誰か は、これを行う「新しい」方法(4/15/16)は次のとおりであることを指摘しました。

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

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

remoteを要求してから、リモートのrequireダイアログから要求する必要があります。 electronは必要なくなったようです

2
Edgar Martinez

レンダラープロセスでは、リモートモジュールを使用する必要があります。

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

より詳しい情報:
電子ダイアログAPI
Electron Remote API

29
Philip

最新バージョンのエレクトロンは、モジュールを必要とする方法を変更しました。モジュールは、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
4
Mohamed Allal

このコードは、htmlファイルのスクリプトで機能します。

const remote = require('electron').remote 

const dialog = remote.dialog;

dialog.showErrorBox('Error title', 'error')
1
D.Richard

次の構文を使用して、electronから直接取得できます。

const electron = require('electron')
const {dialog} = electron;

そして、必要なダイアログメソッドを以下のように呼び出すことができます。

dialog.showOpenDialog({ properties: ['openFile'] }, (filename) => {
  console.log(filename.toString());
});
0
kgangadhar