Uni-App 多语言（Vue2）

Posted 2022-11-29 编程圈子

Uni-App 多语言

• 一、 基本设置
• • 1. main.js 设置
  • 2. locale 目录设置
• 二、uni-app api
• • 1. 获取语言
  • 2. 设置app语言
  • 3. uni-app 语言切换事件
• 三、调用翻译功能
• • 1. 在pages.json中使用`%键名%`
  • 2. 在模板中使用
  • 3. 在vue js中使用

本文内容来源于uni-app官方demo。

一、 基本设置

1. main.js 设置

let i18nConfig = 
  locale: uni.getLocale(),
  messages


// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(
  i18n,
  ...App
)
app.$mount()
// #endif

2. locale 目录设置

文件内容格式：

	"locale.auto": "System",
	"locale.en": "English",
	"locale.zh-hans": "简体中文",
	"locale.zh-hant": "繁体中文",
	"locale.ja": "日语",
	"index.home": "Home",
	"index.component": "Component",
	"index.api": "API",
	"index.profile": "Profile",

二、uni-app api

1. 获取语言

// 操作系统语言信息
   let systemInfo = uni.getSystemInfoSync();
   this.systemLocale = systemInfo.language;
// APP设置的语言
   this.applicationLocale = uni.getLocale();

2. 设置app语言

uni.setLocale(code);

• 如果是安卓系统应用要重启生效。
• 如果是ios系统，直接调用 this.$i18n.locale = code;

3. uni-app 语言切换事件

        uni.onLocaleChange((e) => 
            console.info('locale=', e.locale);
        )

三、调用翻译功能

1. 在pages.json中使用%键名%

	"pages": [
		
			"path": "pages/index/index",
			"style": 
				"navigationBarTitleText": "%index.title%",
				"navigationStyle": "custom"
			
		,  
			"path": "pages/profile/index",
			"style": 
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			
		
	]

2. 在模板中使用

<view class="locale-setting">$t('index.language')</view>

3. 在vue js中使用

 this.$t('locale.zh-hant')