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.

Mula-mula, tentukan lang pembolehubah global dalam fail main.js dan tetapkan nilai lalainya kepada zh-CN, menunjukkan bahawa bahasa semasa ialah bahasa Cina. Kodnya adalah seperti berikut:

// main.js

import Vue daripada 'vue'
import Apl daripada './App'

Vue.config.productionTip = false

App.mpType = 'app'

/ / Define global Variable lang

Vue.prototype.lang = 'zh-CN'

const app = new Vue({

...App

})

app.$mount()

Kemudian, di mana kandungan terjemahan perlu dipaparkan , anda boleh menggunakan sifat Vue Computed untuk mendapatkan kandungan terjemahan yang sepadan. Kodnya adalah seperti berikut:

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

Untuk memudahkan pengguna menukar bahasa, kami boleh menambah butang untuk menukar bahasa pada halaman Apabila pengguna mengklik butang, bahasa semasa ditukar.

Mula-mula, tambahkan butang pada halaman dengan kod berikut:

  // 获取翻译内容
  $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] || ''
     }
  }

, tambahkannya pada skripnya

pada kaedah switchLanguage halaman, kodnya adalah seperti berikut:

eksport kaedah lalai {

: {

  切换语言
  <text>{{ $t('welcome') }}</text>
  <text>{{ $t('home') }}</text>
  <text>{{ $t('about') }}</text>

}
}

Selepas mencapai kesan klik di atas, butang, kandungan teks pada halaman Ia akan bertukar secara automatik mengikut bahasa semasa.

Ringkasan

Melalui langkah di atas, kami boleh melaksanakan fungsi penukaran berbilang bahasa dalam uniapp. Mula-mula, buat fail pek bahasa untuk menyimpan kandungan terjemahan dalam pelbagai bahasa, kemudian tukar bahasa dengan menetapkan pembolehubah global, dan dapatkan kandungan terjemahan yang sepadan melalui atribut yang dikira pada halaman. Akhir sekali, tambahkan butang untuk menukar bahasa untuk menukar bahasa.

Di atas ialah proses melaksanakan fungsi penukaran berbilang bahasa dalam uniapp. Saya harap ia akan membantu anda!

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!