Cordova - 全球化

此插件用于获取有关用户语言环境、日期和时区、货币等的信息。

步骤 1 - 安装全球化插件

打开命令提示符并输入以下代码安装插件

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

步骤 2 - 添加按钮

我们将向 index.html 添加几个按钮,以便能够调用我们稍后将创建的不同方法。

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

步骤 3 - 添加事件监听器

事件监听器将添加到 index.js 文件中的 getDeviceReady 函数内,以确保我们的应用和 Cordova 在我们开始使用之前已加载。

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

步骤 4A - 语言函数

我们使用的第一个函数返回客户端设备的 BCP 47 语言标签。我们将使用 getPreferredLanguage 方法。该函数有两个参数 onSuccess 和 onError。我们将在 index.js 中添加此函数。

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '
');
   }

   function onError(){
      alert('Error getting language');
   }
}

一旦我们按下 LANGUAGE 按钮,警报就会显示在屏幕上。

Cordova 全球化语言

步骤 4B - 区域设置函数

此函数返回客户端本地设置的 BCP 47 标签。此函数与我们之前创建的函数类似。唯一的区别是我们这次使用的是 getLocaleName 方法。

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

当我们点击 LOCALE 按钮时,警报将显示我们的语言环境标签。

Cordova Globalization Locale

步骤 4C - 日期函数

此函数用于根据客户端的语言环境和时区设置返回日期。date 参数是当前日期,options 参数是可选的。

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

我们现在可以运行应用程序并按 DATE 按钮查看当前日期。

Cordova Globalization Date

我们将展示的最后一个函数是根据客户端的设备设置和 ISO 4217 货币代码返回货币值。您可以看到概念是相同的。

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '
' +
         'code: '     + pattern.code     + '
' +
         'fraction: ' + pattern.fraction + '
' +
         'rounding: ' + pattern.rounding + '
' +
         'decimal: '  + pattern.decimal  + '
' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

CURRENCY按钮将触发警报,向用户显示货币模式。

Cordova Globalization Currency

此插件提供其他方法。您可以在下表中看到所有内容。

方法 参数 详细信息
getPreferredLanguage onSuccess、onError 返回客户端的当前语言。
getLocaleName onSuccess、onError 返回客户端当前的语言环境设置。
dateToString date、onSuccess、onError、options 根据客户端的语言环境和时区返回日期。
stringToDate dateString、onSuccess、onError、options 根据客户端的设置解析日期。
getCurrencyPattern currencyCode、onSuccess、onError 返回客户端的货币模式。
getDatePattern onSuccess、onError、options 返回客户端的日期模式。
getDateNames onSuccess、onError、options 根据客户端的设置返回月份、星期或日子的名称数组。
isDayLightSavingsTime date、successCallback、errorCallback 用于根据客户端的时区和日历确定夏令时是否有效。
getFirstDayOfWeek onSuccess, onError 根据客户端设置返回一周的第一天。
numberToString number, onSuccess, onError, options 根据客户端设置返回数字。
stringToNumber string、onSuccess、onError、options 根据客户端的设置解析数字。
getNumberPattern onSuccess、onError、options 根据客户端的设置返回数字模式。