Cordova - Globalizzazione

Questo plugin viene utilizzato per ottenere informazioni sulla lingua locale degli utenti, data e fuso orario, valuta, ecc.

Passaggio 1: installazione del plug-in di globalizzazione

Aperto command prompt e installa il plugin digitando il seguente codice

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

Passaggio 2: aggiungere pulsanti

Aggiungeremo diversi pulsanti a index.html per poter chiamare diversi metodi che creeremo in seguito.

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

Passaggio 3: aggiungere ascoltatori di eventi

I listener di eventi verranno aggiunti all'interno getDeviceReady funzione in index.js per assicurarci che la nostra app e Cordova siano caricati prima di iniziare a usarlo.

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

Passaggio 4A - Funzione lingua

La prima funzione che stiamo utilizzando restituisce il tag della lingua BCP 47 del dispositivo del client. Noi useremogetPreferredLanguagemetodo. La funzione ha due parametri su Successo eonError. Stiamo aggiungendo questa funzione inindex.js.

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

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

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

Una volta premuto il pulsante LANGUAGE pulsante, l'avviso verrà visualizzato sullo schermo.

Passaggio 4B - Funzione locale

Questa funzione restituisce il tag BCP 47 per le impostazioni locali del client. Questa funzione è simile a quella che abbiamo creato prima. L'unica differenza è che stiamo usandogetLocaleName metodo questa volta.

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

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

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

Quando facciamo clic sul file LOCALE , l'avviso mostrerà il nostro tag locale.

Passaggio 4C - Funzione data

Questa funzione viene utilizzata per restituire la data in base alle impostazioni locali e di fuso orario del client. date parametro è la data corrente e options il parametro è facoltativo.

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');
   }
}

Ora possiamo eseguire l'app e premere DATE per vedere la data corrente.

L'ultima funzione che mostreremo è la restituzione dei valori di valuta in base alle impostazioni del dispositivo del cliente e al codice valuta ISO 4217. Puoi vedere che il concetto è lo stesso.

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

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

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

Il CURRENCY Il pulsante attiverà un avviso che mostrerà il modello di valuta degli utenti.

Questo plugin offre altri metodi. Puoi vedere tutto nella tabella qui sotto.

metodo parametri dettagli
getPreferredLanguage onSuccess, onError Restituisce la lingua corrente del client.
getLocaleName onSuccess, onError Restituisce le impostazioni locali correnti del client.
dateToString data, onSuccess, onError, opzioni Restituisce la data in base alle impostazioni locali e al fuso orario del cliente.
stringToDate dateString, onSuccess, onError, opzioni Analizza una data in base alle impostazioni del cliente.
getCurrencyPattern currencyCode, onSuccess, onError Restituisce il modello di valuta del cliente.
getDatePattern onSuccess, onError, opzioni Restituisce il modello di data del cliente.
getDateNames onSuccess, onError, opzioni Restituisce un array di nomi di mesi, settimane o giorni in base alle impostazioni del cliente.
isDayLightSavingsTime data, successCallback, errorCallback Utilizzato per determinare se l'ora legale è attiva in base al fuso orario e al calendario del cliente.
getFirstDayOfWeek onSuccess, onError Restituisce il primo giorno della settimana in base alle impostazioni del client.
numberToString numero, onSuccess, onError, opzioni Restituisce il numero in base alle impostazioni del cliente.
stringToNumber stringa, onSuccess, onError, opzioni Analizza un numero in base alle impostazioni del cliente.
getNumberPattern onSuccess, onError, opzioni Restituisce il modello numerico in base alle impostazioni del cliente.