uni-app小程序如何自定义标题内容（如何解决小程序标题不居中）

问题描述

提示：这里描述项目中遇到的问题：
项目中遇到这样一个问题，用微信开发者工具打开的微信小程序标题是居中的，但是真机调试后标题默确是居左。后来查询了资料才知道这是uni默认安卓标题居左，苹果设备居中排（这…是对安卓用户特别的爱吗？？？）

---

解决方案：

关键词：这自定义标题、uView、

1.既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app的根目录的"pages.json"中设置

"pages": [
{
    
      "path": "pages/tabbar/my/myTest",
      "style": {
    
        "navigationBarTitleText": "我的测试",
        "navigationBarTextStyle": "white", // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
        "navigationStyle": "custom" // 隐藏系统导航栏
      }
    },
]

2.在你的页面中试用uView自带的Navbar 自定义导航栏

<template>
  <view>
    <u-navbar
      is-back="true"
      :border-bottom="false" //是否显示导航栏左边返回图标和辅助文字
      title-color="white"
      :background="navbar_bg"
      title="我的测试"
    ></u-navbar>
  </view>
</template>
<script>
data: () => ({
    
    navbar_bg: {
    
      'background-color': 'transparent'
    }
  }),
</script>

3.这样标题就就可以去除uni的影响，在安卓和苹果上都可以居中了，如果对标题部分还有其它的要求可以在看下nView的官方文档