客服系统前端多语种、中文、繁体、英文、日文、韩文、俄语等的实现思路
首先,前端多语种是指界面上的文案部分,可以根据用户设备或者手动指定选择语种,展示对应语种的文案
我在这里是使用js语言包的形式实现的
多语种实现的思路是将不同语言的文本信息存储在不同的文件中,然后在前端代码中引入对应的文件,通过读文件中的文本信息来实现多语种的切换。
实现思路
在 front-lang.js 文件中定义了一个 KEFU_LANG 对象,该对象包含了不同语言的文本信息
例如 cn 对应中文简体,en 对应英文,hk 对应香港繁体,tw 对应台湾繁体,jp 对应日文,kr 对应韩文,ru 对应俄语。
在前端代码中,可以通过 KEFU_LANG 对象来获取对应语言的文本信息
例如
KEFU_LANG.cn.connecting 对应中文简体的“正在连接...”,
KEFU_LANG.en.connecting 对应英文的“Connecting...”。
因此,如果需要实现多语种的切换,只需要在前端代码中动态修改 KEFU_LANG 对象的引用即可。
KEFU_LANG[LANG]['connecting']
参数LANG的获取方法
function checkLang(){ var langs=["cn","en","jp","tw","kr","hk","ru"]; var("lang"); if(lang!=""&&langs.indexOf(lang) > 0 ){ return lang; } var("lang"); if(lang){ return lang; } var navLang = navigator.language switch (navLang) { case "en-US": return "en"; break; case "zh-TW": return "tw"; break; default: return "cn"; } return "cn"; }
checkLang函数主要是用来获取当前语言的,它会先从url中获取lang
参数,如果没有则从localStorage中获取,如果还是没有则根据浏览器语言来判断。navigator.language
是获取浏览器语言的,返回的是一个字符串,比如"en-US""zh-CN"等等,我们可以根据这个字符串来判断当前语言。