uniapp 언어 전환은 한 번만 적용됩니다.

세계화의 급속한 발전으로 인해 점점 더 많은 응용 프로그램이 여러 언어를 지원해야 합니다. 크로스 플랫폼 프레임워크인 uniapp은 다중 언어 전환 구현 시에도 폭넓은 주목을 받았습니다. 그러나 일부 개발자들은 다국어 전환을 위해 uniapp 프레임워크를 사용할 때 언어 전환이 한 번만 적용된다는 것을 발견했다고 보고했습니다. 즉, 다른 언어로 전환한 후 원래 언어로 다시 전환한 후 인터페이스가 작동하지 않는다는 것입니다. 완전히 복원되지 않았습니다. 이로 인해 많은 개발자가 uniapp 프레임워크에 대해 고민하고 심층적인 탐색을 수행하게 되었습니다. 이 글에서는 uniapp 언어 전환이 한 번만 적용되는 문제에 대해 논의하고 해결책을 제시합니다.

1. 문제 설명

uniapp 개발에서는 uni-i18n 플러그인을 사용하여 다국어 전환을 구현하겠습니다. 이 플러그인은 매우 편리하며 기본 항목 파일에만 도입하면 됩니다. 코드는 다음과 같습니다:

import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') || 'zh',
    messages
});

export default i18n;

그런 다음 각 구성 요소 내에서 $t() 메서드를 사용하여 해당 언어의 번역을 가져옵니다. 예:

<template>
  <view>{{ $t('home.title') }}</view>
</template>
<script>
  export default {
    mounted() {
      console.log(this.$t('home.title')); // 打印出对应语言的翻译
    }
  }
</script>

이렇게 하면 여러 언어 간에 쉽게 전환할 수 있습니다. 그러나 일부 개발자들은 실제 사용 시 언어 전환이 한 번만 적용된다고 보고했습니다. 즉, 언어를 전환한 후, 다시 원래 언어로 다시 전환하면 원래 상태로 완전히 복원되지는 않습니다. 이런 경우에는 원인을 찾아 해결해야 합니다.

2. 원인 분석

uni-i18n 플러그인의 소스 코드를 살펴보면 locale 속성을 수정하여 언어 전환이 이루어지는 것을 알 수 있습니다. 로케일 속성은 app.globalData 객체에 저장됩니다. 따라서 언어 전환이 한 번만 적용되는 문제는 로케일 속성이 올바르게 업데이트되지 않았기 때문일 수 있습니다.

여러 언어 간 전환 시 애플리케이션이 열릴 때마다 저장소에 로케일 속성이 저장되지 않으면 기본 언어가 사용됩니다. 언어를 전환할 때 먼저 로캘 속성을 업데이트한 다음 새 로캘 속성을 저장소에 저장합니다. 이 과정에 따르면 언어 전환이 한 번만 적용되는 이유는 app.globalData 객체의 locale 속성을 제때 업데이트하지 않았기 때문임을 알 수 있습니다. 따라서 원래 언어로 다시 전환하면 이전 로케일 속성이 계속 읽혀져 인터페이스가 완전히 복원되지 않습니다.

3. Solution

사실 이 문제를 해결하는 방법은 비교적 간단합니다. locale 속성을 수정하면 app.globalData 객체에서만 수정하면 됩니다. 구체적인 코드는 다음과 같습니다.

import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') || 'zh',
    messages
});

// 加入以下代码
i18n.vm.$watch('locale', function(val) {
    console.log('i18n.vm.locale:', val);
    uni.setStorageSync('lang', val);
    uni.$emit('localeChange', val);
    uni.getStorage({
        key: 'lang',
        success: function(res) {
            if (res.data !== val) {
                uni.setStorageSync('lang', val);
            }
        }
    });
    app.globalData.locale = val;
});

export default i18n;

여기서 주요 목적은 vm.$watch 메소드를 추가하는 것입니다. 로케일 속성이 변경되면 app.globalData 객체의 로케일 속성이 자동으로 업데이트되어 전환 문제가 해결됩니다. 언어는 한 번만 적용됩니다.

요약

uniapp 개발에서 다국어 전환은 매우 일반적인 요구 사항입니다. 그러나 세부 사항에 주의를 기울이지 않으면 언어 전환이 한 번만 적용되는 문제에 직면할 수 있습니다. uni-i18n 플러그인에 대한 연구 및 분석을 통해 우리는 문제의 근본 원인이 app.globalData 객체의 로케일 속성을 적시에 업데이트하지 못한 데 있음을 발견했습니다. 따라서 로케일 속성을 수정하는 동안 app.globalData 객체의 로케일 속성만 업데이트하면 됩니다. 이 문제에 대한 해결책은 매우 간단하지만, 작은 오류로 인해 애플리케이션이 제대로 실행되지 않는 것을 방지하기 위해 개발 과정에서 세부 사항에 주의를 기울여야 함을 상기시켜 줍니다.

위 내용은 uniapp 언어 전환은 한 번만 적용됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!