Phonegap/Cordova国际化支持

Chr*_*ipp 23 cordova

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

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

亲切的问候,基督徒

--- 编辑 -

Phonegap自2.2.0以来有一个很好的Globalization插件.它涵盖了很多i18n功能.查看文档http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

Joh*_*ear 11

我采用了解决这个问题的方法,允许其他人为我的应用程序贡献语言翻译.

优点:

  • 使用"网络成熟"的库
  • 人群翻译
  • 没有原生黑客
  • 使用模板
  • 很容易实现HTML/JS并且易于测试
  • 支持语言检测
  • 支持文字方向(BiDi)
  • 没有原生的依赖关系将适用于Android/iOS/BB/WP yada yada ..
  • 可在Web浏览器中测试

缺点:

  • 您的项目需要是开源的,并满足TranslateWiki的要求
  • 如果你来自分支/合并世界,那么实现对Gerrit的提交有点棘手.

我使用了用于模板的把手和html10n库来提供翻译逻辑,翻译的字符串来自社区贡献的json文件.

TranslateWiki通过众包的力量提供实际翻译.我实现的大部分工作都是由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>
Run Code Online (Sandbox Code Playgroud)

locales.json

{
  "fr":"locales/fr.json",
  "en":"locales/en.json"
}
Run Code Online (Sandbox Code Playgroud)

区域设置/ en.json

{
  "en":{
    "helloWorld":"Hello Cruel World"
  }
}
Run Code Online (Sandbox Code Playgroud)

区域设置/ fr.json

{
  "fr":{
    "helloWorld":"Hello Baguette World"
  }
}
Run Code Online (Sandbox Code Playgroud)

index.js

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

要在语言之间切换,请调出浏览器的javascript控制台并输入

html10n.localize("fr");
Run Code Online (Sandbox Code Playgroud)

浏览器语言检测需要一些额外的逻辑,我使用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.
});
Run Code Online (Sandbox Code Playgroud)

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


Bou*_*bon 9

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

例如,您可以使用:

/html/en/index.html
/html/fr/index.html
...
Run Code Online (Sandbox Code Playgroud)

并根据用户的语言调用好页面.

希望对你有帮助 :-)


Chr*_*ipp 7

我完全按照Bourbon的建议,因为它是一个小应用程序,并且重复不是那个问题.但是有模板框架,我认为最常用的是小胡子.

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

@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);
}
Run Code Online (Sandbox Code Playgroud)

如您所见,我读取了SharedPreferences的值.我还创建了一个Phonegap插件,只要用户更改语言,就可以从JavaScript代码中设置此值.


Fab*_*zio 5

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

  • 数据琅="可变的"
  • data-lang-to ="receive"<optional>

例如:

<input type="search" placeholder="Search..." class="lang" data-lang="search" data-lang-to="placeholder" />
Run Code Online (Sandbox Code Playgroud)

这是我的班级:

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
Run Code Online (Sandbox Code Playgroud)