Phonegap /科尔多瓦国际化支持
我正在开发一个Phonegap移动应用程序,我需要国际化 - 以不同语言显示html页面。我现在明白,这不是Phonegap问题 - 我必须国际化Web应用程序。Phonegap /科尔多瓦国际化支持
- 是否有框架支持国际化(例如jQuery Mobile)?
- 是否可以使用模板方法使用属性文件和模板并在构建过程中生成HTML?'
- 如果我使用Bourbon的方法(请参阅答案),如何切换每个选项的语言设置?
亲切的问候,基督教
--- 编辑 -
的PhoneGap从此2.2.0一个很好的全球化插件。它涵盖了很多国际化的功能。检查文档http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization
Phonegap只是一个框架,能够在本机应用程序中显示网页,并使用某个插件与设备的硬件传感器连接。国际化的支持将取决于你的html/js设计。
对于为例,你可以使用:
/html/en/index.html
/html/fr/index.html
...
并调用取决于用户的语言好的页面。
希望这将帮助你:-)
“并根据用户的语言调用好的页面。”你怎么能告诉用户的语言? – 2016-07-26 12:51:53
我做了什么波旁建议,因为它是一个小的应用程序和重复不是这个问题。 但是有模板框架,我认为主要使用的是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代码中设置此值。
我找不到任何框架,因此我开始创建自己的插件。 我只想写一个html,让国际化发生在strings.xml(我现在只对android感兴趣)。
看看它,它可以帮助你: https://github.com/zeitos/i18nplugin
我已经采取了基于@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];
这解决了编写代码的问题,以获得区域设置在不同的平台,例如iOS 。
希望它可以帮助
这将在WP8上失败,因为?在URL中,你需要使用#? – 2014-01-21 16:05:35
优点:
- 使用 “网络成熟的” 库
- 人群来源的翻译
- 没有本土黑客
- 使用模板
- 很容易实现HTML/JS和易于测试
- 支持语言检测
- 支持文本方向(比迪)
- 在所有所以没有原生的依赖将在Android/iOS版/ BB/WP内容十分重要工作..
- 在网页浏览器可测试
缺点:
- 你的项目需要开源和履行TranslateWiki的要求
- 如果您来自分支/合并领域,实施Gerrit的提交有点棘手。
我用模板的handlebars和提供翻译逻辑的html10n库,翻译的字符串来自社区贡献的json文件。
TranslateWiki通过众包的力量提供了实际的翻译。我执行的大部分工作都由TranslateWiki完成,WikiWiki是维基媒体基金会提供的免费开源社区服务。
把手和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的免费配方。
嘿,我可以如图所示使用它吗?我不需要把模板中的把手的东西,编译,渲染等? – 2014-03-07 03:00:23
完全不起作用。 – Umair 2014-06-05 14:15:41
这个答案值得吨为''你好Baguette世界''的upvotes。 – 2017-02-01 14:45:24
这是我非常简单的解决方案。我使用jQuery在我的应用程序,然后添加class="lang"
到所有包含应该翻译的字符串的元素,并以相同的元素我也补充一下:
- 数据LANG =“变量”
- 数据琅-to = “接收” <可选>
例如:
<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
如果像我这样的人在想,为什么没有现成的解决方案来完成这么简单的任务: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文件夹的路径,您可能会为其编写快捷方式(第一次和最后一次实际需要编码时)。
我正在开发一个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进行引用,以便在模板文件中使用本地化。被设置在模板的文件控制器和字符串内
字符串通过
__("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.__ = __;
//...
}]);
开始开发时,我一直在寻找今天同样的事情Cordova应用程序。某些手机的CPU资源有限,因此我想尽量减少JavaScript。我投票选择了模板方法 - 在客户端手机上它会轻很多。 – JustAMartin 2014-04-17 15:17:20
这个插件与语言无关,它只是返回浏览器当前的语言,但我们可以使用i18n的不同语言 – rashidnk 2015-08-28 04:31:58