UniApp 实现多语言切换功能（vue2）

在移动应用开发中，多语言适配是提升用户体验的重要环节。UniApp作为一种跨平台的开发框架，提供了便捷的方式来实现多语言切换功能。本文将介绍如何在 UniApp 中配置和使用多语言功能，以及如何实现简单的多语言切换。

1. 准备工作

在开始之前，请确保已经创建了一个基本的 UniApp 项目，并准备好多语言的资源文件。

2. 配置多语言资源文件

创建多语言资源文件

在项目的 locales 目录下，创建多个 JSON 文件来存放不同语言的文本资源。例如：

• en.json (英文)

• {
    "hello": "Hello",
    "welcome": "Welcome to our application"
  }
  

• zh.json (中文)

• {
    "hello": "你好",
    "welcome": "欢迎使用我们的应用程序"
  }
  

实现 i18n 工具

创建一个 i18n.js 文件管理多语言逻辑：

const locales = {
	zh: require('./zh.json'),
	en: require('./en.json'),
};

let currentLocale = '';

if (!uni.getStorageSync('locale')) {
	const systemLanguage = uni.getSystemInfoSync().language; // 首次进入使用系统默认语言，也可以根据自己项目需求改写此处的逻辑
	currentLocale = systemLanguage.startsWith('zh') ? 'zh' : 'en';
} else {
	currentLocale = uni.getStorageSync('locale'); // 用户切换过语言，使用用户上次切换的语言
}

const i18n = {
	t(key) {
		return locales[currentLocale][key] || key;
	},
	setLocale(locale) {
		if (locales[locale]) {
			currentLocale = locale;
			// 切换语言后存储在本地，下次进入页面使用用户切换过的语言
			uni.setStorageSync('locale', currentLocale);
		} else {
			console.warn(`Locale ${locale} not found`);
		}
	},
};
export default i18n;

3. 在 main.js 中配置和引用 i18n

在 main.js 中引入 i18n 并将其注入到 Vue 实例的原型链中：

// main.js

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

Vue.config.productionTip = false;

Vue.prototype.$i18n = i18n; // 注入到 Vue 原型链中

App.mpType = 'app';

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

4. 在页面中使用多语言功能

在需要多语言支持的组件中，可以通过 $i18n 对象来访问多语言资源：

<template>
  <view>
    <text>{{ $i18n.t('hello') }}</text>
    <text>{{ $i18n.t('welcome') }}</text>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchLanguage(locale) {
      this.$i18n.setLocale(locale);
      this.$forceUpdate(); // 强制更新视图
    }
  },
};
</script>

<style>
/* 样式 */
</style>

5. OK完结

创作不易，点个赞吧！