uniapp实现国际化语言

关于设备语言

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') } }, |

相关推荐
居安思危_Ho8 小时前
RK平台Uniapp自启动缓存问题解决
android·缓存·uni-app·rk平台·uniapp资源文件
你真的可爱呀10 小时前
uniapp学习【项目创建+项目结构解析】
学习·uni-app
小小弯_Shelby10 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
卷Java10 小时前
百度AI车牌识别配置指南
java·开发语言·百度·uni-app·dubbo·微信公众平台
游戏开发爱好者813 小时前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_9159184119 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户904706683571 天前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇1 天前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡1 天前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa1 天前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm