Para desenvolvedores habituados ao ecossistema C# e ASP.NET, o conceito de roteamento em WeChat Mini Programs pode ser comparado ao gerenciamento de estados em aplicações de página única (SPA). O framework do WeChat oferece cinco métodos principais para navegação: wx.switchTab, wx.reLaunch, wx.redirectTo, wx.navigateTo e wx.navigateBack. Compreender como esses métodos interagem com a pilha de páginas é crucial para evitar gargalos de performance e erros de navegação.

A Pilha de Páginas (Page Stack)

O WeChat Mini Program mantém uma pilha de páginas limitada a 10 níveis. É fundamental entender que o método wx.navigateTo adiciona uma nova camada a essa pilha. Se você tentar navegar para uma 11ª página usando este método sem liberar as anteriores, a transação falhará. Por outro lado, o wx.redirectTo encerra a página atual e a substitui pela nova, mantendo o tamanho da pilha inalterado.

Navegação Programática via JavaScript

A forma mais comum de realizar o redirecionamento é através de eventos disparados no arquivo WXML que invocam funções no arquivo JS correspondente.

<!-- Exemplo de trigger no WXML -->
<button class="btn-primario" bindtap="irParaDetalhes">
   <text>Ver Detalhes</text>
</button>

No arquivo JavaScript, implementamos a lógica utilizando o objeto global wx:

// Implementação no arquivo .js
irParaDetalhes: function() {
   wx.showLoading({
       title: 'Processando...',
   });

   wx.navigateTo({
       url: '/pages/produto/detalhes',
       success: () => {
           wx.hideLoading();
       }
   });
}

Navegação Declarativa com o Componente Navigator

Semelhante às tags de âncora no HTML ou controles de navegação em XAML, o cmoponente <navigator> permite definir a rota diretamente na marcação, o que reduz a necessidade de código boilerplate no JavaScript.

<!-- Navegação simples com efeito visual de clique -->
<navigator url="/pages/config/perfil" hover-class="botao-ativo">
   Acessar Perfil
</navigator>

<!-- Navegação que substitui a página atual (sem botão voltar) -->
<navigator url="/pages/login/index" open-type="redirect">
   Sair e Fazer Login
</navigator>

Passagem e Captura de Parâmetros

A transferência de dados entre páginas ocorre através de query strings na URL. Para múltiplos parâmetros, utilizamos o caractere &.

// Enviando múltiplos valores
wx.navigateTo({
   url: '/pages/vendas/confirmacao?pedidoId=8892&status=pendente&origem=mobile'
});

Para recuperar esses valores na página de destino, utilizamos o objeto options dentro do ciclo de vida onLoad:

onLoad: function(options) {
   const id = options.pedidoId;
   const status = options.status;
   console.log(`Pedido: ${id}, Status: ${status}`);
}

Transferindo Objetos Complexos

Como o sistema de rotas aceita apenas strings, objetos complexos devem ser serializados em JSON antes do envio e desserializados no recebimento.

// No remetente: Serialização
const payload = { id: 1, nome: 'Serviço Premium', preco: 150.00 };
wx.navigateTo({
   url: '/pages/checkout/resumo?dados=' + JSON.stringify(payload)
});

// No destinatário: Desserialização
onLoad: function(options) {
   if (options.dados) {
       const objetoRecebido = JSON.parse(options.dados);
       this.setData({
           infoServico: objetoRecebido
       });
   }
}

Regras de Destino: TabBar vs Páginas Comuns

É importante lembrar que existem restrições de roteamento baseadas no tipo de página:

• navigateTo e redirectTo funcionam apenas para páginas que não fazem parte da TabBar.
• Para navegar para uma página listada na TabBar, deve-se obrigatoriamente usar wx.switchTab.