uniapp国际化以及H5平台及小程序的注意事项

注意：以下所有代码均为 VUE3 写法

一、集成

1. 新建国际化文件

在根目录新建locale 文件夹，新建对应的json文件如下

 分别解释每个文件:

• lang.js，内容如下，创建i18n对象，并导出

  // 国际化 json 文件，文件内容详见下面的示例
  import en from '@/locale/en.json'
  import zhHans from '@/locale/zh-Hans.json'
  
  const messages = {
  	en,
  	'zh-Hans': zhHans
  }
  
  let lang = uni.getLocale()
  
  // #ifdef H5
  // 这是为了掩饰，强制H5平台下为英文
  lang = 'en'
  // #endif
  
  let i18nConfig = {
  	locale: lang, // 获取已设置的语言
  	messages,
  	fallbackLocale: 'en',
  }
  
  
  // VUE3
  // #ifdef VUE3
  import {
  	createI18n
  } from 'vue-i18n'
  const i18n = createI18n(i18nConfig)
  export default i18n
  // #endif
  

• en.json、zh-Hans.json，国际化语言设置

  // zh-Hans.json：
  {
  	"login.login": "登录"
  }
  
  // en.json：
  {
  	"login.login": "Login"
  }
  
  

• uni-app.en.json、uni-app.zh-Hans.json为manifest.json中内容的国际化，命名是官方指定的规则

  // uni-app.en.json
  {
  	"app.name": "这是名字"
  }
  
  // uni-app.zh-Hans.json
  {
  	"app.name": "This is a name",
  }
  

   

2. 集成到项目

在main.js中引入lang.js，通过app.use()，集成国际化

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'

import i18n from './locale/lang.js'

export function createApp() {
	const app = createSSRApp(App)
	app.use(i18n)
	return {
		app
	}
}
// #endif

3.  代码集成

// 1. 在template中使用，直接调用，不需要引入什么。

<view>{{ $t('mine.personCenter') }}</view>

// 2. 在vue文件中使用，需要在setup下
    // 引入
    import {
	    useI18n
    } from 'vue-i18n'

    const {
	    t
    } = useI18n()

    // 方法或定义变量中使用
    const name = ref(t('app.name'))

// 3. 在js文件中使用
    // 引入
    import i18n from '@/locale/lang.js'
    const t = i18n.global.t

    // 使用
    uniToast(t('app.name'))

二、注意事项（只考虑H5和小程序）

1. 国际化分为应用部分和框架部分

• 应用部分，即开发者自己的代码里涉及的界面部分
• 框架部分，即uni-app内置组件和API涉及界面的部分

2. 代码中分析

（1）国际化lang.js中，locale 设置为：uni.getLocale() 会根据系统的语言设置语言，这个本身没有什么问题，如果只是需要根据系统语言来显示对应的语言，那这样没有任何问题。

（2）在（1）的前提下，在小程序中，tabBar和navigationBar无法通过国际化框架来设置，需要调用api来设置。在调用的api中，设置的语言，可以通过国际化的语法动态获取设置。具体如下

		// 设置tabBar的第一页
        uni.setTabBarItem({
			index: 0,
			text: t('tabBar.creation')
		})

        // 设置tabBar的第二页
		uni.setTabBarItem({
			index: 1,
			text: t('tabBar.mine')
		})
        // 设置当前页面的标题
		uni.setNavigationBarTitle({
			title: t('login.login')
		})

（3）H5 下在通过uni.getLocale()  设置的情况下，会根据系统的语言设置语言， 这个是没有问题的。但是，

// #ifdef H5
// 强制H5平台下为英文
lang = 'en'
// #endif

•     如果强制设置一个语言，比如en，manifest中设置跟随系统，那么tabBar和navigationBar 无法国际化，需要通过api单独设置
•     如果强制设置一个语言，比如en，manifest中设置中文， 那么tabBar和navigationBar 无法被国际化，需要通过api单独设置
•     如果强制设置一个语言，比如en，manifest中设置英文， 那么tabBar和navigationBar 可以被国际化

    也就是说，如果设置的语言，和默认manifest中设置的不一致，那么tabBar和navigationBar 无法被国际化，需要通过api单独设置

三、终极方案

•  如果不需要强制设置某个平台为某个语言，那么就设置uni.getLocale()，并且默认语言为跟随系统，通过api设置tabBar和navigationBar的国际化（都跟随系统语言的情况下，通过api是因为小程序不支持）
•  如果需要设置某个平台为某个语言，比如，H5需要设置为英文，那么就在lang.js中将H5环境下设置为'en'，manifest中设置跟随系统，通过api设置tabBar和navigationBar的国际化。

        注意：这种情况下，通过api设置，是为了防止强制设置的语言与系统语言不一致，导致H5的tabBar和navigationBar 不生效，即使这样，还有坑，就是应用国际化

        最后强调一个很容易忽略的点，应用国际化
        在设置语言和系统语言不一致的情况下，还需要设置应用国际化，在app.vue中设置uni.setLocale(i18n.global.locale)。

    // 引入
	import i18n from './locale/lang.js'

	// 设置应用国际化
	uni.setLocale(i18n.global.locale)

至此，所以的情况均已覆盖。