跳到主要内容

国际化开发指南

国际化原理说明​

image-20230410184630969

  • 前端页面加载后，会先请求语言包api
  • 语言包api会返回当前客户端所需要的语言包
  • 前端拿到语言包后，对UI的国际化文字进行渲染，进而根据当前语种显示相应的文字
tip

国际化版本中lang目录下的文件语言包将失效，会强制使用api返回的语言包

语言包说明​

语言包api地址​

/{base-api}//base/lang?lang={语种代码}&type={客户端类型}

参数说明​

语种代码​

在管理端菜单：设置/国际化/语言编码：

image-20230410172044194

客户端类型​

客户端参数值
买家PC端buyer
买家手机端mobile
商家端seller
管理端admin
装修端decor

返回值说明​

{
  "cancel": "取消",
  "view_order": "查看订单",
  "bailing_out_method": "开票方式",
  "withdrawn": "已撤回"
}

其中的key是页面中的国际化key，value是当前语种的文字

页面渲染示例​

假设有如下vue页面代码：

<template>
  <div >
    <h2>{{ $t('view_order') }}</h2>
 </div>    
</template>

根据语言包返回的 "view_order": "查看订单"关联性，界面最终渲染为：

<template>
  <div >
    <h2>查看订单</h2>
 </div>    
</template>

PC端开发说明​

vue页面国际化​

大部分页面内容是某个单词，如"订单"，“商品”这些属于单词式，还有一些少数的复杂句式情况，下面分别介绍：

单词式​

需要国际化显示文字的地方，需要用内置国际化渲染函数：$t('国际化key')

示例：

<template>
  <div >
    <h2>{{ $t('view_order') }}</h2>
 </div>    
</template>

句式​

有一些复杂的情况是一整句话，其中含有变量，如果单纯的按中文拆词翻译，一些语种的语序是不对的，如下面的句子

送满100减10

中文的语言包是：

满{{ coupon.coupon_threshold_price  }}减{{ coupon.coupon_price}}

对应英文的语言包应该为：

Get {{ coupon.coupon_price  }} off orders over {{ coupon.coupon_threshold_price  }}

可见变量的语序发生了变化，这种情况需要使用MixinI18nTemplate，例：

<span>{{ MixinI18nTemplate({coupon}, 'coupon_tips') }}</span>

其中的coupon是上下文的变量名字，可以是多个，逗号隔开，如:

<span>{{ MixinI18nTemplate({coupon,other}, 'coupon_tips') }}</span>

其中coupon_tips是在后台定义的国际化key，见下文“更新语言包说明”

tip

原理说明：MixinI18nTemplate函数，会去加载语言包中key为coupon_tips的文字

中文得到：满{{ coupon.coupon_threshold_price }}减{{ coupon.coupon_price}}

英文得到：Get {{ coupon.coupon_price }} off orders over {{ coupon.coupon_threshold_price }}

进而通过上下文的coupon变量将语言包渲染为：

送满100减10或Get 10 off orders over 100

Js的国际化​

单词式​

tip

以下规则适用vue中的js块，以及独立的js文件

需要国际化显示文字的地方，需要用内置国际化渲染函数：i18n.t('国际化key')

前提，需要引入：

import i18n from '@/lang/index'

句式​

背景同vue页面的句式语言包的情况，如有下面的场景：

text = this.MixinI18nTemplate({child, unit}, 'step_discount_tips')

则语言包可以为：

Get ${child.discount} off orders over ${child.threshold}${unit}

其中step_discount_tips为国际化key

路由国际化​

基于国际化的原则：

国际化版本中lang目录下的文件语言包将失效，会强制使用api返回的语言包

路由及菜单需要的语言，也由语言包中加载，但有其特殊位置，会使用语言包中的route子节点，举例如下：

{
 //其他标准语言包，略...

"route": {
    "goodsList": "商品列表",
    "serviceDetail": "售后服务详情",
    "editFullCut": "编辑满减"
  }

基于上述路由语言包，假设有如下路由配置：

{ 
  path: 'goods-list', 
 component: () => import('@/views/goods/goodsList'), 
 name: 'goodsList',
 meta: { title: 'goodsList' }
},

那么菜单名称及页面标题，会应用语言包中的route.goodsList，也就是商品列表

移动端开发说明​

Vue页面国际化​

同pc端

JS国际化​

同pc端

pages国际化​

在uniapp的规则中，pages约定了页面名称、`tabbar·等的规则，这其中的文字显示部分，也需要国际化，遵循

国际化版本中lang目录下的文件语言包将失效，会强制使用api返回的语言包

的规则，这些文字也由语言包中加载，但有其特殊位置，会使用语言包中的pages子节点，举例如下：

{
 //其他标准语言包，略...

"pages": {
    "pages/tabs/home/home": "首页",
    //其他略
  }

基于上述pages语言包，假设有如下pages配置：

  "pages": [
    {
      "path": "pages/tabs/home/home",
      "style": {
        "navigationStyle": "custom"
      }
    }

那么菜单名称及页面标题，会应用语言包中的pages.path和pages文件中的对应项，也就是首页

更新语言包说明​

我们在二开过程中，需要不断新增语言包中的单词，在这里讲述一下如何更新语言包中的单词

在管理端菜单：首页/设置/国际化/界面翻译 进入到界面翻译页面，如图：

img.png

方式一 单个添加单词​

点击添加按钮，新增一条语言包 如图：

img.png

图片中红色框内的内容，是根据开启的语言自动加载的，如果开启三种语言，那么就会有三条记录，如果只开启一种语言，那么就只有一条记录

根据文档上述描述设置客户端类型、ui类型、国际化key，与国际化key对应的语言然后点击保存即可，保存成功后，会自动刷新语言包。

方式二 批量导入单词​

在界面翻译页面下载excel模板，如图：

img.png

模版下载后，按照模版中的格式，填写好对应的信息，然后进行上传，上传成功后，会自动刷新语言包。

img.png

模版中红框的位置，是开启的语言 如果开启三种语言，那就找到对应的语言编码新增一列，如果只开启一种语言，那么就删除其中一列

客户端类型取值表​

客户端参数值
买家PC端buyer
买家手机端mobile
商家端seller
管理端admin
装修端decor
pc路由router
移动端pagestabbar移动端tabbar中的text文字
移动端pagestitle移动端的title定义
tip

注意pages相关的语言包，要和pages文件中的path值对应

如语言包:

"pages":{
   "/a/b/c":"文字"
}

会对应pages文件中：

{
     "path": "/a/b/c",
}