本文共 963 字，大约阅读时间需要 3 分钟。

新建组件及配置导航栏

在项目根目录的 components 文件夹下新建一个名为 navbar 的文件夹，这是用于存放导航栏组件的 Default，我假设你已经根据之前的指引在 components/navbar 文件夹中创建了一个新的 Vue 组件。

接下来，我需要将这个组件添加到 app.json 文件中。右键点击项目根目录，选择 新建文件，然后创建一个 app.json 文件打开。然后编辑内容，添加如下配置：

{
  "pages": [
    "components/navbar/index"
  ]
}

这样就确保了这个组件作为应用的主页。

自定义导航栏配置

打开组件 navbar.vue，找到 <template> 部分，原有的代码可能如下：

   
   
  
    
添加组件
   

这可能看起来不够，接下来我要做如下优化：

   
  
    
     微信
    
  
    
    
     
添加组件
  
    
   

2. 修改 app.json 中的窗口配置将 navigationBar.BackgroundColor 设置为 #ffffff，此外可以设置其他参数根据需要调整。更新后的代码如下：

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "微信",
  "navigationBarTextStyle": "black",
  "navigationStyle": "custom"
}

使用传递参数方式

为了实现导航栏的自定义标题传递，可以在组件内部添加一个 props 参数，用于传递当前页面标题。然后，在 navbar.vue 中的 <template> 里将 pageName 传递下去。

这样每个页面可以通过传递 pageName 参数到组件中，动态显示当前页面标题。