O Elemanto Raiz: page

No ecossistema de Mini Programs, o componente <page> atua como a base de cada tela, sendo o equivalente funcional à tag &body> do HTML convencional.

Estruturação com view

O componente <view> é o principal contêiner de layout, substituindo a tradicional <div>. Diferente do desenvolvimento web padrão, o WXML não suporta tags semânticas como <section>, <article> ou <nav>. Portanto, a estruturação visual depende quase inteiramente de componentes view combinados com classes WXSS.

Manipulação de Texto com text

Diferente de outros elementos, o componente <text> possui comportamentos específicos para strings:

• Suporta quebras de linha via tecla Enter ou o caractere \n.
• Permite a seleção e cópia de conteúdo (funcionalidade exclusiva deste componenet).
• Aceita apenas o aninhamento de outros componentes text.

Renderização de Imagens: image

O componente <image> possui dimensões padrão fixas, por isso é fundamental definir largura e altura manualmente. Ele suporta carregamento progressivo (lazy loading) nativamente.

<!-- Exemplo de implementação de imagem -->
<image src="/assets/icons/home.png" mode="aspectFill" lazy-load="true" />

Principais modos de redimensionamento (mode):

• aspectFit: Redimensiona a imagem para caber totalmente no contêiner, mantendo a proporção.
• aspectFill: Preeenche todo o contêiner, cortando as bordas se necessário para manter a proporção.
• widthFix: A largura é fixa e a altura se ajusta automaticamente para manter a proporção original.
• heightFix: A altura é fixa e a largura se ajusta proporcionalmente.

Componente de Carrossel: swiper

Para criar banners ou sliders, utiliza-se o <swiper> que contém obrigatoriamente elementos <swiper-item>. Por padrão, o contêiner tem uma altura de 150px.

<swiper indicator-dots="true" autoplay="true" interval="3000" circular="true">
  <swiper-item>
    <view class="slide-content">Banner Publicitário 1</view>
  </swiper-item>
  <swiper-item>
    <view class="slide-content">Banner Publicitário 2</view>
  </swiper-item>
</swiper>

Interações e Capacidades Nativas: button

Além da função estética, o <button> no WeChat é a porta de entrada para APIs nativas através do atributo open-type.

Navegação entre Telas: navigator

O componente <navigator> gerencia o roteamento da aplicação. Existem comportamentos distintos baseados no tipo de página (Tab Bar ou páginas comuns).

<!-- Navegação para página comum -->
<navigator url="/pages/profile/details" open-type="navigate">Ver Perfil</navigator>

<!-- Mudança de aba no menu inferior -->
<navigator url="/pages/index/index" open-type="switchTab">Ir para Home</navigator>

<!-- Retornar à página anterior -->
<navigator open-type="navigateBack" delta="1">Voltar</navigator>

Renderização de Conteúdo Dinâmico: rich-text

Semelhante ao v-html do Vue.js, o <rich-text> permite injetar strings HTML dentro do Mini Program, convertendo tags HTML em nós nativos.

<rich-text nodes="<h1 style='color: blue;'>Título em HTML</h1>"></rich-text>

Componentes de Formulário e Ícones

Os componentes de entrada de dados como checkbox e radio permitem personalização limitada, focada principalmente na propriedade de cor.

<!-- Exemplo de Seleção Múltipla -->
<checkbox-group bindchange="handleSelection">
  <label>
    <checkbox value="dev" color="#07C160" /> Desenvolvimento
  </label>
  <label>
    <checkbox value="design" color="#07C160" /> Design
  </label>
</checkbox-group>

<!-- Ícones do Sistema -->
<icon type="success" size="30" color="green" />
<icon type="warn" size="30" />

No JavaScript da página, os valores podem ser capturados através do objeto de evento:

Page({
  handleSelection(e) {
    const selectedValues = e.detail.value;
    console.log('Itens selecionados:', selectedValues);
  }
});