我正在使用Phonegap开发移动应用程序,我需要国际化 - 显示不同语言的html页面.我现在明白这不是Phonegap问题 - 我必须将Web应用程序国际化.
亲切的问候,基督徒
--- 编辑 -
Phonegap自2.2.0以来有一个很好的Globalization插件.它涵盖了很多i18n功能.查看文档http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization
Joh*_*ear 11
我采用了解决这个问题的方法,允许其他人为我的应用程序贡献语言翻译.
优点:
缺点:
我使用了用于模板的把手和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的无黑板配方.
Phonegap只是一个框架,能够在本机应用程序中显示网页,并使用一些插件连接设备的硬件传感器.国际化的支持将取决于您的html/js设计.
例如,您可以使用:
/html/en/index.html
/html/fr/index.html
...
Run Code Online (Sandbox Code Playgroud)
并根据用户的语言调用好页面.
希望对你有帮助 :-)
我完全按照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代码中设置此值.
这是我非常简单的解决方案.我在我的APP中使用jQuery然后添加class="lang"到包含应该被翻译的字符串的所有元素,并且添加到同一个元素:
例如:
<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)
| 归档时间: |
|
| 查看次数: |
24439 次 |
| 最近记录: |