uniapp实现国际化语言

发布于：2024-12-18 ⋅ 阅读:(69) ⋅ 点赞:(0)

关于设备语言

uni.getSystemInfo

osLanguage 操作系统语言

字段名称	App-Android	App-iOS
osLanguage	zh-CN	zh-Hans-CN

其他：hostLanguage 宿主语言（仅 UniMPSDK 支持，就是只支持小程序）

language 返回值说明

language的国际规范是BCP47规范，分为三段，主语言-次语言-地区。例如zh-Hans-CN，表示中文-简体-中国大陆

但除了主语言外，后两者均可省略。在不同平台，它们的省略规则也不相同。

app-ios，不省略，返回zh-Hans-CN
app-android、web、微信小程序，省略次语言，返回zh-CN
uni-app框架和应用的多语言，以及支付宝小程序，则用zh-Hans来表示简体中文

所以获取语言后，不能直接字符串比较，需要拆段比较，npm上也有专门做BCP47语言规范比较的库。

uni.getLocale() 获取设备当前设置的语言

uni.setLocale(locale) 设置当前语言

App-Android、App-iOS 平台修改系统语言后会重启应用。
App-Android 平台设置新的语言后会自动重启应用。（ios要考虑一下）

国际化开发

1、安装i18n

官方推荐9.1.9版本但是vue2不能装9.1.9

所以降到8.x.x安装

npm install vue-i18n@8.2.1

※2、准备国际化json文件

3、在main.js引入

JavaScript
import en from '@/locale/en.json'
import zhHans from '@/locale/zh-Hans.json'
import zhHant from '@/locale/zh-Hant.json'
const messages = {
  en,
  'zh-Hans': zhHans,
  'zh-Hant': zhHant
}

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages
}

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)

const app = new Vue({
  i18n,
  ...App
})

4、使用国际化语言

page.json 上使用 "%tabbar.title1%"

pages.json 支持以下属性配置国际化信息

navigationBarTitleText

titleNView->titleText

titleNView->searchInput->placeholder

tabBar->list->text

vue中template 使用 $t('')

JavaScript
<template>
  <view class="home-page">
    
    <view>{{ $t('home.title') }}</view>
   </view>
</template>

js中使用this.$t('')

JavaScript
data() {
    return {
      title:this.$t('tabbar.title1')
    }
  },