uni-app+vue3国际化下鸿蒙系统的tabbar无法翻译

uni-app+vue3国际化下鸿蒙系统的tabbar无法翻译

5 回复

hello ， 你说的是这个吗？ https://uniapp.dcloud.net.cn/tutorial/i18n.html#pages

更多关于uni-app+vue3国际化下鸿蒙系统的tabbar无法翻译的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是的，页面可以正常国际化翻译，tabbar翻译失败，会自动显示mainfest.json里面设置的默认回退语言的翻译。

目前鸿蒙页面国际化正常，未开放 tabbar 国际化，已在规划。你可以临时用 setTabItem 绕过处理。

谢谢 @DCloud_UNI_OttoJi，确认是暂未开放的话，我就再等等看吧。这个规划有时间节点吗？

在uni-app + Vue 3的国际化方案中，鸿蒙系统tabbar无法翻译的问题通常源于tabbar配置的静态特性。tabbar配置在pages.json中声明，这些配置在应用启动时加载，无法直接响应Vue组件的动态语言切换。

建议通过以下方式解决：

  1. 条件编译：针对不同语言环境打包多个应用版本，在pages.json中使用条件编译区分语言：
// #ifdef EN
"tabBar": {
  "list": [{
    "text": "Home"
  }]
}
// #endif
// #ifdef ZH
"tabBar": {
  "list": [{
    "text": "首页"
  }]
}
// #endif

  1. 原生插件：对于鸿蒙系统，可通过开发原生插件调用系统API动态修改tabbar文本。需在原生层监听语言变化事件并更新tabbar配置。

  2. 自定义tabbar：放弃原生tabbar，使用Vue组件实现自定义tabbar。这样可直接利用Vue3的响应式系统和i18n库（如vue-i18n）实现动态翻译：

<template>
  <view class="custom-tabbar">
    <view v-for="item in tabList" :key="item.pagePath">
      {{ $t(item.textKey) }}
    </view>
  </view>
</template>
回到顶部