实现方案

使用uniapp

uni.getLocale()

获取当前设置的语言
使用 vue i18n 实现组件的国际化。
小程序端 tabbar 的国际化无法使用 i18n ，需要自定义 tarbar 组件。

系统国际化功能

在哪里设置 app 语言？
两种方案
1、.获取APP系统默认语言

  1. 在我的APP中 ->我的->添加设置 手动修改APP语言环境

    使用方式

1.引入国际化包

  1. npm install vue-i18n --save-dev

2.创建语言文件

  2. // 目录结构
  3. common
  4. ├── lang                                    国际化词条，多语言文件
  5. │   ├── en-US.js                         -英文词条
  6. │   └── zh-CN.js                          -中文词条  
  8. //内容结构
  9. export default {
  10.   login: {
  11.     title: 'Login',
  12.     placeholderAccount: 'Enter Account',
  13.     placeholderPassword: 'Enter Password',
  14.     autoLogin: 'Auto Login',
  15.     loginButton: 'Login',
  16.     logoutButton: 'Logout',
  17.     forget: 'Forget Password',
  18.     reg: 'Resister Account',
  19.     noLogin: 'No Login'
  20.   },
  21.   home: {
  22.     title: 'Home'
  23.   }
  24. }
  26. export default {
  27.   login: {
  28.     title: '登录',
  29.     placeholderAccount: '请输入账号',
  30.     placeholderPassword: '请输入密码',
  31.     autoLogin: '自动登录',
  32.     loginButton: '登录',
  33.     logoutButton: '退出登录',
  34.     forget: '忘记密码',
  35.     reg: '注册账号',
  36.     noLogin: '未登录'
  37.   },
  38.   home: {
  39.     title: '消息'
  40.   }
  41. }

3.引入语言文件并初始化

  1. // Vue i18n 国际化
  2. import VueI18n from 'vue-i18n';
  3. Vue.use(VueI18n);
  5. // i18n 部分的配置，引入语言包，注意路径
  6. import lang_zh_CN from '@/common/lang/zh_CN.js';
  7. import lang_en_US from '@/common/lang/en_US.js';
  9. const i18n = new VueI18n({
  10.   // 默认语言
  11.   locale: 'zh_CN',
  12.   // 引入语言文件
  13.   messages: {
  14.     'zh_CN': lang_zh_CN,
  15.     'en_US': lang_en_US,
  16.   }
  17. });

4.页面展示国际化文件

image.png

5.动态切换国际化词条

  1. // 在vue生命周期内调用
  2. this.$i18n.locale = 'en_US';  //en_US为new VueI18n中messages 的key