@tc-i18n文档

Appearance

微信小程序 使用 ​

由于微信小程序的构建过程由微信开发工具执行，所以为了不影响本地源文件代码，采用的方案是由@tc-i18n 生成转换后完整的项目文件，然后将新的项目文件在微信开发工具中运行上传。

一、安装插件 ​

插件主要为提供翻译工具函数，类型vue-i18n中的$t函数，安装后，在项目代码中即可使用$t函数进行翻译。

shell
npm install @tci18n/miniprogram -D

二、初始化配置文件 ​

init 命令用于生成配置文件，执行一次即可。

shell
npx tci18n init

选择 微信小程序

选择框架

执行完后，会在项目根目录下生成 tci18n.config.json 文件。

TIP

需要按照自己的实际需求修改 tci18n.config.json 配置文件，可以按照文件, 组件, 函数, 属性等维度, 自行决定哪些需要国际化，哪些不需要。
查看 tci18n.config.json 配置

三、修改 tci18n.config.json 配置文件 ​

用来指定输出的项目文件夹目录， 最终会生成完整项目文件结构。

js
{
  ...
  output: 'dist', // 制定输出的项目文件夹目录
}

四、提取语料 ​

transform 命令用于提取语料，如果后续需要更新语料，重复执行此步骤即可。

shell
npx tci18n transform

执行transform

执行完成后，会将提取出来的语料数据存放在项目根目录下的 locale/langs.json 文件中。

json
{
    "zh-cn": {
        "你好": "你好",
        ...
    }
}

语料翻译

注意：transform 提取出来的语料只是未翻译的语料，如果要实现真正翻译，需要自己接入翻译工具对其进行翻译，然后放在 locale/langs.json 文件中， 比如：

json
{
    "zh-cn": {
        "你好": "你好",
        ...
    },
    "en-us": {
        "你好": "Hello",
        ...
    }
}

五、使用语料和设置语种 ​

微信小程序使用全局变量来控制当前语种和语料资源

  • globalThis.__tci18n_locale__: 当前显示的语种key
  • globalThis.__tci18n_langs__: 翻译后的语料资源

将翻译好的 langs.json 语料资源存直接赋值给 globalThis.__tci18n_langs__ 变量，然后通过切换 globalThis.__tci18n_locale__ 变量来切换语种。

TIP

除了使用 __tci18n_locale__和__tci18n_langs__ 全局变量来设置语种和语料资源外，也可以利用本地存储来设置

语种取值逻辑是：globalThis.__tci18n_locale__ || wx.getStorageSync('tci18nLocale') || 'zh-cn'

语料资源取值逻辑是：globalThis.__tci18n_langs__ || wx.getStorageSync('tci18nLangs') || {}

后续切换语种，只需要修改 globalThis.__tci18n_locale__ 变量即可。

然后再次执行 transform 命令，生成转换后的项目文件

六、运行项目 ​

执行完 transform 命令后，会把转换后的项目文件输出到 output 配置的目录下，将新的项目文件导入在微信开发工具中运行即可。