加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

小程序国际化实现机制

发布时间:2020-12-14 19:32:57 所属栏目:资源 来源:网络整理
导读:需求 可手动设置使用语言 根据不同的语言显示不同的语言文字(目前是支持中英文,如需其他语言,可直接配置即可)? 如果没有配置相应语言的信息,则使用默认的数据? 国际化分为文字和图片(有的图片上有文字信息)两类? 限制因素 小程序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中添加要用的文字信息,文件会自动导出

  1. module.exports = {
  2. LOGIN_STATUS_INVALID: '登录失效',
  3. }
  4. 'Login status invalid'图片国际化(分为本地和网络图片两种);?
    网络图片直接调用getImg('drawableName.png'),即可;?
    本地图片,使用绝对路径即可

    /**
  5. * @author Shirley.jiang
  6. const ICON_URL 'https://***';
  7. ;
  8. return+'/' name;
  9. ), // 网络图片
  10. // 本地图片
  11. * en环境图片配置
  12. */
  13. 'en';
  14. }
  15. )
  16. 使用方式

    );// 引入
  17. 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投稿。

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读