微信小程序“navigationBarTitleText“: “全民优购“不显示

项目场景:

编译器使用HBuilderX,用uni-app框架创建一个商场小程序项目


问题描述

过程中在项目根目录下 page.json文件夹中配置了"globalStyle"节点控制头部导航样式时出现navigationBarTitleText失效问题。

  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }

微信小程序“navigationBarTitleText“: “全民优购“不显示_第1张图片
微信小程序“navigationBarTitleText“: “全民优购“不显示_第2张图片


原因分析:

提示:因为最终效果是运行到微信开发者工具上的,所以先在微信开发者工具上,找出问题,然后在HBuilderX编译器上对应地方修改代码。

分析:

navigationBarTitleText失效的原因:
1.navigationBar相关样式问题,导致字体显示不出来,常见:字体颜色和背景颜色一致,看不出效果。

.
.
2.全局配置的navigationBarTitleText与单个页面独立配置的navigationBarTitleText发生冲突覆盖。


解决方案:

提示:经核对代码,发现问题出在上面第二种情况。

在页面配置文件,home.json中,出现一个navigationBarTitleText的配置并且值为空
微信小程序“navigationBarTitleText“: “全民优购“不显示_第3张图片
导致 "globalStyle"中的navigationBarTitleText全局配置被覆盖,所以显示不出来指定值。
///——找到问题所在,回到HbuilderX中,在pages.json中发现,在page节点下,除了页面路径信息,还有页面相关配置信息。
///——原来,在创建页面时,由于勾选了注册页面信息,在自动创建页面并且注册页面信息时,工具会默认生成两行页面配置代码,如下所以。
微信小程序“navigationBarTitleText“: “全民优购“不显示_第4张图片

解决方法:
1.将其生成的页面配置文件删除。
2.给每个页面都设置对应的配置代码。

微信小程序“navigationBarTitleText“: “全民优购“不显示_第5张图片
最终效果:
微信小程序“navigationBarTitleText“: “全民优购“不显示_第6张图片

你可能感兴趣的:(前端,vue.js,微信小程序)