unibest/docs/base/10-i18n.md

164 lines
4.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 多语言篇
`多语言` 是一个常见的需求, `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
全文完~