Cara menggunakan uniapp untuk membangunkan fungsi berbilang bahasa

Cara menggunakan uniapp untuk membangunkan fungsi berbilang bahasa

Pengenalan: Dalam pembangunan aplikasi berbilang bahasa, untuk memberi perkhidmatan yang lebih baik kepada pengguna global, melaksanakan fungsi berbilang bahasa adalah keperluan yang sangat penting. Artikel ini akan memperkenalkan kaedah praktikal tentang cara menggunakan uniapp untuk membangunkan fungsi berbilang bahasa dan melampirkan contoh kod yang sepadan.

1. Persediaan

1. Buat projek uniapp
   Pertama, kita perlu mencipta projek uniapp baharu. Ia boleh dibuat menggunakan alat HBuilderX dan pilih templat uni-app untuk penciptaan.
2. Pasang pemalam pek bahasa
   Cari pemalam pek bahasa "vue-i18n" dalam pasaran pemalam HBuilderX dan pasangkannya ke dalam projek.
3. Buat fail bahasa
   Buat folder bahasa dalam projek dan buat fail bahasa yang sepadan dalam folder, contohnya:
4. zh-cn.js (Cina Ringkas)
5. en-us.js (Bahasa Inggeris)

Dalam setiap fail bahasa, kita perlu menentukan pasangan nilai kunci yang sepadan, contohnya:

// zh-cn.js
export default {
  welcome: '欢迎使用uniapp',
  hello: '你好'
}

// en-us.js
export default {
  welcome: 'Welcome to uniapp',
  hello: 'Hello'
}

Beberapa kandungan teks ringkas ditakrifkan dalam bentuk pasangan nilai kunci untuk bertukar antara versi bahasa yang berbeza.

2. Konfigurasikan pakej bahasa
Perkenalkan pemalam vue-i18n ke dalam fail main.js dalam projek uniapp dan konfigurasikannya.

Pertama, kita perlu memperkenalkan kebergantungan vue dan vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Kemudian, gunakan kaedah Vue.use() untuk mendaftarkan pemalam vue-i18n secara global

Vue.use(VueI18n)

Seterusnya, buat contoh vue-i18n dan konfigurasikan fail bahasa Laluan dan bahasa lalai

const i18n = new VueI18n({
  locale: 'zh-cn', // 默认语言为中文简体
  messages: {
    'zh-cn': require('./languages/zh-cn'), // 中文简体
    'en-us': require('./languages/en-us') // 英文
  }
})

Akhir sekali, lekapkan instance ke instance root vue

new Vue({
  i18n,
  ...
}).$mount()

Selepas konfigurasi selesai, fungsi berbilang bahasa uniapp pada dasarnya telah disediakan.

3. Gunakan dan tukar berbilang bahasa

1. Gunakan berbilang bahasa
   Dalam fail templat (.vue) halaman, kita boleh mendapatkan kandungan teks yang sepadan melalui kaedah $t , sebagai contoh: $t 方法来获取对应的文本内容，例如：

   <template>
     <view>
    <text>{{ $t('welcome') }}</text>
    <text>{{ $t('hello') }}</text>
     </view>
   </template>

   然后，在脚本文件(.vue)中使用 computed

   computed: {
     ...mapState(['locale'])
   },
   
   watch: {
     locale() {
    this.$i18n.locale = this.locale
     }
   }

   Kemudian, gunakan atribut computed dalam fail skrip (.vue) untuk menentukan hubungan pemetaan nilai kunci teks

   <template>
     <view>
       <picker mode="selector" range="{{ languageOptions }}" bind:change="onLanguageChange">
         <view>{{ languageOptions[languageIndex] }}</view>
       </picker>
       <!-- 这里根据语言环境展示不同的内容 -->
       <text>{{ $t('welcome') }}</text>
       <text>{{ $t('hello') }}</text>
     </view>
   </template>

   Dengan cara ini, teks yang sepadan boleh dipaparkan secara dinamik pada halaman mengikut lokasi semasa.
2. 
   Menukar berbilang bahasa
Dalam uniapp, penukaran berbilang bahasa biasanya dicapai dengan mengklik butang atau memasukkan kotak pilihan untuk mencetuskan acara.

Mula-mula, tambahkan kotak pilihan dalam fail templat dan ikat acara perubahan

onLanguageChange(e) {
  // 获取选择框的当前索引值
  let index = e.detail.value
  
  // 更新全局语言环境为对应索引的值
  this.$store.commit('setLocale', this.languageOptions[index])
}

Kemudian, tambahkan kaedah acara dalam fail skrip untuk mendengar acara perubahan kotak pilihan dan tukar tempat

rrreee

Klik kotak pilihan Selepas itu, pilih pilihan bahasa yang sepadan untuk beralih ke tempat yang sepadan Teks yang dipaparkan pada halaman akan ditukar mengikut tempat tersebut.

Ringkasan:

Artikel ini memperkenalkan kaedah praktikal menggunakan uniapp untuk membangunkan fungsi berbilang bahasa Dengan mengkonfigurasi pakej bahasa dan menggunakan pemalam vue-i18n, penukaran teks dalam persekitaran berbilang bahasa dicapai. Semoga ia dapat membantu semasa membangunkan aplikasi berbilang bahasa. 🎜

Atas ialah kandungan terperinci Cara menggunakan uniapp untuk membangunkan fungsi berbilang bahasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!