使用 Electron 获取应用和用户系统信息

xuxueli 发布于2019-08-21 16:58 / 3602人阅读

摘要：使用获取应用和用户系统信息此系列文章的应用示例已发布于可以或下载后运行查看欢迎使用几个和模块您可以收集有关用户系统应用程序或屏幕的信息相关文档的链接位于下面的示例中获取应用信息支持进程主进程的模块可用于获取应用程序在用户计算机上的位置

使用 Electron 获取应用和用户系统信息

此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .

使用几个 Node.js 和 Electron 模块, 您可以收集有关用户系统, 应用程序或屏幕的信息.

相关文档的链接位于下面的示例中.

获取应用信息

支持: Win, macOS, Linux | 进程: Both

主进程的 app 模块可用于获取应用程序在用户计算机上的位置.

在这个示例中, 要从渲染器进程获取信息, 我们使用 ipc 模块向主进程发送一条消息, 来请求应用程序的路径.

查看更多应用模块文档.

渲染器进程

const ipc = require("electron").ipcRenderer

const appInfoBtn = document.getElementById("app-info")

appInfoBtn.addEventListener("click", function () {
  ipc.send("get-app-path")
})

ipc.on("got-app-path", function (event, path) {
  const message = `当前应用程序位于: ${path}`
  document.getElementById("got-app-info").innerHTML = message
})

主进程

const app = require("electron").app
const ipc = require("electron").ipcMain

ipc.on("get-app-path", function (event) {
  event.sender.send("got-app-path", app.getAppPath())
})

获取版本信息

支持: Win, macOS, Linux | 进程: Both

process 模块内置在 Node.js 中（因此您可以在主进程和渲染器进程中使用此模块）, 而在 Electron 应用程序中, 此对象还有一些更有用的属性.

下面的示例将获取应用程序正在使用的 Electron 版本.

查看更多进程文档.

渲染器进程

const versionInfoBtn = document.getElementById("version-info")

const electronVersion = process.versions.electron

versionInfoBtn.addEventListener("click", function () {
  const message = `当前应用正在使用的 Electron 版本: ${electronVersion}`
  document.getElementById("got-version-info").innerHTML = message
})

高级技巧

查找 Chromium, Node.js 和 V8 的版本.

Electron 还在 process.versions 对象中包括 Chromium, Node.js 和 V8 的版本. 您可以通过在 Electron 应用中打开开发人员工具并键入 process.versions 来快速查看.

// 返回正在使用的 Chromium 版本
process.versions.chrome
// 返回正在使用的 V8 版本
process.versions.v8
// 返回正在使用的 Node 版本
process.versions.node

获取系统信息

支持: Win, macOS, Linux | 进程: Both

Node.js 的 os 模块提供了有关用户操作系统的有效信息. 它内置在 Node.js 中, 可以在主进程和渲染器进程中使用.

在下面的示例中, 我们通过模块返回主目录的位置.

在浏览器中查看完整 os 文档

渲染器进程

const os = require("os")
const homeDir = os.homedir()

const sysInfoBtn = document.getElementById("sys-info")

sysInfoBtn.addEventListener("click", function () {
  const message = `当前系统主目录是: ${homeDir}`
  document.getElementById("got-sys-info").innerHTML = message
})

获取屏幕信息

支持: Win, macOS, Linux | 进程: Both

Electron 的 screen 模块可以获取有关屏幕大小, 显示, 光标位置等信息. 在下面的示例中, 我们将获取所使用的显示器的尺寸.

在浏览器中查看完整 screen 文档

渲染器进程

const electronScreen = require("electron").screen

const screenInfoBtn = document.getElementById("screen-info")
const size = electronScreen.getPrimaryDisplay().size

screenInfoBtn.addEventListener("click", function () {
  const message = `当前屏幕是: ${size.width}px x ${size.height}px`
  document.getElementById("got-screen-info").innerHTML = message
})

高级技巧

尺寸差异.

示例中的 .size 方法返回屏幕的原始尺寸, 但由于系统菜单栏, 这可能不是您的应用程序的实际可用空间.

要获取可用屏幕空间的大小, 请使用 .workAreaSize 方法. 而使用 .workArea 方法将返回坐标以及可用屏幕空间的尺寸.

如果这边文章对您有帮助, 感谢下方点赞或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.

私有云服务器托管获取用户信息获取用户信息html electron使用webrtc 用户信息管理系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88972.html

Electron入门介绍

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

wing324 2019-08-21 18:41 评论0 收藏0
一口气完成electron的入门学习

摘要：目前类似的工具有，等。在渲染进程中，直接调用原生的接口是十分危险的。这里介绍一种，通过和对象，以消息的方式进行通信。主进程获得消息后，通过返回信息。另外，还提供了一种同步的消息传递方式。打包完成功能代码后，我们需要将代码打成可运行的包。介绍目前，使用前端技术开发桌面应用已经越来越成熟，这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron，NW.js等。这里我们着...

Ethan815 2019-08-22 11:01 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
基于electron制作一个node压缩图片的桌面应用

摘要：压缩图片桌面应用基于制作一个压缩图片的桌面应用下载地址项目源码准备工作我们来整理一下我们需要做什么压缩图片模块获取文件路径桌面应用生成压缩图片我们需要使用这个库来压缩图片，这里我们把这个库封装成压缩模块。压缩图片桌面应用imagemin-electron 基于electron制作一个node压缩图片的桌面应用下载地址：https://github.com/zenoslin/imag...

bigdevil_s 2019-08-26 13:30 评论0 收藏0
用 Electron 打造 Win/Mac 应用，从「代码」到可下载的「安装包」，可能比你想得麻烦一

摘要：三配置环节目的一是为之后的环节初始化工作流参数，二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数，初始化工作参数，填充配置文件，把配置文件和相关依赖文件导入到文件夹内合适的首发于酷家乐前端博客，作者@摘星（segmentfault @StinsonZhao）我们能从很多地方学习到怎么起一个 Electron 项目，有些还会介绍怎么打包或构建你的代码，但距离「真正地...

LdhAndroid 2019-08-21 17:30 评论0 收藏0