登录

客服系统前端多语种、中文、繁体、英文、日文、韩文、俄语等的实现思路

首先,前端多语种是指界面上的文案部分,可以根据用户设备或者手动指定选择语种,展示对应语种的文案


我在这里是使用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"等等,我们可以根据这个字符串来判断当前语言。