UniApp configuration and implementation of multi-language internationalization

UniApp is a cross-platform development framework based on Vue.js that can quickly develop applications that run on multiple platforms at the same time. In actual development, with the globalization of applications, multi-language internationalization is becoming more and more important. This article will introduce how UniApp configures and implements multi-language internationalization, and attaches code examples.

1. Configuring multi-language files

First, create a folder named lang in the root directory of the UniApp project to store multiple languages. Language related files. Create a file named index.js in the lang folder to configure multi-language and default language. The sample code is as follows:

// lang/index.js

export default {
  // 可选的多语言语种
  locales: ['en-US', 'zh-CN'],
  // 默认语言
  defaultLocale: 'zh-CN'
}

2. Write multi-language text

Create a file named locales under the lang folder Folder for storing text files in different languages. Create the corresponding language file in the locales folder, with the naming format language.js, such as en-US.js and zh-CN. js. The sample code is as follows:

// lang/locales/en-US.js

export default {
  hello: 'Hello',
  welcome: 'Welcome to UniApp',
}

// lang/locales/zh-CN.js

export default {
  hello: '你好',
  welcome: '欢迎来到UniApp',
}

3. Using multilingual text in components

When using multilingual text in components, you can pass this.$t Method to obtain the text of the corresponding language. The sample code is as follows:

<template>
  <view>
    <text>{{ $t('hello') }}</text>
    <text>{{ $t('welcome') }}</text>
  </view>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('hello')) // 输出对应语种的文本
  }
}
</script>

4. Switch language

In order to switch between different languages, you can use Vuex to store the currently selected language and trigger the response where the language needs to be switched. Methods. The sample code is as follows:

// store/index.js

export default {
  state: {
    locale: 'zh-CN' // 默认语言
  },
  mutations: {
    setLocale(state, locale) {
      state.locale = locale
    }
  },
  actions: {
    changeLocale({ commit }, locale) {
      commit('setLocale', locale)
    }
  }
}

// App.vue

<template>
  <view>
    <button @click="changeLocale('en-US')">English</button>
    <button @click="changeLocale('zh-CN')">中文</button>
    <component-a></component-a>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['changeLocale'])
  }
}
</script>

Call the changeLocale method by clicking the button to change the current language.

To sum up, the configuration and implementation of multi-language internationalization in UniApp requires the configuration of multi-language files, which are obtained through the this.$t method when using multi-language text in the component. For the text corresponding to the language, use Vuex to store the current language where the language needs to be switched, and switch the language by calling the corresponding method. The above is the configuration and implementation method of UniApp to achieve multi-language internationalization. I hope it will be helpful to you.

The above is the detailed content of UniApp configuration and implementation of multi-language internationalization. For more information, please follow other related articles on the PHP Chinese website!