How to use uniapp to develop multi-language functionality

How to use uniapp to develop multilingual functions

Introduction: In multilingual application development, in order to better serve global users, realizing multilingual functions is a very important requirement. This article will introduce practical methods on how to use uniapp to develop multi-language functions, and attach corresponding code examples.

1. Preparation

1. Create uniapp project
   First, we need to create a new uniapp project. It can be created using the HBuilderX tool and select the uni-app template for creation.
2. Install language pack plug-in
   Search for the language pack plug-in "vue-i18n" in the plug-in market of HBuilderX and install it into the project.
3. Create language files
   Create a languages ​​folder in the project, and create the corresponding language file in the folder, for example:
4. zh-cn.js (Simplified Chinese)
5. en-us.js (English)

In each language file, we need to define the corresponding key-value pair, for example:

// zh-cn.js
export default {
  welcome: '欢迎使用uniapp',
  hello: '你好'
}

// en-us.js
export default {
  welcome: 'Welcome to uniapp',
  hello: 'Hello'
}

With key value In the right form, several simple text contents are defined for switching between different language versions.

2. Configure the language package
Introduce the vue-i18n plug-in into the main.js file in the uniapp project and configure it.

First, we need to introduce the dependencies of vue and vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Then, use the Vue.use() method to globally register the vue-i18n plug-in

Vue.use(VueI18n)

Next , create a vue-i18n instance, configure the path of the language file and the default language

const i18n = new VueI18n({
  locale: 'zh-cn', // 默认语言为中文简体
  messages: {
    'zh-cn': require('./languages/zh-cn'), // 中文简体
    'en-us': require('./languages/en-us') // 英文
  }
})

Finally, mount the instance to the root instance of vue

new Vue({
  i18n,
  ...
}).$mount()

After the configuration is completed, uniapp's multi-language The function has basically been built.

3. Using and switching multi-language

1. Using multi-language
   In the template file (.vue) of the page, we can pass $t method to obtain the corresponding text content, for example:

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

   Then, use the computed attribute in the script file (.vue) to define the mapping relationship of the text key value

   computed: {
     ...mapState(['locale'])
   },
   
   watch: {
     locale() {
    this.$i18n.locale = this.locale
     }
   }

   In this way, the corresponding text content can be dynamically displayed on the page according to the current locale.

2. Switching multiple languages
   In uniapp, switching multiple languages ​​is usually achieved by clicking a button or inputting a selection box to trigger an event.

First, add a selection box in the template file and bind the change event

<template>
  <view>
    <picker mode="selector" range="{{ languageOptions }}" bind:change="onLanguageChange">
      <view>{{ languageOptions[languageIndex] }}</view>
    </picker>
    <!-- 这里根据语言环境展示不同的内容 -->
    <text>{{ $t('welcome') }}</text>
    <text>{{ $t('hello') }}</text>
  </view>
</template>

Then, add an event method in the script file to listen for the change event of the selection box And switch the language environment

onLanguageChange(e) {
  // 获取选择框的当前索引值
  let index = e.detail.value
  
  // 更新全局语言环境为对应索引的值
  this.$store.commit('setLocale', this.languageOptions[index])
}

After clicking the selection box and selecting the corresponding language option, you can switch to the corresponding language environment. The text displayed on the page will be switched accordingly according to the language environment.

Summary:
This article introduces the practical method of using uniapp to develop multi-language functions. By configuring language packages and using the vue-i18n plug-in, text switching in multi-language environments is achieved. I hope it will be helpful when developing multi-language applications.

The above is the detailed content of How to use uniapp to develop multi-language functionality. For more information, please follow other related articles on the PHP Chinese website!