基于Appery的简易跨平台电商APP添加多语言支持的最简方案

一、准备多语言资源文件 #

• 在Appery项目根目录创建i18n文件夹，为每种目标语言单独创建JSON配置文件，比如en.json（英文）、zh-CN.json（简体中文）、es.json（西班牙语）。所有文件使用统一的key映射不同语言的文本：

  // en.json
  {
    "prod_001_desc": "Premium organic cotton t-shirt, breathable and durable for daily wear",
    "lang_select_title": "Select Language",
    "btn_confirm": "Confirm"
  }
  

  // zh-CN.json
  {
    "prod_001_desc": "优质有机棉T恤，透气耐用，适合日常穿着",
    "lang_select_title": "选择语言",
    "btn_confirm": "确认"
  }
  

• 把所有需要国际化的内容（商品描述、UI文字、提示语）都按这种key-value方式整理，确保key全局唯一。

二、实现语言切换与偏好存储 #

1. 本地存储用户语言选择
   • 用Appery自带的Local Storage组件保存用户选中的语言代码（如en、zh-CN），初始化时优先读取本地存储值，无值则 fallback 到设备系统语言：

     const savedLang = Apperyio.storage.get('user_selected_lang');
     const systemLang = navigator.language.split('-')[0] || 'en';
     Apperyio.variables.currentActiveLang = savedLang || systemLang;
     

2. 添加语言选择交互
   • 在APP设置页或首页添加下拉菜单/按钮组，列出支持的语言选项。绑定选择事件，更新当前语言变量并持久化：

     // 假设下拉菜单ID为lang-select
     const selectedLang = $('#lang-select').val();
     Apperyio.variables.currentActiveLang = selectedLang;
     Apperyio.storage.set('user_selected_lang', selectedLang);
     // 刷新页面使语言生效
     location.reload();
     

三、动态渲染国际化内容 #

• 商品描述等动态内容：页面加载时根据当前语言加载对应JSON文件，匹配商品的描述key渲染文本：

  // 假设当前商品ID存在变量productId中
  const descKey = `prod_${Apperyio.variables.productId}_desc`;
  $.getJSON(`i18n/${Apperyio.variables.currentActiveLang}.json`, function(langData) {
    $('#product-description').text(langData[descKey]);
  });
  

• 静态UI元素：直接在Appery组件的属性面板中绑定语言变量。比如把按钮的Text属性设为{{langData.btn_confirm}}，提前在页面初始化时将当前语言的JSON数据加载到langData变量中。

四、跨平台兼容注意事项 #

• 语言文件路径统一使用相对路径，Appery的资源文件夹在iOS和Android平台下都会被正确打包访问，无需额外配置。
• 测试系统语言自动适配：在iOS/Android设备上切换系统语言，验证未手动设置语言时APP是否自动切换到对应语言。
• 所有存储、文件读取操作都使用Appery提供的跨平台组件/API，避免调用iOS或Android原生API导致兼容性问题。

内容的提问来源于stack exchange，提问作者GalaVinnica