基于js的APP多语言处理

lakeside 发布于2019-08-26 18:36 / 3458人阅读

摘要：本期分享一个的多语言处理插件，此插件是基于修改而来的。实现的原理就是在本地放置一个或多个语言资源文件，然后通过加载这些资源文件并反序列化成对象，再根据资源文件中定义的键名去替换页面中需要显示的地方。

本文出自APICloud官方论坛，
感谢论坛版主哼哼哈兮的分享。

本期分享一个js的多语言处理插件i18n.js，此插件是基于JQuery.i18n.properties修改而来的。 

实现的原理就是在本地放置一个或多个语言资源文件，然后通过js加载这些资源文件并反序列化成json对象，再根据资源文件中定义的键名去替换页面中需要显示的地方。 
再说说用法： 1、在页面中引入i18n.js，加载后会给window对象增加一个名叫 i18n 的属性，是个对象。 2、加载资源文件

i18n.init({
name: name, // 资源文件名称，默认为Layout
language: lang, // 语言名称，格式规范为：{语言}_{区域}或{语言}，如zh_CN,zh,en,en_US
path: "widget://res/lang/", // 资源文件路径，默认值为：widget://res/lang/5. mode: "map", // 加载的语言资源是以何种形式返回，js 对象变量或map，默认值：vars
debug: api.debug, // 是否开启调试模式
callback: fnComplete // 资源文件加载后的回调函数
});
复制代码

3、资源文件加载完成后，会在 i18n.localize 对象中得到加载结果。如资源文件名为默认的Layout，则会得到 i18n.localize.Layout这个对象，它是一个包含资源文件中所有键值对信息的对象，属性名为资源文件中的键名，属性值为资源文件中的键值。
4、资源文件名称为 xxx.res, 如Layout.res, Layout_zh.res或Layout_zh_CN.res
内容格式如：

#这里是注释内容，i18n.init执行加载时会忽略
text_1= 某个中文字符
text_2=还是中文
复制代码
想了解更多详情的可以参看JQuery.i18n.properties 文档

最后附上一个相对完整的处理流程，以供参考，也欢迎有更好的建议提出。  APP启动时获取语言偏好设置：

var lang = api.getPrefs({

        sync: true,
        key: "language"
    });
    if (!lang) {
        // 初次进来选系统语言
        var sysLang = navigator.language.replace("-", "_");
        for (var i = 0; i < App.consts.languages.length; i++) {
            if (App.consts.languages.value === sysLang) {
                lang = App.consts.languages;
                break;
            }
        }
        // 如果系统语言不在支持的语言中，所默认置为支持语言的第一个
        if (!lang) {
            lang = App.consts.languages[0];
        }
        api.setPrefs({
            key: "language",
            value: JSON.stringify(lang)
        });
    } else {
        lang = JSON.parse(lang);

}
根据获取的语言加载对应的资源文件：
// 加载布局所需语言资源文件

    var layout = App.getLayoutRes();
    if (!layout) {
        App.loadLanguage(lang.value, "Layout", function() {
            App.setLayoutRes(i18n.localize.Layout);
        });

}
最后用加载出来的结果去替换页面中需要根据语言显示的地方，不管是用模板引擎也好还是一个个去获取html元素后修改innerTEXT都行：

               
                
            


    // js中利用模板引擎替换显示内容
    $api.html($api.byId("vipFeature"), template("tpl-vip-feature", layout));

如果要替换的内容很少，也可以

默认显示内容

// js中直接替换html元素的innerTEXT
$api.text($api.byId("btnNext"), layout.text_1);

至此，这个插件基本的应用应该是没有什么问题了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110271.html

基于Vue、vue-i18n实现国际化（多语言）

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。 vue-i18n官网 https://kazupon.github.io/vue... 项目用vue-cli构建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 评论0 收藏0
如何让一个vue项目支持多语言（vue-i18n）

摘要：引入是一个插件，主要作用就是让项目支持国际化多语言。所以新建一个文件夹，存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂，早期是用jQuery实现的，两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言，不可避免存在很多文本替换的工作，这么庞杂的一个项目，怎么才能使...

wuyumin 2019-08-22 17:31 评论0 收藏0
vue 国际化i18n 多语言切换

摘要：如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。安装 npm install vue-i18n 新建一个文件夹 i18n ，内新建 en.js zh.js index.js 三个文件准备翻译信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
React项目国际化(antd)多语言开发

摘要：本国际化方案仅针对技术栈，且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能，以为就不需要加载这些数据，但后来发现这是必须的步骤。前言最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...

tracymac7 2019-08-02 15:21 评论0 收藏0