Phonegap/Cordova 国际化支持

Posted

技术标签:

【中文标题】Phonegap/Cordova 国际化支持【英文标题】：Phonegap/Cordova internationalization support 【发布时间】：2012-01-16 09:34:18 【问题描述】：

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

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

问候，克里斯蒂安

--- 编辑 --

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

【问题讨论】：

我今天开始开发 Cordova 应用程序时也在寻找同样的东西。 CPU 资源在某些手机上是有限的，因此我想尽量减少 javascript。我投票支持模板方法 - 在客户端手机上会更轻松。 这个插件与语言无关，它只是返回浏览器当前的语言，但我们可以将i18n用于不同的语言 【参考方案1】：

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

优点：

使用“网络成熟”的库 众包翻译 没有原生黑客攻击 使用模板 非常容易实现 HTML/JS 并且易于测试 支持语言检测 支持文本方向 (BiDi) 完全没有原生依赖，因此可以在 android/ios/BB/WP yada yada.. 可在网络浏览器中测试

缺点：

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

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

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

Handlebars 和 html10n 库功能强大，专为 Web 构建并被广泛使用。它们被证明是非常有用的库。

不需要本机代码或插件。

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"

locales/en.json


  "en":
    "helloWorld":"Hello Cruel World"

locales/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=((\w2,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 的免破解秘诀。

【讨论】：

嘿，我可以使用它吗？我不需要将把手的东西放在模板中，编译，渲染等？ 这个答案值得大量的支持Hello Baguette World。【参考方案2】：

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

例如，您可以使用：

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

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

希望这会对你有所帮助:-)

【讨论】：

"并根据用户的语言调用好页面。"如何分辨用户的语言？【参考方案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 代码设置此值。

【讨论】：

【参考方案4】：

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

data-lang="变量" 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

【讨论】：

【参考方案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）中获取语言环境的问题。

希望对你有帮助

【讨论】：

这将在 WP8 上失败，因为 ?在 URL 中，您需要使用 #?【参考方案6】：

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

    将 &lt;script type="text/javascript" src="jquery.localize.js"&gt;&lt;/script&gt; 添加到您的索引 html 文件中 为可本地化的 html 对象添加标签：&lt;h1 data-localize="greeting"&gt; Hello! &lt;/h1&gt;

    将localization-ru.json 添加到您的项目中：

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

我已将其添加到 system/localization/localization-ru.json。 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 文件夹到您的本地化.json 的路径，您可能会为它编写一个快捷方式（第一次和最后一次您实际上需要编写代码）。

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案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;
  ;

]);

我在全局 Window 范围内为我在应用程序中支持的每种语言都包含了一个 JSON-Object。例如：

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

和

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

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

这样服务可以访问像

这样的对象 
window['__' + lang]

并返回翻译后的字符串。

现在要做的就是将服务及其方法 -getString 注入每个需要本地化静态字符串的控制器。您还必须引用本地范围 var 才能在模板文件中使用本地化。

在控制器内部设置的字符串和模板文件中的字符串通过

__("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.__ = __;

  //...
]);

【讨论】：

【参考方案9】：

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

【讨论】：

你用什么来内化和离子？你推荐i18n Ionic吗？ Ionic 是最好的选择 @RicardoCruz 我对 ionic1 使用 angular-translate，对 ionic2 及更高版本使用 ngx-translate 来创建效果。

以上是关于Phonegap/Cordova 国际化支持的主要内容，如果未能解决你的问题，请参考以下文章

PhoneGap/Cordova 中支持蓝牙 LE 的应用程序

PhoneGap/Cordova 3 标准客户端数据库

PhoneGap/Cordova：如何使用 cookie (iOS)？

Phonegap/cordova IOS横向视频

如何使用cordova命令行创建好一个工程

iOS-生成国际化包-配置App多语言支持