页面快搭完的时候pm提的需求,说加资源文件来解决这个事…
思路呢就是有两个json文件,分别存了英文和中文的内容…html需要双语的标签加上lang,cookie里面存了用户选择中文还是英文,标签lang为英文就显示英文的,切换成中文就显示中文的。
先丢两个度娘之后的参考网站:
https://www.jianshu.com/p/c1881d22291c
https://blog.csdn.net/dowithsmiles/article/details/8562590
基本上以第一个链接为主要参考,不过里面没有写json文件的具体样子,在第二个链接里有照抄就好。
不过我开始直接照抄之后还是用不了,在index.html文件中,把a标签改为div后成功运行。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>translation test</title>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div>
<div href="#" id="enBtn">English</div>
<div href="#" id="zhBtn">简体中文</div>
</div>
<div><div lang>click here:</div></div>
<div><input type="button" value="apply" lang id="applyBtn"></div>
</body>
</html>
————————————————————————————————————————
后续:
有两个问题
1.在chrome里测试的时候,发现每次刷新页面,都会先闪一下赋值前的文字,再显示json里设定的文字。
2.上面那个问题还没解决我就打包了,结果生成apk安装到手机之后发现,压根都没加载进去…
苦恼的寻找解决方案……有进展再更新
————————————————————————————————————————
后续2:
Q2已经解决,主要问题是document.cookie的办法存不进cookie,所以改用plus.navigator.setCookie。
另外发现真机上dict不知道为什么不能直接dict[src],必须先JSON.parse(dict)……但是pc这么写会出错
另外功能上有个小调整,App默认语言与系统语言统一
_(:з」∠)_然而Q1还没解决…
var dict = {};
var basicLang = navigator.language;
$(function () {
document.addEventListener('plusready', function(){
registerWords();
if(getCookieVal("lang")=="en"){
setLanguage("en");
}else if(getCookieVal("lang")=="zh"){
setLanguage("zh");
}else{
if(basicLang =="zh" || basicLang =="zh-CN"){
basicLang = "zh";
setLanguage("zh");
}else{
setLanguage("en");
}
}
// 切换语言事件 根据自己业务而定
$("#enBtn").bind("click", function () {
setLanguage("en");
//这里也可以写一些其他操作,比如加载语言对应的css
});
$("#zhBtn").bind("click", function () {
setLanguage("zh");
});
});
});
function setLanguage(lang) {
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
//this.document.cookie = cookie+ ";expires=" + exp.toGMTString()+";path=/";
plus.navigator.setCookie( "http://127.0.0.1:8848", "lang=" + lang + ";expires=" + exp.toGMTString()+"; path=/;");
translate(lang);
}
function getCookieVal(name) {
//var items = this.document.cookie.split(";");
var items = plus.navigator.getCookie( "http://127.0.0.1:8848").split(";");
for (var i in items) {
var cookie = $.trim(items[i]);
var eqIdx = cookie.indexOf("=");
var key = cookie.substring(0, eqIdx);
if (name == $.trim(key)) {
return $.trim(cookie.substring(eqIdx + 1));
}
}
return null;
}
function translate(lang) {
if(sessionStorage.getItem(lang + "Data") != null){
dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
}else{
loadDict(lang);
}
$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
$(this).val(__tr($(this).attr("lang")));
break;
default:
$(this).text(__tr($(this).attr("lang")));
}
});
}
function __tr(src) {
var jsonObj = JSON.parse(dict);
var result = jsonObj[src];
//var result = dict[src];
return (result);
}
function loadDict(lang) {
$.ajax({
async: false,
type: "GET",
url: "lang/"+lang + ".json",
success: function (msg) {
dict = msg;
sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
}
});
}
// 遍历所有lang属性的标签赋值
function registerWords() {
$("[lang]").each(function () {
switch (this.tagName.toLowerCase()) {
case "input":
if($(this).attr("lang")==""){
$(this).attr("lang", $(this).val());
}
break;
default:
if($(this).attr("lang")==""){
$(this).attr("lang", $(this).text());
}
}
});
}
————————————————————————————————————————
后续3:
后来将lang字段改为存到localStorage中,后来有个新的实现,就是后台返回的一些数据,也要根据语言不同显示出来。
报错的文字(比如登录时候弹出“密码输入错误”)我们选择后台返回错误代码,然后两个语言文件中加上错误代码对应的中英文。
并在lang.js中添加以下代码
function showResultMessage(resCode){
var lang = getCookieVal("lang");
if(sessionStorage.getItem(lang + "Data") != null){
dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
}else{
loadDict(lang);
}
var jsonObj = JSON.parse(dict);
var result = jsonObj[resCode];
return result;
}
—————————————————————————————————————————
后续4:(最后还是推翻重做了)
每次点到页面,会先闪一下赋值前的文字还是没解决……想过加蒙层,但是每页都会有用户体验不太好,后端控制又过于麻烦,还会受限于网络。最后直接决定推翻重做了,用http://ask.dcloud.net.cn/article/541_(:з」∠)_不知道效果如何,先更新一哈吧