Electron后端代码能做什么？(3)让我们做一些前端代码不能自己做的事情-运行shell命令。运行单个命令 Ele

让我们做一些前端代码不能自己做的事情-运行shell命令。

运行单个命令

Electron的后端是一个基本上节点进程，用于与浏览器通信。

现在，我们使用child_process.execSync，运行命令并捕获其输出。

我们需要做两件小事。首先，我们需要将Buffer转换为String-这不是自动完成的。因为，输出的内容可能是像图像这样的二进制文件，而不是有效的UTF-8 字符串。

let child_process = require("child_process")

let runCommand = (command) => {
  return child_process.execSync(command).toString().trim()
}

收集操作系统信息

让我们运行命令来获取系统信息：

let sysInfo = {
  os: runCommand("uname -s"),
  cpu: runCommand("uname -m"),
  hostname: runCommand("hostname -s"),
  ip: runCommand("ipconfig getifaddr en0"),
}

将此信息发送到前端

let toQueryString = (obj) => {
  let q = []
  for (let key in obj) {
    q.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
  }
  return q.join("&")
}

我们之前使用过loadFile函数，但它没有任何简单的方法来传递查询字符串。但是我们可以做一个小技巧，使用loadURL和file:protocol来代替。

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadURL(`file:${__dirname}/index.html?${toQueryString(sysInfo)}`)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

在前端解析

JavaScript有一种解析字符串的方法，但不是很方便。让我们用浏览器API来尝试一下：

let data = new URLSearchParams(document.location.search)

let info = document.querySelector("#info")

for (const [key, value] of data) {
  let p = document.createElement("p")
  p.append(`${key} = ${value}`)
  info.append(p)
}

现在，让我们添加到HTML：

<!DOCTYPE html>
<html>
  <body>
    <h1>System information!</h1>
    <div id="info"></div>
    <script src="app.js"></script>
  </body>
</html>

结果

代码：

index.js

let child_process = require("child_process")
let { app, BrowserWindow } = require("electron")

let runCommand = (command) => {
  return child_process.execSync(command).toString().trim()
}

let toQueryString = (obj) => {
  let q = []
  for (let key in obj) {
    q.push(`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
  }
  return q.join("&")
}

let sysInfo = {
  os: runCommand("uname -s"),
  cpu: runCommand("uname -m"),
  hostname: runCommand("hostname -s"),
  ip: runCommand("ipconfig getifaddr en0"),
}

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadURL(`file:${__dirname}/index.html?${toQueryString(sysInfo)}`)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

app.js

let data = new URLSearchParams(document.location.search)

let info = document.querySelector("#info")

for (const [key, value] of data) {
  let p = document.createElement("p")
  p.append(`${key} = ${value}`)
  info.append(p)
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>System information!</h1>
    <div id="info"></div>
    <script src="app.js"></script>
  </body>
</html>

原文：dev.to/taw/electro…