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. |