博客站

在 UniApp 中实现国际化（i18n）是为了支持多语言功能，使应用能够根据用户的语言偏好显示不同的文本内容。以下是 UniApp 实现国际化的常用方法：

一、使用 Vue I18n 插件

Vue I18n 是 Vue.js 的官方国际化插件，可以方便地实现多语言支持。

1. 安装 Vue I18n

• 在项目中安装 vue-i18n：

  npm install vue-i18n
  

2. 配置 Vue I18n

• 在项目中创建 i18n.js 文件，配置多语言支持：

  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  Vue.use(VueI18n);
  
  const messages = {
    en: {
      welcome: 'Welcome',
      greeting: 'Hello, {name}!'
    },
    zh: {
      welcome: '欢迎',
      greeting: '你好，{name}！'
    }
  };
  
  const i18n = new VueI18n({
    locale: 'en', // 默认语言
    messages
  });
  
  export default i18n;
  

3. 在 Vue 实例中使用

• 在 main.js 中引入 i18n 并挂载到 Vue 实例：

  import Vue from 'vue';
  import App from './App';
  import i18n from './i18n';
  
  const app = new Vue({
    i18n,
    ...App
  });
  app.$mount();
  

4. 在页面中使用

• 在页面中使用 $t 方法获取多语言文本：

  <template>
    <view>
      <text>{{ $t('welcome') }}</text>
      <text>{{ $t('greeting', { name: 'UniApp' }) }}</text>
    </view>
  </template>
  

5. 切换语言

• 通过修改 locale 属性切换语言：

  this.$i18n.locale = 'zh'; // 切换到中文
  

二、使用 UniApp 的全局变量

如果项目较小，可以使用全局变量实现简单的国际化。

1. 定义多语言文本

• 在 App.vue 中定义多语言文本：

  export default {
    globalData: {
      languages: {
        en: {
          welcome: 'Welcome',
          greeting: 'Hello, {name}!'
        },
        zh: {
          welcome: '欢迎',
          greeting: '你好，{name}！'
        }
      },
      currentLanguage: 'en'
    }
  };
  

2. 在页面中使用

• 在页面中通过 getApp() 获取全局变量：

  <template>
    <view>
      <text>{{ welcomeText }}</text>
      <text>{{ greetingText }}</text>
    </view>
  </template>
  
  <script>
  const app = getApp();
  export default {
    computed: {
      welcomeText() {
        return app.globalData.languages[app.globalData.currentLanguage].welcome;
      },
      greetingText() {
        const language = app.globalData.languages[app.globalData.currentLanguage];
        return language.greeting.replace('{name}', 'UniApp');
      }
    }
  };
  </script>
  

3. 切换语言

• 修改 currentLanguage 切换语言：

  const app = getApp();
  app.globalData.currentLanguage = 'zh'; // 切换到中文
  

三、结合本地存储

为了记住用户的语言偏好，可以将语言设置保存到本地存储中。

1. 保存语言设置

• 在切换语言时，将语言设置保存到本地存储：

  uni.setStorageSync('language', 'zh');
  

2. 加载语言设置

• 在应用启动时，从本地存储中加载语言设置：

  const savedLanguage = uni.getStorageSync('language') || 'en';
  this.$i18n.locale = savedLanguage; // Vue I18n
  // 或
  app.globalData.currentLanguage = savedLanguage; // 全局变量
  

四、动态加载语言包

对于大型项目，可以按需加载语言包，减少初始加载时间。

1. 定义语言包

• 将不同语言包拆分为单独的文件：
  • lang/en.js：

    export default {
      welcome: 'Welcome',
      greeting: 'Hello, {name}!'
    };
    

  • lang/zh.js：

    export default {
      welcome: '欢迎',
      greeting: '你好，{name}！'
    };
    

2. 动态加载语言包

• 在切换语言时，动态加载对应的语言包：

  async function setLanguage(locale) {
    const messages = await import(`@/lang/${locale}.js`);
    this.$i18n.setLocaleMessage(locale, messages.default);
    this.$i18n.locale = locale;
  }
  

五、总结

UniApp 实现国际化的常用方法包括：

1. 使用 Vue I18n 插件：适合中大型项目，功能强大。
2. 使用全局变量：适合小型项目，简单易用。
3. 结合本地存储：记住用户的语言偏好。
4. 动态加载语言包：优化大型项目的加载性能。

以下是一个完整的 Vue I18n 示例：

1. i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const messages = {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!'
  },
  zh: {
    welcome: '欢迎',
    greeting: '你好，{name}！'
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

export default i18n;

2. main.js

import Vue from 'vue';
import App from './App';
import i18n from './i18n';

const app = new Vue({
  i18n,
  ...App
});
app.$mount();

3. 页面中使用

<template>
  <view>
    <text>{{ $t('welcome') }}</text>
    <text>{{ $t('greeting', { name: 'UniApp' }) }}</text>
    <button @click="switchLanguage('zh')">切换到中文</button>
    <button @click="switchLanguage('en')">切换到英文</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchLanguage(locale) {
      this.$i18n.locale = locale;
      uni.setStorageSync('language', locale);
    }
  },
  onLoad() {
    const savedLanguage = uni.getStorageSync('language') || 'en';
    this.$i18n.locale = savedLanguage;
  }
};
</script>

通过以上方法，可以轻松实现 UniApp 的国际化功能，支持多语言用户。