Es posible configurar la barra de navegación tanto en el archivo de configuración global app.json como en los archivos .json de cada página específica.

• Modificar el título de la barra de navegación: "navigationBarTitleText": "Mi Perfil"
• Cambiar el color del título: "navigationBarTextStyle": "white"
• Modificar el color de fondo: "navigationBarBackgroundColor": "#007AFF"
• No es posible alterar el ícono de retroceso ni el botón de la cápsula (requiere implementación de barra de navegación personalizada)

Configuración Dinámica de la Barra de Navegación

Para modificar dinámicamente las propiedades de la barra de navegación, se utiliza el componente page-meta junto con navigation-bar:

<page-meta>
    <navigation-bar title="{{tituloNavegacion}}" cargando="{{cargandoNavegacion}}" color-frente="{{colorFrenteNavegacion}}" color-fondo="{{colorFondoNavegacion}}" duracion-animacion-color="2000" funcion-tiempo-animacion="easeIn" />
</page-meta>
<view class="contenedor">
    <button bindtap="modificarBarraNavegacion">Actualizar Estilo de Barra</button>
</view>

Page({
  data: {
    tituloNavegacion: "Mi Página",
    cargandoNavegacion: false,
    colorFrenteNavegacion: "#000000",
    colorFondoNavegacion: "#ffffff",
  },

  modificarBarraNavegacion() {
    this.setData({
      tituloNavegacion: "Nuevo Título",
      cargandoNavegacion: true,
      colorFrenteNavegacion: "#ffffff",
      colorFondoNavegacion: "#007AFF",
    });

    setTimeout(() => {
      this.setData({
        cargandoNavegacion: false,
      });
    }, 2000);
  },
});

El componente page-meta sirve para especificar atributos de la página y escuchar eventos de página, debiendo ser siempre el primer nodo dentro de una página. El componente navigation-bar, a su vez, debe ser el primer nodo dentro de page-meta y permite configurar diversas propiedades:

Las funciones de tiempo disponibles son:

Barra de Navegación Personalizada

Para crear una barra de navegación completamente personalizada:

1. En el archivo app.js, obtener las alturas de la barra de estado y la barra de navegación durante el lanzamiento:

App({
  globalData: {
    alturaBarraEstado: 0,
    alturaBarraNavegacion: 0,
  },
  onLaunch() {
    const infoVentana = wx.getWindowInfo();

    this.globalData.alturaBarraEstado = infoVentana.statusBarHeight;
    this.globalData.alturaBarraNavegacion =
      infoVentana.screenHeight -
      infoVentana.windowHeight -
      infoVentana.statusBarHeight;

    console.log("Altura de barra de estado:", this.globalData.alturaBarraEstado);
    console.log("Altura de barra de navegación:", this.globalData.alturaBarraNavegacion);
  },
});

2. Configurar el uso de barra de navegación personalizada en el archivo .json de la página:

{
    "navigationStyle": "custom"
}

3. Utilizar los valores de altura calculados en la estructura WXML de la barra personalizada:

<view class="mi-barra-navegacion" style="height: {{alturaBarraNavegacion}}px; margin-top: {{alturaBarraEstado}}px;">
    <view class="titulo-navegacion">Mi Página</view>
</view>

.mi-barra-navegacion {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007AFF;
    color: white;
}

const aplicacion = getApp();

Page({
  data: {
    alturaBarraEstado: aplicacion.globalData.alturaBarraEstado,
    alturaBarraNavegacion: aplicacion.globalData.alturaBarraNavegacion,
  },
});