玩轉(zhuǎn)Taro.gif

在使用 Taro 構(gòu)建小程序或跨平臺項目時，國際化（i18n）是一個常見需求，尤其當(dāng)你的應(yīng)用需要支持多種語言時。Taro 本身并未直接提供國際化功能，但可以利用第三方國際化庫（如i18next、react-intl、@lingui/react）來實現(xiàn)。

以下是 Taro 項目中實現(xiàn)國際化的完整指南:

1. 使用 i18next 實現(xiàn)國際化

i18next是一個簡單高效的國際化解決方案，且容易集成到 Taro 項目中。

1.1 安裝依賴

在 Taro 項目中安裝相關(guān)依賴：

yarn add i18next react-i18next

如果使用 TypeScript，還需要安裝類型定義文件：

yarn add @types/react-i18next -D

1.2 配置 i18next

在項目的 src/ 目錄下創(chuàng)建i18n.js 文件，用于配置和初始化 i18next。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 定義語言資源
const resources = {
  en: {
    translation: {
      welcome: "Welcome to Taro",
      description: "This is an internationalized app",
    },
  },
  zh: {
    translation: {
      welcome: "歡迎使用 Taro",
      description: "這是一個國際化的應(yīng)用",
    },
  },
};

// 初始化 i18next
i18n
  .use(initReactI18next) // 使用 React 插件
  .init({
    resources, // 多語言資源
    lng: 'zh', // 默認語言
    fallbackLng: 'en', // 備用語言
    interpolation: {
      escapeValue: false, // React 已經(jīng)對 XSS 進行轉(zhuǎn)義
    },
  });

export default i18n;

1.3 在項目中引入配置

在項目入口文件（例如 app.js 或 app.tsx）中引入配置文件：

import React from 'react';
import './app.css';
import './i18n'; // 引入 i18next 配置

const App = ({ children }) => {
  return children; // 如果有多語言切換組件，可以在這里引入
};

export default App;

1.4 使用多語言工具

在組件中使用react-i18next提供的 useTranslation Hook 來獲取翻譯內(nèi)容。
示例：在頁面中使用
如在 pages/index/index 中：

import React from 'react';
import { Button, Text, View } from '@tarojs/components';
import { useTranslation } from 'react-i18next';

const Index = () => {
  const { t, i18n } = useTranslation();

  // 切換語言
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng); // 動態(tài)更改語言
  };

  return (
    <View>
      <Text>{t('welcome')}</Text> {/* 翻譯內(nèi)容 */}
      <Text>{t('description')}</Text>
      <Button onClick={() => changeLanguage('en')}>English</Button>
      <Button onClick={() => changeLanguage('zh')}>中文</Button>
    </View>
  );
};

export default Index;

在運行時，點擊按鈕即可切換語言，比如從簡體中文切換到英文。

2. 動態(tài)加載國際化文案

在項目較大，文案量較多時，可以將語言文件拆分成多個文件并按需動態(tài)加載。
在 src/locales目錄中創(chuàng)建語言文件：

• src/locales/en.json

{
  "welcome": "Welcome to Taro",
  "description": "This is an internationalized app"
}

• src/locales/zh.json

{
  "welcome": "歡迎使用 Taro",
  "description": "這是一個國際化的應(yīng)用"
}

2.2 修改 i18n.js 配置

使用 i18next的 backend插件實現(xiàn)語言文件的動態(tài)加載。
安裝依賴：

yarn add i18next-http-backend

修改 i18n.js 文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend'; // 導(dǎo)入后端插件

i18n
  .use(Backend) // 使用動態(tài)加載插件
  .use(initReactI18next)
  .init({
    lng: 'zh', // 默認語言
    fallbackLng: 'en', // 備用語言
    interpolation: {
      escapeValue: false,
    },
    backend: {
      // 配置語言文件路徑
      loadPath: '/locales/{{lng}}.json',
    },
  });

export default i18n;

2.3 配置 Taro 項目語言文件資源

確保將配置的語言文件路徑 (/locales/{{lng}}.json) 放到靜態(tài)資源目錄，供小程序和 Web 使用。

例如，在 src/locales 內(nèi)存放語言文件后，通過 Taro 的構(gòu)建配置將其輸出到 dist：

// config/index.js 添加 copy 配置，將靜態(tài)語言文件拷貝到打包輸出目錄
const config = {
  // ...
  copy: {
    patterns: [
      { from: 'src/locales/', to: 'dist/locales/' }, // 配置語言文件路徑
    ],
  },
};

export default config;

3. 國際化切換語言保存

為了記住用戶選擇的語言設(shè)置：

• 使用 localStorage 或 Taro.setStorage 保存和獲取當(dāng)前語言。

• 在 i18next 初始化時，讀取存儲的語言：

i18n.init({
  lng: Taro.getStorageSync('language') || 'zh', // 當(dāng)前語言
});

• 每次切換語言時，更新存儲：

const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
  Taro.setStorageSync('language', lng); // 更新本地存儲
};

4. 與多平臺兼容

Taro 支持跨平臺開發(fā)（如微信公眾號、小程序、H5），但不同平臺對國際化的支持方式稍有不同：

• 小程序：直接使用 i18next 或自定義簡單翻譯工具。
• H5 和 Web：可以完整采用 i18next，并動態(tài)加載語言文件。
• 離線國際化：如果目標平臺不支持異步加載國際化文案，需在打包時將多語言文案嵌入項目。

總結(jié)

通過以上方式，我們可以在 Taro 項目中方便地集成國際化，支持語言動態(tài)加載和切換。整個流程分為以下幾點：

• 配置 i18next 并管理語言資源。
• 頁面中使用 useTranslation Hook 獲取翻譯文案。
• 動態(tài)加載語言資源，提高性能。
• 存儲用戶語言偏好，提升用戶體驗。

完成后可以實現(xiàn)靈活的國際化支持，比如 H5 頁面中實時切換語言，或小程序適配不同地區(qū)的語言需求。