uni-app 【报Bug】page.json 设置的tabbar、导航标题栏文字多语言h5 和小程序都不生效

开发环境

项目	信息
产品分类	uniapp/H5
操作系统	Windows
操作系统版本	window10
IDE	HBuilderX
IDE版本	4.29
浏览器	Chrome
浏览器版本	130.0.6723.71
项目创建方式	HBuilderX

示例代码：

{
    "tabBar": {
        "color": "#909399",
        "selectedColor": "#303133",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/guide/guide",
                "iconPath": "static/tab-images/home.png",
                "selectedIconPath": "static/tab-images/home-active.png",
                "text": "%homepage%"
            },
            {
                "pagePath": "pages/message/message",
                "iconPath": "static/tab-images/notify.png",
                "selectedIconPath": "static/tab-images/notify-active.png",
                "text": "%messageXx%"
            },
            {
                "pagePath": "pages/mine/mine",
                "iconPath": "static/tab-images/services.png",
                "selectedIconPath": "static/tab-images/services-active.png",
                "text": "%mine1%"
            }
        ]
    }
}

操作步骤：

{
    "tabBar": {
        "color": "#909399",
        "selectedColor": "#303133",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/guide/guide",
                "iconPath": "static/tab-images/home.png",
                "selectedIconPath": "static/tab-images/home-active.png",
                "text": "%homepage%"
            },
            {
                "pagePath": "pages/message/message",
                "iconPath": "static/tab-images/notify.png",
                "selectedIconPath": "static/tab-images/notify-active.png",
                "text": "%messageXx%"
            },
            {
                "pagePath": "pages/mine/mine",
                "iconPath": "static/tab-images/services.png",
                "selectedIconPath": "static/tab-images/services-active.png",
                "text": "%mine1%"
            }
        ]
    }
}

预期结果：

page.json 设置的tabbar、导航标题栏文字多语言h5 和小程序生效

实际结果：

page.json 设置的tabbar、导航标题栏文字多语言h5 和小程序都不生效

bug描述：

page.json 设置的tabbar、所有的导航标题栏文字多语言h5 和小程序都不生效，manifest.json里面小程序特有相关描述和 h5的title怎样配置多语言？

图片

itying888 1楼•6 天前

这里的添加了name 安卓真机调试就报错

bupafengyu 2楼•6 天前

在处理uni-app中关于tabBar和导航标题栏文字多语言不生效的问题时，我们首先需要确保你已经正确配置了多语言文件，并且在代码中正确引用了这些多语言资源。以下是一些可能的代码示例和检查点，帮助你定位和解决问题。

1. 多语言文件配置

确保你的项目根目录下有一个locales文件夹，其中包含不同语言的json文件，例如en.json和zh.json。

en.json

{
  "tabBar": {
    "home": "Home",
    "settings": "Settings"
  },
  "navigationBar": {
    "title": "Page Title"
  }
}

zh.json

{
  "tabBar": {
    "home": "首页",
    "settings": "设置"
  },
  "navigationBar": {
    "title": "页面标题"
  }
}

2. 引入并使用多语言

在你的main.js或类似的入口文件中，引入并使用uni-i18n插件（如果尚未安装，可以通过npm install @dcloudio/uni-i18n安装）。

import Vue from 'vue'
import App from './App'
import i18n from './locales' // 假设你的多语言配置导出为i18n对象

Vue.config.productionTip = false

Vue.prototype.$t = (key, ...args) => i18n.t(key, ...args)

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3. 在页面或组件中动态设置标题和tabBar

对于导航标题栏，你可以在页面的onReady或onLoad生命周期中设置：

export default {
  onLoad() {
    this.$set(this, 'title', this.$t('navigationBar.title'));
    uni.setNavigationBarTitle({
      title: this.title
    });
  }
}

对于tabBar，由于uni-app的限制，tabBar的配置是在page.json中静态设置的，直接通过代码动态修改tabBar文本并不支持。一种解决方案是在应用启动时根据当前语言预设置page.json中的tabBar项，但这需要构建时处理，或者通过条件编译来区分不同语言的tabBar配置。

4. 小程序特定注意事项

确保你的小程序基础库版本支持最新的uni-app特性，同时检查微信开发者工具中的编译设置，确保没有禁用多语言相关的功能。

结论

由于tabBar配置的限制，你可能需要采用构建脚本或条件编译的方式为每个语言版本生成不同的page.json。对于导航标题栏，使用上述代码动态设置应该能够解决问题。如果问题依旧存在，请检查多语言文件的加载和解析过程是否有误。

uni-app 【报Bug】page.json 设置的tabbar、导航标题栏文字 多语言h5 和 小程序都不生效