多语言篇

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

pnpm create unibest my-project -t i18n

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

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

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

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

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端 生效，其他端 是不生效的，代码如下：

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

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

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

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

多语言传参

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

编写一个函数 formatI18n，如下：

/**
 * 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组件 里面使用方式如下：

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

用到的函数引入如下：

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

对应的 en.json 文件如下：

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

user 对象如下：

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

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

very good !

导航栏标题

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

App端 说明：App模拟器，以我的 mac电脑 ios模拟器 来说，是正常的，可以直接切换，多语言也是生效的。

但是 安卓真机 会出现切换多语言后，自动重启，然后界面多语言是生效的。

既然 App 正常，这里主要说 小程序端 不正常的处理。

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

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

结合 translate 函数，则：

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

可以满足大部分场景。

tabbar 标题

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

App 端视频

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

Details

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

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

总结

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

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

全文完~