【微信小程序】解决配置Lingui库多语言转换出现乱码问题

bug描述

• 【现象】：项目线上使用繁体字出现乱码

• 【环境】：

   "@lingui/react": "^4.11.0",
   "@tarojs/taro": "3.5.12",
  

思考过程

0. package.json定位问题库——@lingui/react(多语言处理库)

1. 查看项目库配置相关代码

    //原代码
    let lang = Persist.getItem('lang'); 
    i18n.loadLocaleData(localeData);
    i18n.load(messages);
    if (!lang) {
      const info = Taro.getAppBaseInfo();
      lang = info.language?.replace('-', '_');
    }
    i18n.activate(lang || 'zh_CN');
   

   • 第10行代码设置本地语言相关，于是查看设置值是否附和库兼容值。

2. 查看库开发文档

   • 根据文档可知道，该库本地化需要遵循BCP-47 code

     • PS：上述官方文档中，繁体中文的设置

       

   • 而微信获取到的值为

     

解决

 //上述代码第3行后的改为下述代码
 // lingui库本地化设置
 let textLang = lang;
 i18n.loadLocaleData(localeData);
 i18n.load(messages);
 if (!textLang) {
   const info = Taro.getAppBaseInfo();
   lang = info.language?.replace('_', '-');
   const textMap = {
     'zh-CN': 'zh',
     'zh-TW': 'yue',
     'zh-HK': 'yue',
   }
   textLang = textMap[lang];
 }
 i18n.activate(textLang || 'zh');

总结

0. lingui库支持BCP-47 code 语言标记值设置本地转换
1. 微信小程序使用lingui库需要对语言标记值进行转换