国际化（微信小程序+TS）

[chao]

已于 2022-11-05 15:32:49 修改

阅读量6.5k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 typescript

于 2022-06-22 09:31:13 首次发布

本文链接：https://blog.youkuaiyun.com/kjc513/article/details/125390098

微信小程序专栏收录该内容

2 篇文章

订阅专栏

该文详细介绍了微信小程序的国际化配置步骤，包括环境配置、i18n文本定义、使用方法以及打包编译过程。通过gulp和miniprogram-i18n库，实现WXML和JS中的文本国际化，并提供了中文和英文的示例。同时，文章还讲解了如何进行语言切换和打包编译，确保小程序支持多语言环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2、配置project.config.js

3、打包

参考文档

一、环境配置

目录结构示例

├── dist               // 小程序构建目录
├── gulpfile.js
├── node_modules
├── package.json
└── miniprogram                // 小程序源文件目录
|   ├── app.js
|   ├── app.json
|   ├── app.wxss
|   ├── i18n           // 国际化文本目录
|   |   ├── en-US.json
|   |   └── zh-CN.json

1、安装根目录依赖

在项目根目录运行以下命令安装 gulp 及 miniprogram-i18n 的 gulp 插件。

npm i -D gulp @miniprogram-i18n/gulp-i18n-locales @miniprogram-i18n/gulp-i18n-wxml

2、安装minprogram依赖

1）初始化仓库 npm init

一直回车，最后输入yes，minprogram中生成package.json文件，即初始化成功，此时即可安装依赖。

2）安装依赖。

在 miniprogram下进入终端，输入以下命令

npm i -S @miniprogram-i18n/core

3）构建npm

小程序开发工具左上角>工具>构建npm，构建成功之后minprogram中会生成一个miniprogram_npm这个文件夹，这个时候就已经可以使用依赖了。

3、新建gulpfile文件

在根目录创建gulpfile.js文件

复制以下代码

/* eslint-disable require-jsdoc */
const {src, dest, series} = require('gulp');
const gulpI18nWxml = require('@miniprogram-i18n/gulp-i18n-wxml');
const gulpI18nLocales = require('@miniprogram-i18n/gulp-i18n-locales');

function mergeAndGenerateLocales() {
  return src('miniprogram/i18n/*.json')
      .pipe(gulpI18nLocales({defaultLocale: 'zh-CN', fallbackLocale: 'zh-CN'}))
      .pipe(dest('dist/i18n/'));
}

function transpileWxml() {
  return src('miniprogram/**/*.wxml')
      .pipe(gulpI18nWxml({
        wxsPath: 'miniprogram/i18n/locales.wxs',
      }))
      .pipe(dest('dist/'));
}

function copyToDist() {
  return src(['miniprogram/**/*', '!miniprogram/**/*.wxml', '!miniprogram/i18n/*.json'])
      .pipe(dest('dist/'));
}

exports.default = series(copyToDist, transpileWxml, mergeAndGenerateLocales);

二、i18文本定义

在minprogram中新建i18n文件夹，新建相应的json文件（内容为空时，必须有一个{}，否则报错）

（ps：目前 miniprogram-i18n 仅支持纯文本及文本插值，后续会对其他 i18n 特性进行支持）

1、中文 zh-CN.json

// i18n/zh-CN.json
{
  "cc": "超",
  "withdata": "{value}超"
}

2、英文 en-US.json

// i18n/en-US.json
{
  "cc": "chao",
  "withdata": "{value} chao"
}

三、使用

1、WXML中的使用

直接通过 t（'cc'）使用即可

<view>{{ t('cc') }}</view>
<view>{{t('cc',{value：'kk'})}}</view>

2、Javascript中的使用

先引入，然后通过 i18n.t（'cc'） 直接使用即可

import { getI18nInstance } from '@miniprogram-i18n/core'
const i18n = getI18nInstance()

3、中英文切换

setLocale 设置当前语言

getLocale 获取当前语言

getFallbackLocale 获取备选语言

onLocaleChange（（）=> {}）语言改变时触发的回调

import { I18nPage } from '@miniprogram-i18n/core'
I18nPage({
  onLoad() {
    // 语言切换时触发
    this.onLocaleChange((locale) => {
      // 获取当前语言
      console.log('current locale:', this.getLocale(), locale)
    })
    // 设置中文
    this.setLocale('zh-CN')
  },
   
  toggleLocale() {
    // 切换语言
    this.setLocale(
      this.getLocale() === 'zh-CN' ? 'en-US' : 'zh-CN'
    )
  },
})