unibest/docs/base/10-i18n.md

# 多语言篇

`多语言` 是一个常见的需求， `unibest` 专门开发了一个 `i18n`模板，可以直接生成 `多语言模板项目`。

```sh
pnpm create unibest my-project -t i18n
```

`vue组件` 里面使用方式如下：

```html
<view class="m-4">{{ $t('app.name') }}</view>
```

`非vue组件` 里面怎么使用呢？比如 `ts` 文件。

这时需要用到作者编写的 `translate` 函数，使用方式如下：

```ts
import { translate as t } from '@/locale/index'

/** 非vue 文件使用 i18n */
export const testI18n = () => {
  console.log(t('app.name'))
  // 下面同样生效
  uni.showModal({
    title: 'i18n 测试',
    content: t('app.name'),
  })
}
```

上面基本的使用都是没问题的，但是传递参数时，只有 `H5端` 生效，`其他端` 是不生效的，代码如下：

```html
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
```

`H5端` 效果如下，正常显示：

![alt text](./assets/10-1.png)

`非H5端` 效果如下，异常显示：

![alt text](./assets/10-2.png)

下面我们就来处理这个问题。

## 多语言传参

上面提到 `vue-i18n` 在 `非H5端` 传参时显示异常，那我们就来处理一下，主要方式就是通过 `正则` 替换 `多语言字符串`。

编写一个函数 `formatI18n`，如下：

```ts
/**
 * formatI18n('我是{name},身高{detail.height},体重{detail.weight}',{name:'张三',detail:{height:178,weight:'75kg'}})
 * 暂不支持数组
 * @param template 多语言模板字符串，eg: `我是{name}`
 * @param obj 需要传递的对象，里面的key与多语言字符串对应，eg: `{name:'菲鸽'}`
 * @returns
 */
export function formatI18n(template, data) {
  const match = /\{(.*?)\}/g.exec(template)
  if (match) {
    const variableList = match[0].replace('{', '').replace('}', '').split('.')
    let result = data
    for (let i = 0; i < variableList.length; i++) {
      result = result[variableList[i]] || ''
    }
    return formatStr(template.replace(match[0], result), data)
  } else {
    return template
  }
}
```

`vue组件` 里面使用方式如下：

```html
<view class="m-4">{{ formatI18n(translate('introduction'), user) }}</view>
```

用到的函数引入如下：

```js
import { formatI18n, translate } from '@/locale/index'
```

对应的 en.json 文件如下：

```json
{ "introduction": "I am {name},height:{detail.height},weight:{detail.weight}" }
```

`user` 对象如下：

```js
{name:'张三',detail:{height:178,weight:'75kg'}}
```

这样，在 `H5端` 和 `非H5端` 都能正常显示，如下：

![alt text](./assets/10-3.png)

very good !

## 导航栏标题

目前发现 `导航栏标题` 在 `小程序端` 不会跟随多语言切换而切换，比如说刚开始是中文，切换成英文后，页面内容都变成英文了，标题栏还是中文。

> `App端` 说明：`App模拟器`，以我的 `mac电脑` `ios模拟器` 来说，是正常的，可以直接切换，多语言也是生效的。
>
> 但是 `安卓真机` 会出现`切换多语言后，自动重启，然后界面多语言是生效的`。
>
> 既然 `App 正常`，这里主要说 `小程序端` 不正常的处理。

`小程序端` 需要使用 `uni.setNavigationBarTitle` 来手动处理，`API` 使用如下：

```js
uni.setNavigationBarTitle({
  title: '新的标题',
})
```

结合 `translate` 函数，则：

```js
uni.setNavigationBarTitle({
  title: translate('app.name'),
})
```

可以满足大部分场景。

## tabbar 标题

同 `导航栏标题`。使用 `uni.setTabBarItem` 来手动处理。

## App 端视频

这里给出 `2` 个 `App端` 的视频，加深开发者的认识和印象。

:::details

### `ios模拟器` 多语言直接就是生效的

<video src="./assets/10-ios.mp4" controls="controls" width="300px" height="100%"></video>

### `安卓真机` 会自动重启，重启后界面多语言是生效的

<video src="./assets/10-android.mp4" controls="controls" width="300px" height="100%"></video>
:::

## 总结

本文介绍了 `unibest` 里面使用 `多语言` 的基本方式，还处理了 `3` 个多端异常的问题：

- `多语言传参` 不生效 BUG
- `导航栏标题` 切换多语言不生效 BUG
- `tabbar标题` 切换多语言不生效 BUG

全文完~