在Titanium应用中导入翻译的功能

最新推荐文章于 2020-09-18 05:48:28 发布

最新推荐文章于 2020-09-18 05:48:28 发布 · 133 阅读

文章标签：

#appcelerator #titanium #mobile #translate

Titanium 专栏收录该内容

86 篇文章

订阅专栏

本文介绍了如何在Titanium开发的应用中实现翻译功能，利用Google翻译API并展示如何通过Webview操作动态修改内容，提供了一个简单的浏览器实例，展示了Webview的强大功能，包括直接操作页面内容，如修改电车站名。

有些应用中有追加翻译功能的需求，这回我们说说说如何在Titanium开发的应用当中，实现翻译功能。

我们采用调用Google的翻译API来实现。

（1）首先创建一个WebView用来显示翻译后的文字显示。


var tranlateView = Titanium.UI.createWebView({
	top:2,
	left:75,
	height:30,
	width:240,
	backgroundColor:'#FFFFFF', 
	url:'translate.html'
});

（2）在需要翻译功能的处理中追加一下代码


tranlateText.evalJS("javascript:translate('" + inMsg+ "')");

其中的inMsg就是需要翻译的文字。

其中的translate.html代码如下：


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
	google.load("language", "1");
    function g_translate(strInput,out){

        google.language.translate(strInput, "ja-JP", "en", function(result){
          if (!result.error){
            document.getElementById(out).innerHTML=result.translation;
			}else
            document.getElementById(out).innerHTML=strInput;
        });
      } 
</script>


<body style="background-color:#fff">
<div id="show" style="font-size:16px; color:#666;"></div>
<script language="javascript">
function translate(strTranslate)
{
    document.getElementById("show").innerHTML="Translating.....";
    g_translate(strTranslate, "show");
}
</script>
</body>
</html>

google.language.translate的参数中设置你要翻译的语言。

=========================================
=========================================
说点翻译功能以外的话题，Titanium的evalJS函数是相当的了得，几近恐怖啊！为什么这么说了。因为它能直接操作Webview中的内容，就跟使用自己的Page一样。

比如：
以下是一个简单封装的浏览器，然后打开了一个通过日本的电车站名查询的页面。
[img]http://dl.iteye.com/upload/attachment/611342/1f7e8ca1-73fa-3480-86d0-7d6b3d2359e3.png[/img]

如果我们在代码的最后追加一下代码：


webView.addEventListener('load',function(e){
	webView.evalJS( ' $("a:contains(\'上野駅\')").text("蒲田駅"); ' );		
});

那么我们在运行一次，你将看到的是：
[img]http://dl.iteye.com/upload/attachment/611344/76d7dcc1-b599-3c95-bd62-347cfea27c15.png[/img]

上野站已经被改成了莆田站了。

这是一个简单的例子，如果有人能够灵活的使用该功能，你将会有一些意想不到的收获！！