使用 Electron jS 应用程序的应用程序启动器答案

【问题标题】：Application launcher using an Electron jS app使用 Electron jS 应用程序的应用程序启动器
【发布时间】：2020-12-21 03:57:05
【问题描述】：

我正在使用电子 JS 创建一个带有 HTML/CSS/JS 的应用程序启动器。

对于每个应用程序，我都有一个 a href 标记，它重定向到应用程序上的路径。

如果我在a href中放一个正常的链接，你就可以正常访问目标网站了。

如果我在a href 中放置一个可执行路径，则该链接不会打开应用程序。

我在 Firefox 中尝试了我的项目，幸运的是，通过使用这个插件 addons.mozilla.org/fr/firefox/addon/local-filesystem-links，我能够直接启动应用程序。

如何在 Electron JS 中从我的项目启动应用程序？我的意思是多个应用程序，而不仅仅是一个。

<div class="1"><a href="file:///myPathToFile.exe">Application 1</a></div>
<div class="2"><a href="file:///myPathToFile2.exe">Application 2</a></div>

【问题讨论】：

标签： javascript node.js npm electron

【解决方案1】：

我认为您需要使用ipcMain 和ipcRenderer，使用函数从页面发送消息。

HTML

我认为您可以这样做，而不是使用 a 标签：

<div class="1">
<span onclick="openApp" value="file:///myPathToFile.exe">Application 1</span>
</div>

JS 脚本

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

function openApp(event) {
const path = event.target.value;
  IpcRenderer.sendSync('open-app', path)
}

在你的 Electron 文件中：

const { execFile } = require('child_process');
const { ipcMain } = require('electron');

ipcMain.on('open-app', (e, path) => {
  const child = execFile(path, {cwd: 'C:\\test\\'}, (error, stdout, stderr) => {
  if (error) {
    throw error;
  }
  console.log(stdout);
return stdout;
});
  e.returnValue = child;
});

从这里拿来的：

Run a non electron executable inside electron window

希望你不要放弃，你的项目看起来很酷。如果不清楚，请告诉我

【讨论】：

感谢您的回复！但我试过了，不幸的是没有奏效。我完全尝试了您的代码，除了可执行文件的路径之外没有任何修改。我也尝试在 span 上使用“a href”标签。我使用 href 的原因是因为我有其他 CSS 和 JS 代码基于它。
另外span 标签是不可点击的。

【解决方案2】：

由于您使用的是电子，因此您也可以使用 nodeJS api。 NodeJS 有 child_process 模块，可以完成你想要的。

这是一个例子

const childProcess = require("child_process");

// Attach event handler to all application links. You can change the selector to something more precise if you wish.
document.querySelectorAll("a[href]").forEach(elem => {
    elem.addEventListener("click", () => {
        childProcess.spawn(elem.getAttribute("href")); // spawns the executable with the href on the a element

    // WARNING: Doing something like this could potentially expose your computer to hackers.
    // Make sure the href attributes are trusted and do not come from the web. Hackers could potentially use the href attribute to launch malware on your computer.
    });
});

有关child_process 模块的更多详细信息：https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options

编辑：确保在加载 DOM 节点后执行此操作。你可以这样做来实现它：

$(() => {
    // code over here
});

或者如果不使用 jquery：

window.addEventListener('DOMContentLoaded', () => {
    // code over here
});

【讨论】：

感谢您的回复。我可能错了，但我将此代码放在我的 script.js 文件中但没有用。我也在 main.js 中初始化了 childProcess，什么也没有。
@Seito Kimbo 确保在加载所有 dom 元素后执行此脚本。您可以为此使用 jquery：$(() => { /* code here */ });.
对不起，我不太明白你的意思：/。如果您有任何修改，您可以直接编辑您的帖子吗？
我不认识，但它不起作用。我将不得不感谢你的努力。我想我只是不知道该放在哪里。我尝试将您的代码放在 main.js 和 script.js 中，但都没有奏效。

【解决方案3】：

如果您必须使用默认窗口的程序启动您的应用程序/文件，那么您可以使用 shell.openPath，下面是工作代码-

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<div class="1"><a href="#" onclick="openFile('C:\\folder\\path_to_exe')">Application 1</a> 
</div>
<script>
    function openFile(filepath){
    const shell = require('electron').shell;
    shell.openPath(filepath);
    }
    </script>
 </body>
 </html>

注意 - 不要在路径中使用正斜杠，为此使用双反斜杠。

【讨论】：

是的，我想用 Windows 正常打开它们。问题是，如何将函数关联到我拥有的每个 a href 标记？
您是否能够提醒或控制台记录您传递给函数的文件路径？
很抱歉我没明白你的意思..
你能重现这个字符串输出吗？
使用类似“E://workstation//app.exe”格式的文件路径，即不要使用反斜杠，而是使用正斜杠。