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檔案的DeviceReady函式裡面,以確保我們開始使用它之前,應用程式被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 + '\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 按鈕會觸發彈出框,顯示使用者的貨幣模式。

這個外掛提供了其他方法。可以看到如下面的表中。
方法 引數 描述
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
根據用戶端的設定,返回數值的模式