Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan fungsi penukaran berbilang bahasa dalam uniapp
Cara melaksanakan fungsi penukaran berbilang bahasa dalam uniapp
Dengan perkembangan pesat Internet mudah alih, menjadi semakin penting untuk membangunkan aplikasi yang menyokong berbilang bahasa. Dalam rangka kerja uniapp, kami boleh melaksanakan fungsi penukaran berbilang bahasa dengan mudah dan memberikan pengguna pengalaman antara muka yang lebih mesra. Artikel ini akan memperkenalkan cara melaksanakan fungsi penukaran berbilang bahasa dalam uniapp dan memberikan contoh kod.
1. Cipta fail pek bahasa
Pertama, kita perlu mencipta fail pek bahasa berbilang bahasa. Dalam uniapp, fail berformat JSON boleh digunakan untuk menyimpan terjemahan untuk pelbagai bahasa. Kami boleh membuat fail JSON yang berasingan untuk setiap bahasa dan menyimpan kandungan terjemahan bahasa yang sepadan dalam fail.
Sebagai contoh, mari kita ambil bahasa Cina dan Inggeris sebagai contoh dan buat dua fail zh-CN.json dan en-US.json. Antaranya, fail zh-CN.json menyimpan kandungan terjemahan bahasa Cina, dan fail en-US.json menyimpan kandungan terjemahan bahasa Inggeris. Kandungan fail adalah seperti berikut:
// zh-CN.json
{
"selamat datang": "Selamat datang ke uniapp",
"home": "Home",
"about": "About us"
}
// en-US.json
{
"selamat datang": "Selamat datang ke uniapp",
"rumah": "Rumah",
"tentang": "Mengenai Kami"
}
2 Tukar bahasa uniapp, anda boleh Penukaran bahasa dicapai dengan menetapkan pembolehubah global. Kami boleh menyimpan bahasa semasa dalam pembolehubah global, dan di mana kandungan terjemahan perlu dipaparkan, dapatkan kandungan terjemahan yang sepadan daripada fail pek bahasa yang sepadan berdasarkan bahasa semasa.
import Vue daripada 'vue'
import Apl daripada './App'
Vue.prototype.lang = 'zh-CN'
...App})
app.$mount()
f5fd152e572341484f96fad1f62d44b4
<text>{{ $t('welcome') }}</text> <text>{{ $t('home') }}</text> <text>{{ $t('about') }}</text>de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2
eksport lalai {🜎dikira semula{🜎
}
< ;/script>
Dengan cara ini, apabila nilai pembolehubah lang bertukar kepada en-AS, kandungan teks pada halaman akan bertukar kepada bahasa Inggeris secara automatik.
3. Butang tukar bahasa
d477f9ce7bf77f53fbcf36bec1b69b7a
// 获取翻译内容 $t() { return function(key) { const lang = this.$root.lang // 根据当前语言从语言包文件中获取对应的翻译内容 let translations = {} try { translations = require(`../lang/${lang}.json`) } catch (e) { console.warn(`Translation file not found for language: ${lang}`) } return translations[key] || '' } }de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2
, tambahkannya pada skripnya
855348821b2e8f2cc4b633bf98f064df
: {
<text>{{ $t('welcome') }}</text> <text>{{ $t('home') }}</text> <text>{{ $t('about') }}</text>
}
}
2cacc6d41bbb37262a98f745aa00fbf0
Selepas mencapai kesan klik di atas, butang, kandungan teks pada halaman Ia akan bertukar secara automatik mengikut bahasa semasa.
Ringkasan
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penukaran berbilang bahasa dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!