Taro3.x 国际化方案

前言

一些日常小程序业务貌似很久没升级Taro版本了，很多项目还是v3.3。所以想着，几乎快1年没升级了，看到taro3.6还是有蛮多的提升的，所以就升级了，没想到刚升级3.6.2就跑不起来了。

官方已经排查到了原因Taro3.6.2初始化后跑不起来 感兴趣的可以看看这个issue。

当我开始了新Taro3.6，运行速度明显加快，这可能要归功于webpack5吧。

国际化

怎么在Taro里做国际化呢？大部分人想到的是i18n吧，但事实是，其实做一个国际化方案并不难，不一定需要各种框架和组件。

以下是我自己设计的简单国际化模型，原理是借用了zustand这个新兴的store库。

先介绍的是我的全局store，负责监管taro运行语言

import { create } from 'zustand'

interface LangStore {
    lang: 'zh_CN' | 'en'
    changeLanguage: (lang: 'zh_CN' | 'en') => void
    toggleLanguage: () => void
}

export const useLanguageStore = create<LangStore>((set, get) => ({
    lang: 'zh_CN', // en
    changeLanguage: (lang) => set(() => ({ lang })),
    toggleLanguage: () => set(() => {
        return {
            lang: get().lang.includes('zh') ? 'en' : 'zh_CN'
        }
    })
}))

回到我们的app入口，把小程序语言环境初始化

 const systemInfo = useSystemInfo();
 
  useEffect(() => {

    if (!systemInfo) return;
    console.log(systemInfo);

    changeLanguage(systemInfo.language); // 注入系统语言
  }, [systemInfo]);

接着，我们需要设计两张中英互换的语言表

en.json

{
    "name": "Full Name"
}

zh.json

{
    "name": "姓名"
}

然后设计一个hooks，接收store的语言，输出一个翻译api

// 引入需要实现国际化的简体、英文两种数据的json文件
import zhTranslation from '../locales/zh.json'
import enTranslation from '../locales/en.json'
import { useLanguageStore } from '../stores/useLanguage';

export default function useI18n() {
    const { lang } = useLanguageStore();
    const locales = lang === 'en' ? enTranslation : zhTranslation;

    return (name) => {
        return locales[name]
    }
}

最后回到我们的业务中：

import { View } from "@tarojs/components";
import './index.less'
import useI18n from "../../hooks/useI18n";
import LangSelect from "@/components/langSelect";

const Index = () => {
  const T = useI18n();
  return (
    <View className="wrapper">
      <LangSelect />
      <View>{T('name')}</View>
    </View>
  );
};

export default Index

效果预览