uni-app pages.json国际化问题：配置globalStyle.app-plus.titleNView为false后，线上页面标题未翻译（已持续一年零九个月未修复）

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app pages.json国际化问题：配置globalStyle.app-plus.titleNView为false后，线上页面标题未翻译（已持续一年零九个月未修复）

产品分类

uniapp/H5

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.7.3
浏览器平台 Chrome
浏览器版本 108.0.5359.125
项目创建方式 HBuilderX

示例代码

{  
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages  
        {  
            "path": "pages/home/home",  
            "style": {  
                "navigationBarTitleText": "%home.titlle%"  
            }  
        }  
        ,{  
            "path" : "pages/user/user",  
            "style" :                                                                                      
            {  
                "navigationBarTitleText": "%user.titlle%",  
                "enablePullDownRefresh": false  
            }  

        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8",  
        "app-plus": {  
            "titleNView": false  
        }  
    },  
    "uniIdRouter": {}  
}

操作步骤

  • pages.json中，设置globalStyle.app-plus.titleNView为false

预期结果

  • 应正常对页面标题进行翻译

实际结果

  • 页面标题显示%xxx%，即没有对页面标题进行翻译

bug描述

uniapp Vue3版本 pages.json国际化，当配置了globalStyle.app-plus.titleNView为false时，配置navigationBarTitleText属性，在开发环境下，页面对应的navigationBarTitleText有进行翻译，当打包部署到生产环境时，页面对应的navigationBarTitleText都是%xxx%，没有进行翻译操作


Harmonyos Next教程
11 回复

我也是，Vue3国际化，网站标题中变量没有替换。
求大神解决啊！！！项目着急用。


titleNView为false会把导航栏隐藏掉

那为什么H5打包出来，网站的标题就是 %app.title% 。 就是ide测试运行的时候网站标题就是正常的，只要一打包编译标题就会呈现这中%xxx%。 能麻烦解决一下么？

回复 teammar: 这就是uni的bug，vue2的是没有这个问题的，我目前是加个了个全局的mixins，在页面onShow的时候，判断下document.title带不带%

export default { data () { return { _appTitle:’’ } }, onShow () { this.$nextTick(() => { let title = this._appTitle||document.title if(title[0] === ‘%’){ this._appTitle = document.title document.title = this.$t(title.replace(/%/g,’’)) } })

}

回复 半驯之马: 好的，感谢感谢，解决方案确实可以解决我的问题。

一年了，官方是不管这个bug了吗

一年半了，官方是没打算修复这个bug了吧

已确认问题，尽快修复

关于uni-app中pages.json国际化问题，特别是在配置globalStyle.app-plus.titleNView为false后线上页面标题未翻译的情况，这通常涉及到国际化配置与页面标题渲染的逻辑处理。以下是一个基本的代码案例，用于展示如何在uni-app中实现国际化，并尝试解决标题未翻译的问题。

1. 国际化配置文件（i18n.js）

首先，创建一个国际化配置文件，例如i18n.js，用于存储不同语言的翻译内容：

export const messages = {
  en: {
    welcome: 'Welcome',
    home: 'Home',
    // 其他翻译...
    pageTitle: 'English Page Title'
  },
  zh: {
    welcome: '欢迎',
    home: '首页',
    // 其他翻译...
    pageTitle: '中文页面标题'
  }
  // 可添加更多语言...
};

2. 获取当前语言并设置全局变量

在main.js中，根据用户设置或系统语言获取当前语言，并设置到Vue的原型上，以便全局访问：

import Vue from 'vue';
import App from './App';
import { messages } from './i18n';

const lang = 'zh'; // 假设当前语言为中文，实际应从用户设置或系统语言中获取
Vue.prototype.$t = (key) => messages[lang][key] || key;

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在页面中使用国际化标题

由于globalStyle.app-plus.titleNView为false时，页面的标题通常是通过页面配置或动态设置document.title来控制的。你可以在每个页面的onShow生命周期中动态设置标题：

export default {
  onShow() {
    // 假设你有一个方法根据当前页面动态获取标题key
    const titleKey = this.getTitleKey();
    document.title = this.$t(titleKey); // 使用国际化方法设置标题
  },
  methods: {
    getTitleKey() {
      // 根据当前页面返回对应的标题key
      return 'pageTitle';
    }
  }
}

注意事项

  • 上述代码示例是基于Vue和uni-app的基本框架，实际应用中可能需要根据具体项目结构进行调整。
  • 如果document.title设置无效，可能是因为某些平台或浏览器对页面标题的渲染有特定的限制或缓存机制。此时，可以考虑使用平台特定的API或方法来设置标题。
  • 对于持续未修复的问题，建议检查是否有相关的uni-app社区或官方反馈渠道，提供详细的复现步骤和日志，以便开发者团队能够定位并解决问题。
回到顶部