uniapp 语言国际化 i18n 教程

uniapp 语言国际化 i18n 教程

前几天做了一个项目，需要根据不同的浏览器的语言环境自动切换语言。

故此去看了uiapp的官方文档，发现有i18n国际化的教程，跟着官网教程一步一步做，发现页面中vue文件中的文字会跟着变化，但是pages.json中的顶部导航栏的标题，还有底部tabr的文字不生效。折腾了好半天终于发现如何实现别解决这个问题。

下面请看教程

首先放一个官网国际化的链接：uni-app官网 (dcloud.io)

1.在项目根目录下新建locale文件夹，文件夹下建立xxx.json 文件，里面写语言

贴一下我的文件目录

在贴一下json文件里面的内容

当你把需要的语言文件都准备好接下来就要写代码了

2.打开根目录下的main.js文件 引入我们之前写的json语言文件，同时也要引用vue-i18n文件并使用，贴一下我的代码吧

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

let i18nConfig = {
  locale: 'zh-Hant'  //这里是设置你vue页面中要使用哪种语言
  messages
}

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

// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
// #endif

 这一步已经实现了手动设置语言了

3.vue页面中应用，贴一下我的代码，把需要用到的文字，用 $t('xxxxxx')替换即可

js代码中也可以用json中的语言，格式是 this.$t('xxxxxx') 进行调用

<template>
  <view class="container">
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
            a:this.$t('index.title')
      }
    }
  }
</script>

到这一步，可以运行项目进页面中查看效果了

4、pages.json中导航栏标题使用国际化语言

打开项目中的pages.js文件，将要替换的标题用 %xxxxx%格式替换掉，贴一下我的代码

接下来最重要的就是如何使它生效，在整个项目第一个执行的vue文件里写下一段代码，我项目里最先运行的是login.vue文件。有人问为什么不放在App.vue文件里呢，答案是如果放在这个文件中他不会生效，所以请一定不要放在App.vue文件中

贴一下我的代码 ，uni.setLocale('xxx')这段代码用来设置你想用的语言，

 现在你可以运行项目看一下顶部导航栏的标题是不是已经跟着语言在变化了。

5、如何动态的改变语言包括vue和pages.json页面

        动态改变的方法就是

        首先 mani.js页面 设置语言那一块写成这样，uni.getLoacle()函数获取动态设置的语言

在你需要做动态改变功能的地方写一段代码

 uni.setLocale('en') ，其中en是你要设置的语言。

现在写一个点击事件去改变一下语言看看效果吧

ok到这里本章教程就结束了。如果有什么不懂的可以评论区留言。