SkyGrass
SkyGrass
  • 发布:2016-02-03 17:20
  • 更新:2019-06-03 11:02
  • 阅读:7961

H5国际化的实现[基于i18n]

分类:MUI

要过年啦,客户的项目还没开始动工,客户就喊着要 客户端支持国际化,要中英文双语的。
....度娘....,果然还是有解决方案的。 依然是基于 jquery 的,学名:i18n
首先呢,还是加引用,可以是这样的。

<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>  
        <script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>  

其次呢,Dom结构咯;这里我就简单的放了俩按钮,第一个是表现的,第二个用来点击触发改变用的;

<div class="mui-content">  
            <button id='btn'></button>  

            <button id='changelanguage'></button>  
        </div>  
最后呢,就是js代码了  
``````javascript  
<script>  
            var lang = '';  
            $(function() {  
                lang = (jQuery.i18n.browserLang().substring(0, 2)); //默认从浏览器语言读取  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            })  
            document.getElementById("changelanguage").addEventListener('tap', function() {  
                if ('zh' == lang) {  
                    lang = 'en';  
                } else {  
                    lang = 'zh';  
                }  
                jQuery.i18n.properties({  
                    name: 'strings',  
                    path: 'i18n/', //资源文件路径  
                    mode: 'map', //用Map的方式使用资源文件中的值  
                    language: lang,  
                    callback: function() { //加载成功后设置显示内容  
                        $('#btn').html($.i18n.prop('btn'));  
                        $('#changelanguage').html($.i18n.prop('changelanguage'));  
                    }  
                });  
            });  
        </script>  

好了,上面都是页面上代码了,最最后就是对应的配置文件了,你不配置,代码怎么知道你的英文要先显示成什么中文呢??
只要指定要配置的id就行。比如上面的按钮的id是 btn,所以这里配置文件里 写btn;
没了。就这么多了,最后附上包

9 关注 分享
蔡繁荣 wenju ParetoOu llallen 罗纳尔哆嗦 凌晨两点半 jhhuang2000@163.com 五叶神 web_xyn@163.com

要回复文章请先登录注册

小夏君

小夏君

回复 以马内利CJ:
请教下 如何实现
2019-06-03 11:02
464534544@qq.com

464534544@qq.com

回复 以马内利CJ:
请问你遇到过mui.openwindow打开的页面就无法使用i18n吗?只能是首页才可以
2019-01-10 18:54
909178457@qq.com

909178457@qq.com

请问app的名称如何做国际化呢?系统语言是中文就显示中文的,英文的就显示英文的都是自定义的。如何玩,
2018-03-20 13:20
2394668226@qq.com

2394668226@qq.com

回复 2394668226@qq.com:
有点影响性能
2018-03-10 15:21
2394668226@qq.com

2394668226@qq.com

这插件是可以的,我用了一下,后面感觉直接用js手写,好像没有多少前台的词汇,插件的话,说实在有点影响心梗,毕竟导入两个js文件,js手写几句代码就解决了,
2018-03-10 15:20
青橙子

青橙子

报错
2018-01-11 16:01
Jay10447

Jay10447

i18n实现是可行的,不过需要多加一个strings.properties作为基准语系档,另外有大神知道input的placeholder如何加入国际化吗?
2017-09-27 11:09
以马内利CJ

以马内利CJ

回复 SkyGrass:
可以的,我已经弄成功啦,哈哈哈哈
2017-08-30 15:19
SkyGrass

SkyGrass (作者)

回复 以马内利CJ:
app名字好像无法国际化哦
2017-08-28 14:35
以马内利CJ

以马内利CJ

回复 SkyGrass:
您好,请问app的名称如何做国际化呢?系统语言是中文就显示中文的,英文的就显示英文的都是自定义的。
2017-08-25 16:00
SkyGrass

SkyGrass (作者)

回复 zwx374870:
项目都结束了,怎么可能不行。。。
2017-06-01 16:38
zwx374870

zwx374870

不行
2016-11-16 15:53