无法使用 electronjs 和 jquery 显示 OpenDialog答案

【问题标题】：Unable to showOpenDialog using electronjs and jquery无法使用 electronjs 和 jquery 显示 OpenDialog
【发布时间】：2016-04-26 23:39:46
【问题描述】：

我正在尝试使用 electronjs 创建一个简单的桌面应用程序。我的目标是打开ShowOpenDialog，但由于（我的原因不明）它什么也没有打开。
树视图：

sample app
 |-index.html
 |-js
   |--jquery.js
   |--index.js
 |-main.js
 |-package.json

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <br />
    <button id="openFile">Open</button>
    <script>
        window.$ = window.jQuery = require('./js/jquery.js');
    </script>
    <sctipt src ="./js/index.js"></sctipt>
</html>

index.js

$(document).ready(function() {    
    $("#openFile").click(function(){
        dialog.showOpenDialog(function (fileNames) {
        }); 
    })    
})

main.js

'use strict';
const electron = require('electron');
const dialog = require('electron').dialog;
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

还有 package.json

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  }
}

【问题讨论】：

标签： javascript jquery electron

【解决方案1】：

您在主进程中需要dialog，但尝试在渲染器进程中使用它。这是行不通的。您应该使用remote 模块获取对主进程的引用'dialog 或使用ipc 模块向主进程发送消息以打开对话框。

作为一个最小示例，尝试将 index.js 中的 dialog 替换为 require('electron').remote.require('dialog')；但是，从长远来看，我建议改用 IPC。

【讨论】：

【解决方案2】：

你不能仅仅威胁渲染器进程作为主进程

你可以像这样使用远程或使用ipc

index.js

const electron = require("electron")
const ipc = electron.ipcRenderer

$(document).ready(function() {    
    $("#openFile").click(function(){
        ipc.send("openF")
    })    
})

在 main.js 中

添加

const ipc = electron.ipcMain
ipc.on("openF", function(){
  const { dialog } = require('electron')
  dialog.showOpenDialog({title: "Open File",properties : ['openFile']}).then(result =>{
    mainWindow.webContents.send("filepaths", result.filePaths);

})

哦，是的，你需要 index.js 上需要的文件路径

ipcRenderer.on("filepaths", function(event, message) {
  if(message == undefined) return
  else{
    console.log(message); // Logs filepaths

    if(fl !== ""){
     console.log("no filepath found")
    }
}
// if you wanna open file use fs
})

【讨论】：