Поддержка интернационализации PhoneGap / Cordova - PullRequest
23 голосов
/ 16 января 2012

Я разрабатываю мобильное приложение с Phonegap и мне нужна интернационализация - отображать HTML-страницу на разных языках. Теперь я понимаю, что это не проблема PhoneGap - я должен интернационализировать веб-приложение.

  • Поддерживает ли какая-либо инфраструктура интернационализацию (например, jQuery Mobile)?
  • Можно ли использовать шаблонный подход, например, использовать файлы свойств и шаблон и генерировать HTML в процессе сборки? `
  • Если я использую подход из Бурбона (см. Ответы), как я могу переключить язык в соответствии с настройкой параметра?

С уважением, Кристиан

--- Редактировать -

Phonegap имеет хороший плагин Globalization начиная с 2.2.0. Он охватывает большую часть функциональности i18n. Проверьте документы http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

Ответы [ 9 ]

11 голосов
/ 15 февраля 2014

Я применил подход к этой проблеме, который позволяет другим предлагать языковые переводы для моего приложения.

Плюсы:

  • Использует "зрелые" веб-библиотеки.
  • Перевод из толпы
  • Нет нативного взлома
  • Использование шаблонов
  • Очень легко реализовать HTML / JS и легко тестировать
  • Поддерживает определение языка
  • Поддерживает направление текста (BiDi)
  • Нет нативных зависимостей, поэтому будет работать на Android / iOS / BB / WP yada yada ..
  • Тестируется в веб-браузере

Минусы:

  • Ваш проект должен быть открытым исходным кодом и соответствовать требованиям TranslateWiki
  • Немного сложно выполнить коммит Герриту, если вы из мира веток / слияний.

Я использовал руль для шаблонов и библиотеку html10n для обеспечения логики перевода, переведенные строки взяты из предоставленных сообществом файлов json.

TranslateWiki предоставляет реальные переводы с помощью краудсорсинга. Большую часть тяжелой работы над моей реализацией выполняет TranslateWiki, бесплатная служба сообщества с открытым исходным кодом от Wiki Media Foundation.

Руль и библиотека html10n мощные, созданы для Интернета и широко используются. Они оказались чрезвычайно полезными библиотеками для этой реализации.

Никакой собственный код или плагины не требуются.

index.html

<head>
  <script type="text/javascript" src="js/handlebars.js"></script>
  <script type="text/javascript" src="js/html10n.js"></script>
  <link rel="localizations" type="application/l10n+json" href="locales.json">
</head>
<body>
    {{html10n "helloWorld"}}
</body>

locales.json

{
  "fr":"locales/fr.json",
  "en":"locales/en.json"
}

локали / en.json

{
  "en":{
    "helloWorld":"Hello Cruel World"
  }
}

локали / fr.json

{
  "fr":{
    "helloWorld":"Hello Baguette World"
  }
}

index.js

Handlebars.registerHelper('html10n', function(str,a){
  return (html10n != undefined ? html10n.get(str) : str);
});

Для переключения между языками откройте в браузере консоль JavaScript и введите

html10n.localize("fr");

Для определения языка браузера требуется дополнительная логика, для этого я использую реализацию Etherpad.

var language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/);
if(language) language = language[1];
html10n.bind('indexed', function() {
  html10n.localize([language, navigator.language, navigator.userLanguage, 'en'])
})
html10n.bind('localized', function() {
  document.documentElement.lang = html10n.getLanguage()
  document.documentElement.dir = html10n.getDirection()
  // Then I display the index page using handlebars to render a template.
});

Вот и все, бесплатный взломанный рецепт для развертывания i18n в приложении Cordova.

9 голосов
/ 16 января 2012

Phonegap - это просто фреймворк, позволяющий отображать веб-страницы в собственном приложении и использующий некоторый плагин для подключения к аппаратным датчикам устройства. Поддержка интернационализации будет зависеть от вашего дизайна html / js.

Например, вы можете использовать:

/html/en/index.html
/html/fr/index.html
...

И назовите хорошую страницу в зависимости от языка пользователя.

Надеюсь, это поможет вам: -)

7 голосов
/ 31 мая 2012

Я сделал именно то, что предложил Бурбон, потому что это маленькое приложение и дублирование не было этим вопросом.Однако существуют шаблоны шаблонов, я думаю, что в основном используются усы .

. Я решил выбор языка следующим образом:

@Override
public void onCreate(final Bundle savedInstanceState)
{
    // ...
    String language = getValue("language", "de");
    if (language.equals("de")) {
        super.loadUrl("file:///android_asset/www/de/index.html", 1);
    }
    else {
        super.loadUrl("file:///android_asset/www/en/index.html", 1);
    }
}

private String getValue(final String key, final String defaultValue)
{
    SharedPreferences prefs = getSharedPreferences(
            getApplicationInfo().packageName, MODE_PRIVATE);
    return prefs.getString(key, defaultValue);
}

Как видите, япрочитайте значение для SharedPreferences.Я также создал плагин Phonegap для установки этого значения из кода JavaScript при каждом изменении языка пользователем.

5 голосов
/ 08 сентября 2014

Это мое ОЧЕНЬ ПРОСТОЕ решение.Я использую jQuery в своем приложении, затем добавляю class="lang" ко всем элементам, содержащим строку, которая должна быть переведена, и к тому же элементу я также добавляю:

  • data-lang = "variable"
  • data-lang-to = "receive" <необязательно>

например:

<input type="search" placeholder="Search..." class="lang" data-lang="search" data-lang-to="placeholder" />

это мой класс:

var localize={
    locals: {
        'it': {
            click_activation: 'clicca qui per ricevere il codice di attivazione',
            search: "Cerca..."
        },
        'en-us': {
            click_activation: 'click here to re-send the activation code',
            search: "Search User..."
        }
    },
    start: function(lang){
        lang=lang.toLowerCase();
        var langs=this.locals;
        $('.lang').each(function(){
            var txt=$(this).data('lang');
            var to=$(this).data('lang-to');
            if(txt!==''&&typeof langs[lang][txt]!=='undefined'){
                switch(to){
                    case 'text':
                        $(this).text(langs[lang][txt]);
                        break;
                    case 'placeholder':
                    case 'alt':
                    case 'title':
                        $(this).attr(to, langs[lang][txt]);
                        break;
                    case 'html':
                    default:
                        $(this).html(langs[lang][txt]);
                        break;
                }
            }
        });
    }
};

localize.start(lang); //use phonegap globalization to discover this one if you want
2 голосов
/ 25 января 2016

Если кто-то, как я, задается вопросом, почему нет готовых решений для такой простой задачи: jQuery.localize может решить ваши проблемы.

  1. Добавить <script type="text/javascript" src="jquery.localize.js"></script> кhtml-файл вашего индекса
  2. Добавьте теги для локализуемых html-объектов: <h1 data-localize="greeting"> Hello! </h1>
  3. Добавьте localization-ru.json в ваш проект:

    { "greeting": "Привет!" }

Я добавил его к system/localization/localization-ru.json.Суффикс ru - это язык файла (например, ru - русский).Вам, вероятно, понадобится localization-en.json, localization-de.json и т. Д .:

Добавление языковой загрузки и обновление html-страницы из 'deviceready' прослушивателя обратного вызова события:

$("[data-localize]").localize("system/localization/localization")

Для строк javascript локализация выглядит следующим образом:

$.localize.data.["system/localization/localization"]["greeting"];

Где "system/localization/localization" - путь к вашему localization.json из папки www, и вы, вероятно, напишите для него ярлык (первый и последний раз, когда вына самом деле нужно что-то кодировать).

2 голосов
/ 24 сентября 2013

Я выбрал другой подход, основанный на @ ChrLipp

super.loadUrl("file:///android_asset/www/index.html?lang=" + lang);

тогда у меня есть скрипт js, который загружает правильные файлы в зависимости от языка, указанного в строке запроса

(function() {
    var lang;
    try {
        lang = RegExp('[?&]lang=([^&]*)').exec(window.location.search)[1];
    } catch (ex) {
        lang = "es";
    }
    document
            .write(unescape("%3Cscript type='text/javascript' src='locale/angular-locale_"
                    + lang + ".js'%3E%3C/script%3E"));
    document
            .write(unescape("%3Cscript type='text/javascript' src='locale/i18n_"
                    + lang + ".js'%3E%3C/script%3E"));
})();

При таком подходе он легко масштабируется.

После написания этого ответа я нашел лучший способ, просто используя js:

lang = navigator.language.split('-')[0];

Разработчик Mozilla, навигатор

И это решает проблему написания кода для получения локали на другой платформе, такой как iOS.

Надеюсь, это поможет

1 голос
/ 17 ноября 2016

Я занимаюсь разработкой приложения Cordova-AngularJS. Я выбрал следующий простой подход. Воспользуйтесь услугой, чтобы сделать актуальный перевод:

angular.module('App.services.Localization', [])

.factory('__', ['$window', function(window){
  var lang = navigator.language.split('-')[0];
  console.log('lang: ' + lang);
  //default language
  var default_language = 'de';

  return function(string) {
      var lang_json = window['__' + lang];
      var loc_str = "";
      if(lang_json === undefined){
        //use default lang
        loc_str = window["__" + default_language][string];
      }else{
        loc_str = window["__" + lang][string];
      }

      return loc_str;
  };

}]);

Я включил JSON-объект в глобальную область окна для каждого языка, который я поддерживаю в своем приложении. Например:

var __de = {
  'Speisekarte' : 'Speisekarte',
  'Löschen'     : 'Löschen'
}

и

var __en = {
  'Speisekarte' : 'Menu',
  'Löschen'     : 'Delete'
}

Вы можете легко использовать один JS-файл на язык для хранения соответствующих JSON-объектов.

Таким образом, сервис может получить доступ к объектам, таким как

window['__' + lang]

и вернуть переведенную строку.

Теперь все, что нужно сделать, это внедрить Сервис и его метод -getString в каждый контроллер, который нуждается в локализации статических строк. Вы также должны сделать ссылку на локальную область видимости var, чтобы использовать локализацию в Template-Files.

Строки, которые установлены внутри контроллера, и строки в файлах-шаблонах переводятся через

__("stringToBeTranslated");

Вот пример контроллера:

angular.module('App.controllers.Menu', [
  'App.services.Localization'
])

.controller('MenuController', ['$scope', '__', function(scope, __) {

  //...
  //pass the Localization service __(string)-Method to the local scope to be used in Template-Files
  scope.__ = __;

  //...
}]);
1 голос
/ 29 марта 2013

Я не смог найти никакой основы для этого, поэтому я запустил свой собственный плагин. Я хотел написать только один HTML и позволить интернационализации произойти с strings.xml (сейчас меня интересует только Android).

Взгляните на это, оно может помочь вам: https://github.com/zeitos/i18nplugin

0 голосов
/ 30 июня 2016

Вы пробовали использовать ionic framework для того же самого?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...