小程序国际化实现机制

需求

可手动设置使用语言

根据不同的语言显示不同的语言文字（目前是支持中英文，如需其他语言，可直接配置即可） 
如果没有配置相应语言的信息，则使用默认的数据 
国际化分为文字和图片（有的图片上有文字信息）两类 
限制因素

小程序2m的限制所以图片网络化" style="margin: 20px 0px; font-family: "PingFang SC",245);">因小程序2M的限制，所以图片网络化

地图上的图片（如markers、controls、polyline等），不能使用网络图片，只能使用本地图片；所以图片的话分为本地图片和网络图片两种

实现机制

目录结构信息

res 
│ resUtils.js 
│ 
├─values 
│ img.js 
│ strings.js│ 
├─values_en 
│ img.js 
│ strings.js 
│└─values_zh_CN 
strings.js 
values中是默认的是数据配置，values_en是英文坏境下的配置，values_zh_CN中文简体环境下的配置 
后面如果需要配置其他的语言（如zh_TW，中文繁体，台湾地区），只需要新建文件名 values_zh_TW即可 
resUtils.js是国际化的核心代码位置，这个文件会根据不同的语言来引用引用对应的文件； 
首次如果没有设置过语言，或跟从当前手机的语言环境，后面如果设置过语言的话，跟从设置的语言来（暂定，具体的需求还未出） 
具体配置

文字国际化，直接在对应的环境下strings.js中添加要用的文字信息，文件会自动导出

module.exports = {
  LOGIN_STATUS_INVALID: '登录失效',
登录'}

'Login status invalid'图片国际化（分为本地和网络图片两种）； 
网络图片直接调用getImg('drawableName.png')，即可； 
本地图片，使用绝对路径即可


/**

 * @author Shirley.jiang 
const ICON_URL 'https://***';
;
  return+'/' name;

), // 网络图片
// 本地图片
 * en环境图片配置
 */
'en';
}

)
使用方式


);// 引入

imgsIC_CHANGE_LANGUAGE；// 图片调用

注意事项

因wxml 文件不能应用js文件，所以数据全部通过data进行中转 
data的加载比生命周期要早，导致切换语言的时候，data数据没有更新；所以在Page和Component中的ready方法之后，手动setData一次（因未找到更好的解决方案，暂定这种方式） 
附带[resUtils.js]代码

);
* 国际化* @author Shirley.jiang

static mInstance;

  mImgs {};
 getInstance()    if(!ResUtilsmInstance      mInstance new();
  }

      thismEnv  envinitStrings();    
}
   * 引用字符配置
  initStrings{    
 strings    
try      strings './values_''/strings.js');
{
);
for( key in      
           continue             
    

      
      
  
   * 引用图片配置
  initImgsmImgs  imgs defaultImgs    

);
{
      

      
    // 如果当前语言文件中定义的有，则直接覆盖
   * 切换语言
   */
init);
* en 英文环境*/
getInstance().();

感谢《小程序开发一群》的Shirley.jiang投稿。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。