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.