uniapp을 사용하여 다국어 기능을 개발하는 방법

uniapp을 사용하여 다국어 기능을 개발하는 방법

소개: 다국어 애플리케이션 개발에서 글로벌 사용자에게 더 나은 서비스를 제공하기 위해서는 다국어 기능 구현이 매우 중요한 요구 사항입니다. 본 글에서는 uniapp을 활용하여 다국어 기능을 개발하는 실제적인 방법을 소개하고, 해당 코드 예제를 첨부하겠습니다.

1. 준비

1. 유니앱 프로젝트 생성
   먼저 새로운 유니앱 프로젝트를 생성해야 합니다. HBuilderX 도구를 사용하여 생성할 수 있으며 생성할 uni-app 템플릿을 선택할 수 있습니다.
2. 언어팩 플러그인 설치
   HBuilderX 플러그인 마켓에서 언어팩 플러그인 "vue-i18n"을 검색하여 프로젝트에 설치하세요.
3. 언어 파일 생성
   프로젝트에 언어 폴더를 생성하고 폴더에 해당 언어 파일을 생성합니다. 예:
4. zh-cn.js (중국어 간체)
5. en-us.js (영어)

각 언어 파일에서 해당 키-값 쌍을 정의해야 합니다. 예:

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

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

다양한 언어 버전 간 전환을 위해 여러 간단한 텍스트 콘텐츠가 키-값 쌍 형식으로 정의됩니다.

2. 언어 패키지 구성
uniapp 프로젝트의 main.js 파일에 vue-i18n 플러그인을 도입하고 구성합니다.

먼저 vue와 vue-i18n의 종속성을 도입해야 합니다

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

그런 다음 Vue.use() 메서드를 사용하여 vue-i18n 플러그인을 전역적으로 등록합니다

Vue.use(VueI18n)

다음으로 vue-i18n 인스턴스를 만듭니다. 그리고 언어 파일을 구성합니다. 경로 및 기본 언어

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

마지막으로 vue

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

의 루트 인스턴스에 인스턴스를 마운트합니다. 구성이 완료되면 uniapp의 다국어 기능이 기본적으로 설정되었습니다.

3. 다국어 사용 및 전환

1. 다국어 사용
   페이지의 템플릿 파일(.vue)에서 $t 메소드를 통해 해당 텍스트 내용을 가져올 수 있습니다. , 예를 들면 다음과 같습니다. $t 方法来获取对应的文本内容，例如：

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

   로그인 후 복사

   然后，在脚本文件(.vue)中使用 computed

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

   로그인 후 복사
   그런 다음 스크립트 파일(.vue)의 computed 속성을 ​​사용하여 텍스트 키 값의 매핑 관계를 정의합니다

   <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>

   로그인 후 복사
   이런 방식으로 해당 텍스트를 다음과 같이 정의할 수 있습니다. 현재 로케일에 따라 페이지에 동적으로 표시됩니다.
2. 
   다국어 전환
유니앱에서는 일반적으로 버튼을 클릭하거나 선택 상자를 입력하여 이벤트를 트리거함으로써 다국어 전환이 이루어집니다.

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

rrreee

요약:

위 내용은 uniapp을 사용하여 다국어 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!