Cordova國際化

第1步- 安裝全球化插件

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

第2步 - 添加按鈕

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

第3步 - 添加事件監聽器

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

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

}

當我們按 LANGUAGE 按鈕，彈出框就會顯示在螢幕上。

步驟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按鈕，彈出框將顯示我們的區域標記。

步驟4C - Date函數

此功能用於根據用戶的語言環境和時區設置返回日期。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 按鈕來看當前的日期。

最後一個函數功能，將是根據客戶設備的設置和 ISO4217 貨幣代碼返回貨幣值。 

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

}

當點擊 CURRENCY 按鈕會觸發彈出框，顯示用戶的貨幣模式。