javascript - Electron js按钮单击不起作用

问题描述

我正在开发一个基于 Electron 的应用程序，我对它或 JavaScript 或 Node.js 没有太多经验。目前，我只想通过单击按钮打开一个窗口对话框。但是当我单击按钮时，什么也没有发生。

这是我的 package.json：

{
  "name": "Routingtable_Splitter",
  "version": "1.0.0",
  "description": "...",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "build --dir",
    "dist": "build",
    "package-win": "electron-packager . Splitter --overwrite --asar=true --platform=win32 --arch=ia32"
  },
  "build": {
    "win": {
      "target": "squirrel",
      "icon": "build/icon.ico"
    }
  },
  "author": "Robert Malleschitz",
  "license": "ISC",
  "devDependencies": {
    "dialog": "^0.3.1",
    "document": "^0.4.7",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.1",
    "electron-packager": "^12.1.0",
    "electron-winstaller": "^2.6.4",
    "fs": "0.0.1-security",
    "remote": "^0.2.6"
  },
  "dependencies": {}
}

这是我的 HTML 代码：

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Tool</title>
    </head>
    <body>
      <h1>Routingtable Splitter</h1>
      <main>
        <div>
          <div style="text-align:right;">
            <input type="text" placeholder="Bitte Routingtabelle laden" style="width: 260px" id="actual-file"/>
            <input type="submit" value="Routingtabelle laden" id="load-file"/>
            <br><br>
            <textarea id="editor" style="width: 400px; height: 300px;"></textarea><br />
            <input type="button" id="splitTable" value="Split" />
          </div>
        </div>
      </main>
    </body>
    <script src="renderer.js"></script>
 </html>

这是我的 main.js：

const {app, BrowserWindow} = require('electron')
const {Menu} = require('electron')
const {dialog} = require('electron')
const {remote} = require('electron')
const {document} = require('electron')
const {ipcMain} = require('electron')
var path = require('path')

var electronInstaller = require('electron-winstaller')

let win = null;

function createWindow () {
    win = new BrowserWindow({
    width: 1200,
    height: 1000,
    })

    win.loadFile('index.html')
}

const menuTemplate = [
{
    label: 'Datei',
    submenu: [
      {
          label: 'Lade', click: () => {getRoutingTable();}
      },
      {
          label: 'Beenden', click: () => {app.quit();}
      }
    ]
  }
];

function getRoutingTable(){
    dialog.showOpenDialog(
    {
        defaultPath: 'c./',
        filters: [
        { name: 'Text Files', extensions: ['txt'] }
    ],
        properties:['openFile']
  })
}

const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);

app.on('ready', createWindow)
{
    console.log('app')
}

ipcMain.on('ldFileBtn', function (event, arg) {
    console.log('ipcMain');
    getRoutingTable();
    event.sender.send("btnclick-task-finished", "yes");
});

这是我的 renderer.js：

const ipcRen = require('electron').ipcRenderer;
const ldFileBtn = document.getElementById('load-file');
ldFileBtn.addEventlistener('click', function() {
    console.log('btn_click')
    var arg = 'secondparam';
    ipcRen.send('ldFileBtn', arg);
});

为什么按钮不起作用？我希望有一个人可以帮助我。提前致谢。

标签： javascripthtmlnode.jsbuttonelectron

javascript - Electron js按钮单击不起作用

问题描述

解决方案

推荐阅读