npm:multi-lang-js

README

前端多语言（json文件）加载器

script引入：

https://xxxx/js/multi-lang.js

npm安装

npm install multi-lang-js --save

使用示例


<script src="/assets/js/vue.min.js"></script>
<script src="https://xxxx/js/multi-lang.js"></script>
<script>
var vue_app_body = new Vue({
        el: '#bigo_lang_e',
        data: {
                langContent:{
                }
        }
});
// 1：
var multiLang = new MultiLang() 
//2：import multiLang from 'multi-lang-js';

multiLang.init({
    path: 'css/',
    dataType:'json',
    name: {
        'en': 'lang_en.txt',
        'cn': 'lang_cn.txt',
        'tw': 'lang_cn.txt',
        'th': 'lang_th.txt',
        'vn': 'lang_vn.txt',
        'ru': 'lang_ru.txt',
        'ko': 'lang_ko.txt',
        'id': 'lang_id.txt'
    },
    callback: function(data, langName){
        vue_app_body.langContent = data;
        // 第二个参数推荐不再使用，为了兼容而存在。返回的是浏览器语言名。如 cn
        // 如需获取语言相关。请用 this.appLang 等。请看其3个语言相关属性。
    }
});
</script>

对象multiLang，有3个语言相关属性

属性名	类型	说明
appLang	str	对象初始化即可获得，如：cn
appLangString	str	对象初始化即可获得，如：zh-cn
packageLang	str	init()之后获得，表示加载的语言包。如 vn

multiLang.init() 初始化参数说明

参数名	类型	说明
path	str	翻译文本的相对路径，这里我把所有翻译文本放到css文件夹下
dataType	str	值为 txt 或者json。可忽略此参数，默认为json，值为txt时，则返回的是txt文本
name	obj	各个语言对应加载的翻译文本，属性名不可改，对应的文本名字可以改
callback	fun	回调的第一个参数是加载到的json(或者文本)数据，该函数中this指向new出的对象

multiLang.setLang(langname,callback) 设置语言 **如果你觉得multiLang.setLang 使用麻烦，也可以：localStorage.lang=langname，这种写法 ** **注意：设置语言，会让全站语言都立马改动，demo可参考github上的页面。开多个页签试试 **

参数名	类型	说明
langname	str	必须设置，你要设置的语言名
callback	function	可选的回调函数

测试支持 初始化判断何种语言：先查浏览器地址栏参数有lang 参数，其次查 localStorage.lang的值，最后看浏览器语言

所以为了测试预览，你可以在地址后带入参数，lang=en(你想要的语言)。

说明如果你配置的name中，没有（比如当前埃及用户访问），则尝试使用en（英文），如果英文也没有配置，则使用配置的“第一个”语言包。

1.3.0改动去除从localstorage获取语言码的逻辑

1.3.1改动增加 bn 孟加拉语 ne 尼泊尔语两种多语言

1.3.2 增加阿语标识ar-er , 增加柬埔寨语的语言选择

1.3.3 增加多语言支持 ['gu', 'gu,gu-in'], // 古吉拉特语
['kn', 'kn,kn-in'], // 埃纳德语
['mr', 'mr,mr-in'], // 马拉地语
['pa', 'pa,pa-in'], // 旁遮普语
['ta', 'ta,ta-in'] // 泰米尔语

1.3.4 增加多语言支持 ['te', 'te,te-in'], //泰卢固语

1.3.5 增加多语言支持 ['fil', 'fil-PH'], //菲律宾语

1.3.6 修正菲律宾语的支持
['fil', 'fil-ph'], //菲律宾语
增加意大利语的支持
['it','it,it-ch,it-it'], //意大利语

1.3.7
修改输出变量名称，防止某些包打包工具会认为MultiLang 重复声明
var multiLangInstacne = new MultiLang();
export default multiLangInstacne

1.3.8 增加多语言支持 ['uk', 'uk,uk-ua'], //乌克兰语
['be', 'be,be-by'], //白俄罗斯语
['kk', 'kk,kk-kz'], //哈萨克语

1.3.9 忽略

1.3.10 修复bug

1.3.11 增加初始化参数 queryLang,
如果设置了该值，取多语言将会从url上获取该参数作为语言码
eg
multiLang.init({ queryLang: 't' })
若访问页面index?t=ar 则会映射到ar阿拉伯语
若访问 index?t=ar&lang=en 依然会映射到ar阿拉伯语，因为queryLang优先级高于默认的"lang"参数
若访问 index?lang=en 映射到英语，因为t参数缺失，使用默认参数'lang'

1.3.12
--增加多语言
['fa', 'fa,fa-ir'], //波斯语
['da', 'da,da-dk'], //丹麦语
['ml', 'ml,ml-in'], //马拉雅拉姆语
['or', 'or,or-in'], //奥里雅语
--将queryLang获取的参数自动转为小写
eg.
multiLang.init({ queryLang: 't' })
若访问页面 index?t=AR 将会转化为ar再做语言码映射

1.3.13
--增加方法strMapToLang
传入浏览器语言参数，返回对应的语言码
eg
multiLang.strMapToLang('zh-hans') //cn multiLang.strMapToLang('vi-vn') //vn

1.3.14
完善柬埔寨语（高棉语）的浏览器标识
['kh', 'kh,km-kh']

1.3.15
--增加多语言
['as', 'as-in'],//阿萨姆语
['ka', 'ka-ge'],//格鲁吉亚语
['sa','sa-in'],//梵语
['uz','uz-latn,uz-latn-uz,uz-cyrl,uz-cyrl-uz'],//乌兹别克语

1.3.16
--多语言增加同名标识如 ['as', 'as,as-in']

1.3.17 --增加西语的标识 es-us

Usage no npm install needed!

README

前端多语言（json文件）加载器