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

演示网站：gofly.v1kf.com
我的微信：llike620

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

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