网页框架类APP实现国际化参考文案一
参考：https://blog.csdn.net/CSDN_LQR/article/details/78026254
另外付有自己实现的方法 本人用于H5版的APP使用
一、简述
把页面成国际化，实现中英文切换，为此，网上找了一些中英文切换的解决方案，大概为如下两种：
1、使用谷歌整站翻译Api
优点：只须调用接口，即可轻松完成整站翻译，翻译准确度还行。
缺点：需要梯子。
参考文章：js代码实现网站中英文相互翻译
2、自己编写中英文对照表，用js控制
优点：一对一翻译，所以准确度最高。
缺点：需要编写大量中英文对照表，只适合于少量的固定翻译。
参考文章：html页面如何实现中英文切换？
由于公司的要求是把整站进行翻译，且官网中存在新闻，即存在大量不可预料的数据，同时考虑到富文本数据不好翻译。所以，总的来说，第一种方案最为合适，不过可惜，需要梯子，没办法，只能别寻出路。好在微软也有一个类似谷歌整站翻译的Api：
The Translator Web Widget API
其实，微软提供的Demo实现上也很简单，分如下几步：
引入The Translator Web Widget API
监听dom加载完毕，调用Microsoft.Translator.Widget.Translate()整站翻译。
二、实现
1、封装language.js
根据上面的对微软提供的Demo的研究，我们对此进一步封装，因为中英文切换一般都是一次点击后，往后的统一每个页面都需要或不需要翻译，这就需要记录一个状态值，这里选用html5提供的storage来储存这个状态，并向外提供一个修改该状态并刷新页面的方法。故，该js（language.js）编写如下：
$(function(){
// do something
var script=document.createElement("script");
script.type="text/javascript";
script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";
document.getElementsByTagName('head')[0].appendChild(script);
var value = sessionStorage.getItem("language");
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
if(value==="1"){
Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
}
}
}
function onProgress(value) {
}
function onError(error) {
}
function onComplete() {
$("#WidgetFloaterPanels").hide();
}
function onRestoreOriginal() {
}
});
function translate(){
var value = sessionStorage.getItem("language");
if(value==="1"){
sessionStorage.setItem("language", "0");
}else{
sessionStorage.setItem("language", "1");
}
window.location.reload();//刷新当前页面.
}
2、编写测试页面
编写一个测试页面（test.html）。要使用上面的language.js，必须进行以下三步：
设置页面编码为utf-8
引入jquery和language.js
设置按钮的点击事件，去调用中英文切换函数：translate();
<!DOCTYPE html> <head> <title>Microsoft Widget API Sample</title> <meta charset="UTF-8"/> <script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript" src="language.js"></script> </head> <body> <button id="change">中英文切换</button </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <div style="text-align: center" > 你好 </div> </body> <script type="text/javascript"> $("#change").click(function(){ translate(); }) </script> </html>
试试看效果吧，反正我觉得还行~
三、其他
上面编写的language.js中写死了中文转英文（zh-CHS转en），如果项目需要其他语言的转换，对language.js进行自定义扩展即可。
附：
我简单的用requere实现了下 ，支持中英韩语，默认其他均英语
首先将一入几个自己写好的语言包：key为中文；value为相应国际化的语言，每次动态加载value 就阔以了
eg:我称为语言包
define(function(){
var object = {
"年":"year", "月":"month", "周":"week", "日":"day", "时":"hour", "分":"minute", "秒":"seconds",
}
return object
}
加载逻辑：
define(function(){ //<-- ####### internationalization ########## --> var languageObj=null switch (navigator.language) { case "zh-CN": languageObj={} break; case "en-US": loadModule('english') break; case "ko-KR": loadModule('korean') break; default: loadModule('english') break; } function loadModule(jsModule,black){ require([jsModule], function(obj){ languageObj = obj typeof block =="function"&&block(obj) }) } var internationalization = { tell:function (key) { return languageObj[key]||key } } window.$i18n=internationalization.tell return internationalization })
由于部分机型的适配问题
更改为提前加载英语语言包
define(["english"], function(englishObj) { //<-- ####### internationalization ########## --> var internationalization = { tell: function(key) { switch (navigator.language) { case "zh-CN": return key break; case "en-US": return englishObj[key]||key break; case "ko-KR": return englishObj[key]||key break; default: return englishObj[key]||key break; } } } window.$i18n = internationalization.tell return internationalization })
启动加载后在需要国际化处理的地方通通用$i18n("中文")即可
简单可行。