App语言切换及添加语种开发说明

1.语言切换

​ app的语言基于当前手机系统的语言进行显示,所以如果需要切换app的语言,只需要将手机的系统语言设置成对应语言。当然,当前的app只支持中文和英文两种语种。

2.语种添加开发说明

2.1 配置文件国际化

​ 如果需要对添加在配置文件中的内容进行翻译,如page.json文件,需要使用双%包裹,如"%xxx%",这是基于框架本身的标准设计的。如下代码所示:

{
    "path": "pages/messageDetailList/index",
    "style": {
        "navigationBarTitleText": "%Message Details%",
        "enablePullDownRefresh": false
    }
},

​ 其中"%Message Details%"就是需要被翻译的部分,他会按照你给的翻译文件进行翻译。这部分主要是对顶部提示及底部导航栏进行翻译。

​ 控制app语言的核心代码如下所示:

// 设置app语言
const setLocale = () => {
  const systemInfo = uni.getSystemInfoSync()
  console.log('systemInfo.language', systemInfo.language);
  if (systemInfo.language.includes('en')) {
      // 设为英文
    uni.setLocale('en')
    commonStore.changeLanguage('en')
  } else if (systemInfo.language.includes('zh')) {
      // 设为中文
    uni.setLocale('zh-Hans')
    commonStore.changeLanguage('zh-Hans')
  } else {
    uni.setLocale('zh-Hans')
    commonStore.changeLanguage('zh-Hans')
  }
}

​ 这部分代码主要是对配置文件中的语言进行设置,uniapp有他的规范,在项目根目录的locale目录下配置语言json文件,locale/语言地区代码.json,如:en.json,zh-Hans.json,zh-Hant.json

├── locale
│   ├── en.json
│   ├── zh-Hans.json
│   └── zh-Hant.json
2.2 js代码国际化

​ js代码国际化基于一个方法来实现,通过对比语言文件来获取到准确的翻译,核心代码及使用方式如下所示:

const i18n = (target) => {
  const commonStore = useCommonStore()
  const module = commonStore.language
  if (language[module] && language[module][target]) {
    return language[module][target]
  } else {
    return target
  }
}

i18n('xxxxxxx')  // 使用

​ 如果只是单纯的添加语种,这部分代码并不需要更改。只需要将翻译文件添加到local目录下即可。

2.3 系统对应的language

​ 因为机型不同,获取到的language会有部分不同,但是前缀是一样的,如中文是zh-xx,英文是en-xx,所以这里可以通过前缀来判断对应的系统语言,如下是部分语言对应的language前缀。

en: 英文
zh: 中文
ko: 韩文
ja: 日文
vi: 越南语
ru: 俄语
in: 印度尼西亚语
de: 德语
fr: 法语
es: 西班牙语
ar: 阿拉伯语
it: 意大利语
nl: 荷兰语
pt: 葡萄牙语
sw: 斯瓦希里语
pl: 波兰语
hi: 印地语
tr: 土耳其语
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nVisual

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值