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

相关推荐
软工的小白3 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
2501_916008896 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921436 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °6 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC9 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser10 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088910 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214311 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网13 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang14 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app