How to customize the title content of the uni-app applet (how to solve the problem that the title of the applet is not centered)

Problem Description

提示：这里描述项目中遇到的问题：
I encountered such a problem in the project. The title of the WeChat applet opened with the WeChat developer tool is centered, but after debugging on the real machine, the title is indeed on the left. Later, I checked the information and found out that this is the default Android title of uni is on the left, and Apple devices are in the middle (this...is it a special love for Android users???)

---

solution:

Keywords: this custom title, uView,

1. Since you want to customize the navigation bar, you must first cancel the navigation bar that comes with the system, which needs to be set in "pages.json" in the root directory of uni-app

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

2. Try the Navbar custom navigation bar that comes with uView in your page

<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. In this way, the title can remove the influence of uni, and it can be centered on both Android and Apple. If you have other requirements for the title part, you can read the official documentation of nView