前端jq实现中英文切换（i18n国际化方式，apicloud打包后也适用）_jq项目怎么实现语言切换

作者：Gausst松鼠会 | 2024-03-28 23:11:10

踩

jq项目怎么实现语言切换

1.项目文件及目录

2.准备js

github下载地址：https://github.com/T-baby/jquery.i18n/releases

3.页面代码


<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
        <title>i18n-json数据切换中英文</title>
 
    </head>
    <body>
        <span i18n="login.username">账号：</span><input type="text" name="" i18n="login.enter_user" placeholder="请输入账号">
        <br />
        <span i18n="login.password">密码：</span><input type="password" name="" i18n="login.enter_pass" placeholder="请输入密码">
        <br />
        <select id="changeLanguage">
            <option i18n="login.choice_langu">请选择语言</option>
            <option i18n="login.ch">中文</option>
            <option i18n="login.en">英语</option>
        </select>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.i18n.min.js"></script>
        <script type="text/javascript">
            $(function(){
                defaultLanguage();
            })
            var langStr="cn";
            function defaultLanguage(){
                // alert(langStr);
                $("[i18n]").i18n({
                    defaultLang: langStr,
                    filePath: "./i18n/",
                    filePrefix: "i18n_",
                    fileSuffix: "",
                    forever: true,
                    callback: function(res) {}
                });
            }
            $('#changeLanguage').change(function(){
                var language=$('#changeLanguage option:selected').val();
                if(language=="英语" || language=="English"){
                    langStr="en";
                }else{
                    langStr="cn";
                }
                defaultLanguage();
            });
        </script>
    </body>
</html>

4.json数据

中文：i18n_cn.json


{
	"login.username":"账号：",
	"login.password":"密码：",
	"login.enter_user":"请输入账号",
	"login.enter_pass":"请输入密码",
	"login.choice_langu":"请选择语言",
	"login.ch":"中文",
	"login.en":"英语"
}

英文数据：i18n_en.json


{
	"login.username":"username:",
	"login.password":"password:",
	"login.enter_user":"Please enter your username",
	"login.enter_pass":"Please enter your password",
	"login.choice_langu":"Please select a language",
	"login.ch":"Chinese",
	"login.en":"English"
}

5.注意事项

a.如果只是静态文件会报如下错误，告诉我们访问数据时需要加载服务器资源，纯静态页面建议使用Hbuilder web服务器方式运行

~~~~直接访问file:///D:/Users/Administrator/Desktop/i18nDemo/index.html文件报错

jquery.js:4 Access to XMLHttpRequest at 'file:///D:/Users/Administrator/Desktop/i18nDemo/i18n/i18n_cn.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

~~~~Hbuilder本地服务器方式正常：http://127.0.0.1:8020/i18nDemo/index.html?__hbt=1563420319456

b.i18n参数详解

defaultLang

defaultLang: defaultLang,

默认语言名称，插件会自动将 filePrefix+defaultLang+fileSuffix 拼接在一起作为语言文件文件名。

filePath

filePath: "/i18n/",

该参数指定了语言文件所在文件夹在项目中的位置。

filePrefix

filePrefix: "i18n_",

该参数指定了语言文件的命名的前缀。

fileSuffix

fileSuffix: "",

该参数指定了语言文件的命名的后缀。

callback


callback:function(){
    //do something
}

6.参考文章：https://juejin.im/entry/58774b70b123db005dd49e62

7.其他方案（四种方式实现前端国际化）：https://blog.csdn.net/qq_41485414/article/details/81093999

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/332132?site