机遇屋-uniapp多语言

uniapp多语言

作者：ych

### 页面切换语言
#### 安装vue-i18n
```
npm install vue-i18n
```

#### 语言设置
main.js
```
import App from './App'
import Vue from 'vue'

// 引入mock
import './mock/index.js'

import commonMethods from './utils/common.js';

import zh from '@/lang/zh-Hans.js';
import en from '@/lang/en.js';
import VueI18n from 'vue-i18n'
import store from './store';

Vue.use(VueI18n)
const i18n = new VueI18n({
	// 默认语言
	locale: 'zh',
	messages: {
		'zh': zh,
		'en': en,
	}
})

// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
Vue.prototype._i18n = i18n

Vue.prototype.store=store;
Vue.prototype.$commonMethods = commonMethods;

import uView from 'uview-ui'
Vue.use(uView)
uni.$u.setConfig({
	config: {
		unit: 'rpx'
	},
	props: {
		radio: {
			size: 15
		}
	}
})

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
		store,
		i18n,
		...App
})
app.$mount()

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

```

#### lang.vue
```
<template>
  <view>
	  {{$t('languageswitch')}}
    <zxz-uni-data-select
      v-model="value"
      :localdata="range"
      @change="change" :clear="false"
    ></zxz-uni-data-select>
  </view>
</template>

.uni-px-5 {
    padding-left: 10px;
    padding-right: 10px;
  }

.uni-pb-5 {
    padding-bottom: 10px;
  }
</style>

```
#### 遍历设置tabbar
```
			const tabNames = ['home', 'my'];
			tabNames.forEach((name, index) => {
			        uni.setTabBarItem({
			          index,
			          text: this.$t(name),
			        });
			      });
```
#### 公共方法
common.js
```
// globalMethods.js
import zhCnTranslations from '@/lang/zh-Hans.js';
import enUsTranslations from '@/lang/en.js';

const translations = {
  'zh-Hans': zhCnTranslations,
  'en': enUsTranslations,
};

function translate(key,lang) {
  return translations[lang][key];
}

// 将时间戳转换为指定格式的日期字符串
  formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    // ... 根据 format 参数进行格式化输出
    return formattedDate;
  },
  translate(key) {
	  const currentLocale =uni.getStorageSync("lang"); // 当前语言，可根据自己需求进行设置
  	  return translate(key,currentLocale);
  }

// ... 在这里可以定义更多通用方法
};

export default globalMethods;
```

#### 使用公共方法
```
			this.$commonMethods.translate("home");
			const tabNames = ['home', 'my'];
			tabNames.forEach((name, index) => {
			        uni.setTabBarItem({
			          index,
			          text: this.$t(name),
			        });
			      });
```

#### 设置顶部标题
```
			// 设置顶部标题
			uni.setNavigationBarTitle({
				title: this.$commonMethods.translate("home")
			});
```

#### common其他写法
##### 写法1
```
// globalMethods.js
import zhCnTranslations from '@/lang/zh-Hans.js';
import enUsTranslations from '@/lang/en.js';

function translate(key, lang) {
  const translations = {
    'zh-Hans': zhCnTranslations,
    'en': enUsTranslations,
  };

return translations[lang][key];
}

const globalMethods = {
  translate(key) {
	  const currentLocale =uni.getStorageSync("lang"); // 当前语言，可根据自己需求进行设置
  	console.log(translate('home',currentLocale)); // 输出：首页
  	console.log(translate('about',currentLocale)); // 输出：关于我们
  },

// ... 在这里可以定义更多通用方法
};

export default globalMethods;
```

##### 写法2
```
// globalMethods.js
import zhCnTranslations from '@/lang/zh-Hans.js';
import enUsTranslations from '@/lang/en.js';

function getCurrentLanguage() {
  return uni.getStorageSync('lang');
}

function translate(key) {
  const currentLocale = getCurrentLanguage(); // 当前语言，可根据自己需求进行设置
  const translations = {
    'zh-Hans': zhCnTranslations,
    'en': enUsTranslations,
  };

return translations[currentLocale][key];
}

const globalMethods = {
  translate(key) {
  	console.log(translate('home')); // 输出：首页
  	console.log(translate('about')); // 输出：关于我们
  },

// ... 在这里可以定义更多通用方法
};

export default globalMethods;
```

### 更多
您需要通过npm安装此插件：

如果您的项目由HX创建，根目录没有package.json的话，先通过如下命令创建package.json
```
npm init -y
```
#### 安装vue-i18n
```
npm install vue-i18n
```
在main.js中引用vue-i18n
```
// 原有内容
import Vue from 'vue'
import App from './App'

// 以下为添加的内容

// 引入语言包，注意路径
import zh from '@/common/locales/zh.js';
import en from '@/common/locales/en.js';

// 引入并使用vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 构造i18n对象
const i18n = new VueI18n({
	// 默认语言，这里的local属性，对应message中的zh、en属性
	locale: 'zh',
	// 引入语言文件
	messages: {
		// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
		// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
		'zh': zh, // 这里为上面通过import引入的语言包
		'en': en,
	}
})

// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
Vue.prototype._i18n = i18n

// 原有内容，需在这添加i18n
const app = new Vue({
	// 记得在这添加i18n
	i18n,
	store,
    ...App
})
```
注意

别忘了上面的最后处，需要在new Vue构造器中写入i18n

定义语言包
上面我们在main.js通过import引入了两个语言包，一般来说，需要多少种语言，就要有多少个语言包，建议语言包中通过定义不同的字段划分不同页面 所属的素材：
```
// zh.js
export default {
	// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，公共部分写在common部分
	lang: {
		title: 'uView UI',
		intro: '多平台快速开发的UI框架',
	},
	common: {
		// ......
	},
	index: {
		// ......
	}
}
```
使用
在实际场景中，我们可能在js中，也有可能在模板中使用，需通过$t('lang.title')的形式引用，这里的lang是我们上一步zh.js中定义的lange字段，title 自然而然就是lang对象的title属性了。
```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
	</view>
</template>

回顾：我们上面第二步在main.js中进行了如下设置，其中的message对象的zh和en就是我们所能切换的语言：
```
// main.js
// 构造i18n对象
const i18n = new VueI18n({
	// 默认语言，这里的local属性，对应message中的zh、en属性
	locale: 'zh',
	// 引入语言文件
	messages: {
		// 这里的属性名是任意的，您也可以把zh设置为zh等，只是后续切换语言时
		// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
		'zh': Chinese,
		'en': English,
	}
})
```
语言切换：
```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？
如何修改导航栏的标题？
如何修改底部Tabbar导航的文字？
没关系，uView已经为您提供了完善的解决方案：

1. 如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？
这个其实很简单，我们只需通过this.$i18n.locale就能获取当前的语言名称。当然，您也可以将当前的语言变量放到一个全局变量中， 关于全局变量，详见我们的另一个专题：全局变量的实现方式

2. 如何修改导航栏的标题？
修改原生导航栏，我们需要通过uni.setNavigationBarTitle()进行，既然是调用uni的接口，意味着我们无法通过双向绑定，切换语言时自动更新导航栏标题，所以 我们需要在onShow生命周期调用此接口，当每次页面出现在窗口时，重新设置导航栏(不管语言是否切换)：

```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

```
<template>
	<view style="margin-top: 200rpx;">
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

评论区

先去登录

uniapp多语言

相关推荐

评论区