📌  相关文章
📜  ElectronJS 中的地理信息

📅  最后修改于: 2021-10-29 04:27:47             🧑  作者: Mango

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

Electron 为我们提供了一种使用内置 app模块的 Instance 方法获取本机系统的国家/地区代码和语言代码的方法。 Electron 获取的国家/地区代码遵循某些ISO （国际标准组织）标准。因此，我们可以进一步使用这些代码使用 3rd 方 REST API 获取有关用户的国家和语言的更多信息，并以人类可读的格式将其呈现给用户。此特定功能对于检测语言、添加i18n国际化以及获取特定于国家/地区的信息（例如Currency ）非常有用。本教程将演示如何在 Electron 中获取国家和语言信息。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

  • 项目结构：

项目结构

Electron 中的地理信息：应用程序模块是Main Process 的一部分。为了在Renderer Process 中导入和使用app模块，我们将使用 Electron远程模块。有关远程模块的更多详细信息。
示例：按照给定的步骤在 Electron 中获取国家和语言信息。

  • 第 1 步：按照 ElectronJS 中的动态样式中给出的步骤设置基本的电子应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。我们将继续使用相同的代码库构建我们的应用程序。此外，使用npm安装 axios包。这个包是一个基于 Promise的 HTTP 客户端。它用于对 REST API 进行 HTTP 调用。我们将使用这个包来获取用户的地理信息。有关 axios 的更多信息。 
npm install axios --save
  • 还要执行 package.json文件中提到的必要更改以启动电子应用程序。
    包.json： 
{
  "name": "electron-local",
  "version": "1.0.0",
  "description": "Locales in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "electron": "^8.3.0"
  }
}
  • 输出：此时，我们的基本电子应用程序已设置。启动应用程序后，我们应该会看到以下结果。

  • 第 2 步：在 index.html和index.js文件中添加以下代码片段，用于在 Electron 中获取语言和国家信息。
    index.html：在该文件中添加以下代码段。 Detect Information in Electron 按钮还没有任何与之相关的功能。要更改此设置，请在index.js文件中添加以下代码片段。
html

  Language and Country Information in Electron


  

javascript
const electron = require("electron");
const axios = require("axios");
  
// Importing app Module using Electron remote
const app = electron.remote.app;
  
var detect = document.getElementById("detect");
detect.addEventListener("click", () => {
    var locale = app.getLocale();
    var country = app.getLocaleCountryCode();
  
    console.log("Locale Detected - ", locale);
    console.log("Country Detected - ", country);
  
    // Making an HTTP GET REST API call
    axios.get("https://restcountries.eu/rest/v2/alpha/"
              + country).then((res) => {
        console.log(res);
        console.log("Country - ", res.data.name);
    });
});

  • index.js：在该文件中添加以下代码段。

javascript 

const electron = require("electron");
const axios = require("axios");
  
// Importing app Module using Electron remote
const app = electron.remote.app;
  
var detect = document.getElementById("detect");
detect.addEventListener("click", () => {
    var locale = app.getLocale();
    var country = app.getLocaleCountryCode();
  
    console.log("Locale Detected - ", locale);
    console.log("Country Detected - ", country);
  
    // Making an HTTP GET REST API call
    axios.get("https://restcountries.eu/rest/v2/alpha/"
              + country).then((res) => {
        console.log(res);
        console.log("Country - ", res.data.name);
    });
});

代码中用到的app模块的所有Instance方法的详细解释如下。有关应用程序模块的更多详细信息。

  • app.getLocale()该方法用于返回当前应用程序的Locale（语言代码）。它使用 Chromium 的l10n_util库从本机系统获取语言环境。对于此方法返回的所有可能值。此方法不接受任何参数，它返回一个带有当前检测到的语言环境的字符串值。在Windows 上，此方法只能在app模块的 ready事件发出后使用。所有操作系统环境都支持此方法。
    注意：我们还可以使用 Electron 中的命令行开关来设置自定义语言环境。我们可以通过使用 app模块的 CommandLine属性或在启动 Electron 应用程序时更改 package.json的启动脚本，在应用程序启动时简单地传递命令行开关。我们可以使用–lang命令行开关来设置自定义语言环境。
    package.json：在该文件中进行以下更改。 
"scripts": {
  "start": "electron --lang=hi . "
},
  • 如果我们现在使用app.getLocale()方法，它将返回自定义语言环境的值。有关 app.getLocale()方法的更多详细信息。
  • app.getLocaleCountryCode()此方法用于返回用户操作系统的区域设置，由两个字母组成的ISO 3166国家/地区代码。该值是从本机 OS API 获取的。此方法返回带有检测到的国家/地区代码的字符串值。当此方法无法使用本机 OS API 检测国家/地区代码时，它将返回一个空字符串。此方法不接受任何参数。有关 app.getLocaleCountryCode()方法的更多详细信息。在我们的代码中，我们使用这个 Country Code 值来使用 3rd Party REST API 获取地理信息。所有操作系统环境都支持此方法。

输出：