菜单

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

下载

1.语言切换

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

2.语种添加开发说明

2.1 配置文件国际化

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

js 复制代码

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

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

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

js 复制代码

// 设置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

js 复制代码

├── locale
│   ├── en.json
│   ├── zh-Hans.json
│   └── zh-Hant.json

2.2 js代码国际化

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: 土耳其语

最近修改: 2024-09-25

大纲

分享文章