Dharma 75 号会员
      •  0 回帖  •  314 浏览  •  3 年前
   

老版本 APP 国际化解决方案

一. 背景

实现老版本 APP 国际化功能。

二. 工具准备

工具：APICloud

三. 实现流程

1. 在项目中导入 i18n.js 文件

jquery.i18n.js
jquery.i18n.min.js
jquery-1.8.2.min.js

例图：
1.png

2. 创建 i18n 包，配置国际化中英文语言

2.png

文件压缩包如下：
i18n.zip

文件夹中文件样例如下图：
6.png

文件代码如图：

i18n_cn(中文配置)：
3.png

i18n_en(英文配置)：

4.png

注：此处由开发人员根据页面中英文需要进行配置；

3.app 登录界面开发切换中英文模式功能

登录界面切换中英文模式代码:
<div class="content1">
   <select id="changeLanguage">
      <option i18n="login.choice_langu">请选择语言</option>
      <option i18n="login.ch">中文</option>
      <option i18n="login.en">英语</option>
  </select>
</div>

var langStr="cn"; 
$(function(){ 
   defaultLanguage(langStr);
}) 
function defaultLanguage(langStr){ 
  $("[i18n]").i18n({ 
      defaultLang: langStr, 
      filePath: "../i18n/",
      filePrefix: "i18n_", 
      fileSuffix: "", 
      forever: true, 
      callback: function(res) {} 
   }); 
   localStorage.setItem('langStr', langStr); 
} 
$('#changeLanguage').change(function(){ 
   var language=$('#changeLanguage option:selected').text(); 
   if(language=="英语" || language=="English"){ 
       langStr="en"; 
   }else{ 
       langStr="cn"; 
   } 
   defaultLanguage(langStr); 
});

样例 app 登陆时选择语言功能图片：

5.png

4. 开发人员通过以下样例进行代码开发

<div class="aui-bar-tab-label" i18n="i18n_homePage">i18n_homePage</div>

注：

1. 每个使用国际化功能界面必须引用 js，如下：

<script type="text/javascript" src="../../script/jquery-1.8.2.min.js"></script> 
<script type="text/iavascript" src="../../script/jquery.i18n.min.js"></script> 
<script type="text/javascript" src="../../script/jquery.i18n.js"></script>

2. 每个使用国际化功能界面必须使用代码，如下：

var langStr="cn";    
$(function(){         
    defaultLanguage(langStr);    
}) 
function defaultLanguage(langStr){    
   $("[i18n]").i18n({         
       defaultLang: langStr,         
       filePath: "../i18n/",         
       filePrefix: "i18n_",        
       fileSuffix: "",        
       forever: true,        
       callback: function(res) {}    
  });    
  localStorage.setItem('langStr', langStr); 
}