Question

我正在使用Phonegap开发移动应用程序，我需要国际化 - 显示不同语言的html页面。我现在明白这不是Phonegap问题 - 我必须将Web应用程序国际化。

是否有任何框架支持国际化（例如jQuery Mobile）？
是否可以使用模板方法，例如使用属性文件和模板并在构建过程中生成HTML？`
如果我使用Bourbon的方法（参见答案），我如何切换每个选项设置的语言？

亲切的问候，基督徒

--- 修改 -

自2.2.0起，Phonegap拥有一个不错的全球化插件。它涵盖了很多i18n功能。查看文档http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

Answer 1

I took an approach to this problem that allows others to contribute language translations for my application.

优点：

使用“网络成熟”库
Crowd Sourced Translations
没有原生黑客
使用模板
非常容易实现HTML / JS并且易于测试
支持语言检测
支持文字方向（BiDi）
根本没有Native依赖，因此适用于Android / iOS / BB / WP yada yada ..
可在网络浏览器中测试

缺点：

您的项目需要是开源的，并且符合TranslateWiki的要求
如果你来自分支/合并世界，实现对Gerrit的提交有点棘手。

我使用手柄进行模板化，html10n库提供翻译逻辑，翻译后的字符串来自社区贡献的json文件。

TranslateWiki通过众包的力量提供实际翻译。我实现的大部分工作都是由TranslateWiki完成的，TranslateWiki是来自Wiki Media Foundation的免费开源社区服务。

Handlebars和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.
});

就是这样，在您的Cordova应用程序中推出i18n的无黑板配方。

Answer 2

Phonegap只是一个框架，能够在本机应用程序中显示网页，并使用一些插件连接设备的硬件传感器。国际化的支持将取决于您的html / js设计。

例如，您可以使用：

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

根据用户的语言调用好页面。

希望这会对你有所帮助： - ）

Answer 3

我完全按照Bourbon的建议，因为它是一个小应用程序，重复不是那个问题。但是有模板框架，我认为最常用的是mustache。

我解决了这样的语言选择：

@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代码中设置此值。

Answer 4

这是我非常简单的解决方案。我在我的APP中使用jQuery，然后将class="lang"添加到包含应该翻译的字符串的所有元素，并添加到同一个元素中：

数据琅= “可变的”
data-lang-to =“receive”＆lt;可选＆gt;

例如：

<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

Answer 5

我采用了基于@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 developer, navigator

这解决了编写代码以在不同平台（例如iOS）中获取语言环境的问题。

希望有所帮助

Answer 6

如果像我这样的人想知道为什么没有现成的解决方案来完成这么简单的任务：jQuery.localize可以解决你的问题。

将<script type="text/javascript" src="jquery.localize.js"></script>添加到索引html文件
为可本地化的html对象添加标签：<h1 data-localize="greeting"> Hello! </h1>
将localization-ru.json添加到您的项目中：

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

我已将其添加到system/localization/localization-ru.json。 ru后缀是文件的语言（例如，ru - 俄语）。您可能需要localization-en.json，localization-de.json等：

从'deviceready'事件回调侦听器添加语言加载和html页面更新：

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

对于javascript字符串，本地化如下：

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

"system/localization/localization"是www文件夹中的localization.json的路径，您可能会为它写一个快捷方式（第一次和最后一次实际需要编写代码）。< / p>

Answer 7

我找不到任何这样做的框架所以我开始自己的插件。我只想写一个html，让国际化发生在strings.xml（我现在只对android感兴趣）。

看看它，它可能对你有所帮助： https://github.com/zeitos/i18nplugin

Answer 8

我正在开发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-Object。例如：

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

和

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

您可以轻松地使用每种语言的一个JS-File来保存相应的JSON对象。

这样服务可以访问像

这样的对象

window['__' + lang]

并返回翻译后的字符串。

现在要做的就是将Service及其方法-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.__ = __;

  //...
}]);

Answer 9

您是否尝试过使用ionic框架？

Phonegap / Cordova国际化支持

9 个答案: