使用 Electron 獲取應用和用戶系統信息

xuxueli 發布于2019-08-21 16:58 / 3934人閱讀

摘要：使用獲取應用和用戶系統信息此系列文章的應用示例已發布于可以或下載后運行查看歡迎使用幾個和模塊您可以收集有關用戶系統應用程序或屏幕的信息相關文檔的鏈接位于下面的示例中獲取應用信息支持進程主進程的模塊可用于獲取應用程序在用戶計算機上的位置

使用 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 支持, 謝謝.

GPU云服務器云服務器獲取用戶信息獲取用戶信息html electron使用webrtc 用戶信息管理系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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