您当前的位置: 首页 > 解决方案

小程序国际化实现机制

  • 作者: admin
  • 发布于 2018-10-15 13:53:40
  • 来源:  
  • 栏目:解决方案

导语: 需求 可手动设置使用语言 根据不同的语言显示不同的语言文字(目前是支持中英文,如需其他语言

 

需求

 

可手动设置使用语言

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

 

地图上的图片(如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中添加要用的文字信息,文件会自动导出

 
  1. module.exports = {
  2. LOGIN_STATUS_INVALID: '登录失效',
  3. LOGIN_LOG_AGAIN: '请重新登录',
  4. }
  5. module.exports = {
  6. LOGIN_STATUS_INVALID: 'Login status invalid',
  7. LOGIN_LOG_AGAIN: 'Log in again',
  8. }

图片国际化(分为本地和网络图片两种); 
网络图片直接调用getImg('drawableName.png'),即可; 
本地图片,使用绝对路径即可

 
  1. /**
  2. * 默认环境图片配置
  3. * @author Shirley.jiang
  4. */
  5. const ICON_URL = 'https://***';
  6. let env = 'zh_CN';
  7. let getImg = (name) => {
  8. return ICON_URL + '/' + env + '/' + name;
  9. }
  10.  
  11. module.exports = {
  12. IC_BTN_PHONE: getImg('btn_phone.png'), // 网络图片
  13. ICON_LOCATION: '/imgs/icon_location.png', // 本地图片
  14. }
  15. /**
  16. * en环境图片配置
  17. * @author Shirley.jiang
  18. */
  19. const ICON_URL = 'https://***';
  20. let env = 'en';
  21. let getImg = (name) => {
  22. return ICON_URL + '/' + env + '/' + name;
  23. }
  24.  
  25. module.exports = {
  26. IC_CHANGE_LANGUAGE: getImg('ic_change_language.png')
  27. };

使用方式

 
  1. const resUtils = require('../../res/resUtils.js'); // 引入
  2.  
  3. resUtils.strings.LOGIN_STATUS_INVALID; // 文字调用
  4.  
  5. resUtils.imgs.IC_CHANGE_LANGUAGE // 图片调用
 

注意事项

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

 
  1. const localStorage = require('../utils/LocalStorage.js');
  2. /**
  3. * 国际化* @author Shirley.jiang
  4. */
  5.  
  6. class ResUtils {
  7. static mInstance;
  8.  
  9. mStrings = {};
  10.  
  11. mImgs = {};
  12.  
  13. mEnv;
  14.  
  15. static getInstance() {
  16. if (!ResUtils.mInstance) {
  17. ResUtils.mInstance = new ResUtils();
  18. }
  19. return ResUtils.mInstance;
  20. }
  21.  
  22. init(env) {
  23. this.mEnv = env;
  24. this.initStrings();
  25. this.initImgs();
  26. }
  27. /**
  28. * 引用字符配置
  29. */
  30. initStrings() {
  31. this.mStrings = {};
  32. let strings;
  33. let defaultStrings;
  34.  
  35. try {
  36. strings = require('./values_' + this.mEnv + '/strings.js');
  37. } catch (err) { }
  38. try {
  39. defaultStrings = require('./values/strings.js');
  40. } catch (err) { }
  41.  
  42. // 初始化默认的数据
  43. for (let key in defaultStrings) {
  44. if (!defaultStrings.hasOwnProperty(key)) {
  45. continue;
  46. }
  47. this.mStrings[key] = defaultStrings[key];
  48. }
  49.  
  50. // 如果当前语言文件中定义的有,则直接覆盖
  51. for (let key in strings) {
  52. if (!this.mStrings.hasOwnProperty(key)) {
  53. continue;
  54. }
  55. this.mStrings[key] = strings[key];
  56. }
  57. }
  58.  
  59. /**
  60. * 引用图片配置
  61. */
  62. initImgs() {
  63. this.mImgs = {};
  64. let imgs;
  65. let defaultImgs;
  66.  
  67. try {
  68. imgs = require('./values_' + this.mEnv + '/img.js');
  69. } catch (err) { }
  70. try {
  71. defaultImgs = require('./values/img.js');
  72. } catch (err) { }
  73.  
  74. // 初始化默认的数据
  75. for (let key in defaultImgs) {
  76. if (!defaultImgs.hasOwnProperty(key)) {
  77. continue;
  78. }
  79. this.mImgs[key] = defaultImgs[key];
  80. }
  81.  
  82. // 如果当前语言文件中定义的有,则直接覆盖
  83. for (let key in imgs) {
  84. if (!this.mImgs.hasOwnProperty(key)) {
  85. continue;
  86. }
  87. this.mImgs[key] = imgs[key];
  88. }
  89. }
  90.  
  91. /**
  92. * 切换语言
  93. * @param {string} env 语言值
  94. */
  95. changeLanguage(env) {
  96. localStorage.setEnv(env);
  97. this.init(env);
  98. }
  99. }
  100.  
  101. /**
  102. * zh_CN 中文* zh_TW 中文繁体(台湾)
  103. * en 英文环境*/
  104.  
  105. let env = localStorage.getEnv();
  106. ResUtils.getInstance().init(env);
  107. module.exports = ResUtils.getInstance();

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部