penukaran bahasa uniapp hanya berkuat kuasa sekali

Dengan perkembangan pesat globalisasi, semakin banyak aplikasi perlu menyokong berbilang bahasa. Sebagai rangka kerja merentas platform, uniapp juga telah mendapat perhatian meluas apabila melaksanakan penukaran berbilang bahasa. Walau bagaimanapun, sesetengah pembangun melaporkan bahawa apabila menggunakan rangka kerja uniapp untuk penukaran berbilang bahasa, mereka mendapati penukaran bahasa hanya berkuat kuasa sekali, iaitu selepas bertukar kepada bahasa lain dan kemudian bertukar kembali kepada bahasa asal, antara muka tidak dipulihkan sepenuhnya. Ini menyebabkan ramai pembangun bimbang dan menjalankan penerokaan mendalam tentang rangka kerja uniapp. Artikel ini akan membincangkan masalah bahawa penukaran bahasa uniapp hanya berkuat kuasa sekali dan memberikan penyelesaian.

1. Penerangan Masalah

Dalam pembangunan uniapp, kami akan menggunakan pemalam uni-i18n untuk mencapai penukaran berbilang bahasa. Pemalam ini sangat mudah dan hanya perlu diperkenalkan dalam fail entri utama. Kodnya adalah seperti berikut:

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;

Kemudian dalam setiap komponen, gunakan kaedah $t() untuk mendapatkan terjemahan bahasa yang sepadan. Contohnya:

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

Dengan cara ini kita boleh bertukar antara berbilang bahasa dengan mudah. Walau bagaimanapun, sesetengah pembangun telah melaporkan bahawa dalam penggunaan sebenar, penukaran bahasa hanya berkuat kuasa sekali. Dalam erti kata lain, selepas menukar bahasa, apabila menukar kembali ke bahasa asal semula, ia tidak dipulihkan sepenuhnya kepada keadaan asal. Dalam kes ini, kita perlu mencari punca dan membetulkannya.

2. Analisis sebab

Dengan mengkaji kod sumber pemalam uni-i18n, kita boleh mendapati bahawa penukaran bahasa dicapai dengan mengubah suai atribut setempat. Atribut locale disimpan dalam objek app.globalData. Oleh itu, masalah menukar bahasa hanya berkuat kuasa sekali boleh dikaitkan dengan atribut lokal yang tidak dikemas kini dengan betul.

Semasa penukaran berbilang bahasa, kami akan menyimpan atribut locale baharu dalam storan Setiap kali aplikasi dibuka, atribut locale pertama kali dibaca daripada storan Jika tiada atribut locale dalam storan, bahasa lalai digunakan. Apabila menukar bahasa, kami akan mengemas kini atribut locale dahulu dan kemudian menyimpan atribut locale baharu dalam storan. Mengikut proses ini, kami dapati bahawa sebab penukaran bahasa hanya berkuat kuasa sekali ialah kami tidak mengemas kini atribut tempat dalam objek app.globalData dalam masa. Oleh itu, apabila kita bertukar kembali kepada bahasa asal sekali lagi, atribut locale lama masih dibaca, menyebabkan antara muka tidak dipulihkan sepenuhnya.

3. Penyelesaian

Sebenarnya, menyelesaikan masalah ini agak mudah. Dengan mengubah suai atribut locale, kami hanya perlu mengubah suainya dalam objek app.globalData. Kod khusus adalah seperti berikut:

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;

Perkara utama di sini ialah menambah kaedah vm.$watch Apabila atribut locale berubah, atribut locale dalam objek app.globalData akan dikemas kini secara automatik, sekali gus menyelesaikannya. masalah bahawa menukar bahasa hanya berlaku sekali.

Ringkasan

Dalam pembangunan uniapp, penukaran berbilang bahasa adalah keperluan yang sangat biasa. Walau bagaimanapun, jika kami tidak memberi perhatian kepada butiran, kami mungkin menghadapi masalah bahawa penukaran bahasa hanya berkuat kuasa sekali. Melalui penyelidikan dan analisis pemalam uni-i18n, kami mendapati bahawa punca masalah terletak pada kegagalan untuk mengemas kini atribut tempat dalam objek app.globalData tepat pada masanya. Oleh itu, anda hanya perlu mengemas kini atribut locale dalam objek app.globalData sambil mengubah suai atribut locale. Penyelesaian kepada masalah ini adalah sangat mudah, tetapi ia juga mengingatkan kita untuk memberi perhatian kepada butiran semasa proses pembangunan untuk mengelakkan aplikasi tidak berjalan dengan baik kerana beberapa ralat kecil.

Atas ialah kandungan terperinci penukaran bahasa uniapp hanya berkuat kuasa sekali. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!