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

相关推荐
游戏开发爱好者85 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
shykevin13 小时前
uni-app x导航区域跳转
windows·uni-app
2501_9151063214 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者814 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214316 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
勉灬之16 小时前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
2501_9160088917 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张20 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_9160088920 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos