代码之家 › 专栏 › 技术社区 › Tinwor

无法使用electronjs和jquery显示OpenDialog

electron jquery javascript

Tinwor · 技术社区 · 10 年前

我正在尝试使用electronjs创建一个简单的桌面应用程序。我的目标是打开 ShowOpenDialog 但(我不知道为什么)它什么也没打开。
树状图:

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

索引.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>

索引.js

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

主.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"
  }
}

2 回复 | 直到 10 年前

inukshuk 10 年前

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

作为一个最小的例子,尝试更换 对话 在索引中。js与 require('electron').remote.require('dialog') ; 然而,从长远来看,我建议改用IPC。

Farrel Athaillah 5 年前

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

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

索引.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
})

推荐文章

James.Alocard · Cypress给出“此浏览器或应用程序可能不安全”的谷歌身份验证

1 年前