关于设备语言
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 [email protected]
※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') } }, |