uniapp の言語切り替えは 1 回だけ有効になります

グローバリゼーションの急速な発展に伴い、複数の言語をサポートする必要があるアプリケーションがますます増えています。クロスプラットフォーム フレームワークとして、uniapp は多言語切り替えを実装する際にも広く注目されています。ただし、一部の開発者は、多言語切り替えに uniapp フレームワークを使用すると、言語の切り替えが 1 回しか有効にならないことがわかったと報告しています。つまり、別の言語に切り替えてから元の言語に戻すと、インターフェイスが有効になりません。完全には復旧していませんでした。これにより、多くの開発者が心配し、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>

これにより、複数の言語を簡単に切り替えることができます。ただし、一部の開発者は、実際の使用では言語の切り替えは 1 回しか有効にならないと報告しています。つまり、言語を切り替えた後、再度元の言語に戻すと、完全には元の状態に戻りません。この場合、原因を突き止めて修正する必要があります。

2. 原因分析

uni-i18n プラグインのソース コードを調べると、ロケール属性を変更することで言語の切り替えが行われることがわかります。 locale 属性は app.globalData オブジェクトに保存されます。したがって、言語の切り替えが一度しか有効にならないという問題は、ロケール属性が正しく更新されていないことが原因である可能性があります。

複数の言語を切り替える場合、新しいロケール属性をストレージに保存します。アプリケーションを開くたびに、ロケール属性が最初にストレージから読み取られます。ストレージにロケール属性がない場合は、デフォルトの言語が使用されます。使用されている。言語を切り替えるときは、まずロケール属性を更新し、次に新しいロケール属性をストレージに保存します。このプロセスによれば、言語の切り替えが 1 回しか有効にならない理由は、app.globalData オブジェクトの locale 属性の更新が間に合わなかったためであることがわかります。したがって、再び元の言語に戻すと、古いロケール属性が引き続き読み取られるため、インターフェイスが完全には復元されません。

3. 解決策

実際、この問題を解決するのは比較的簡単です。 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 オブジェクトのロケール属性が自動的に更新され、これにより問題が解決されます。言語の切り替えが一度しか有効にならないという問題。

概要

ユニアプリ開発では、多言語切り替えを実現することが非常に一般的な要件です。ただし、細かい点に注意しないと、言語の切り替えが一度しか有効にならないという問題が発生する可能性があります。 uni-i18n プラグインの調査と分析を通じて、問題の根本原因は、app.globalData オブジェクトの locale 属性を適時に更新できないことにあることがわかりました。したがって、ロケール属性を変更する際には、app.globalData オブジェクトのロケール属性を更新するだけで済みます。この問題の解決策は非常に簡単ですが、小さなエラーが原因でアプリケーションが正しく機能しないことを避けるために、開発プロセス中に細部に注意を払う必要があることも思い出させます。

以上がuniapp の言語切り替えは 1 回だけ有効になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。