uni-app internationalization and localization function uni-i18n plug-in

uni-app internationalization and localization functions

---

Method to realize

1. Install and use the uni-i18n plug-in

uni-i18n is a plug-in for uni-app that can be used to implement internationalization and localization. After installing the plug-in in the project, you can implement multi-language switching by writing a .json file.

2. Write multi-language .json files

Create multiple .json files in the project, each file corresponds to a language, and write text information corresponding to the locale in it.

For example, create new zh.json and en.json in the project to correspond to the Chinese and English language environments respectively, and write the following content:

// zh.json
{
    
    
  "welcome": "欢迎使用uni-app",
  "description": "uni-app是一个跨平台的开发框架"
}

// en.json
{
    
    
  "welcome": "Welcome to use uni-app",
  "description": "uni-app is a cross-platform development framework"
}

3. Use multilingual text in your code

Where multilingual text is needed, use the $t() method to obtain text information in the corresponding language environment.

For example, in a template use:

<template>
  <view>
    <text>{
   
   {$t("welcome")}}</text>
    <text>{
   
   {$t("description")}}</text>
  </view>
</template>

Use in JS code:

console.log(this.$t("welcome"))
console.log(this.$t("description"))

4. Switch locale

You can switch the locale by calling the uni.setLocale method. For example, switch to the English environment:

uni.setLocale("en")

It should be noted that after switching the locale, you need to refresh the page to take effect.