Este artigo explora como gerenciar eventos de toque em mini programas, demonstrando a captura de interações do usuário através de exemplos de código e detalhando a estrutura dos dados de eventos e os diferentes tipos de eventos de toque disponíveis.

Exemplo Prático de Interação

A seguir, um exemplo que ilustra como capturar a entrada do usuário e responder a eventos de toque para realizar operações simples.

Código JavaScript (.js)

Page({
   data: {
       displayValue: 0, // Valor exibido na tela
   },

   // Atualiza o valor exibido com base na entrada do usuário
   handleInput: function(event) {
       this.setData({
           displayValue: event.detail.value
       });
   },

   // Processa o toque em botões para modificar o valor exibido
   handleButtonClick: function(event) {
       // Obtém o valor da operação definido no atributo data-operation
       const operationValue = event.currentTarget.dataset.operation;
       this.setData({
           displayValue: this.data.displayValue + parseInt(operationValue, 10) // Converte para inteiro e soma
       });
   },
});
   

Código WXML (.wxml)

<!-- pages/home/home.wxml -->

<!-- Campo de entrada que chama handleInput ao ser digitado -->
<input class="inputstyle" bindinput="handleInput" />

<!-- Exibe o valor atual na tela -->
<view>Valor atual = {{displayValue}}</view>

<!-- Botão para adicionar 1, chama handleButtonClick com data-operation=1 -->
<button bindtap="handleButtonClick" data-operation="1" >Adicionar</button>

<!-- Botão para subtrair 1, chama handleButtonClick com data-operation=-1 -->
<button bindtap="handleButtonClick" data-operation="-1" >Subtrair</button>
   

Código WXSS (.wxss)

.inputstyle {
   border: 1px solid #4CAF50; /* Borda verde */
   border-radius: 8px;       /* Cantos arredondados */
   margin: 15px;             /* Margem externa */
   padding: 12px;            /* Espaçamento interno */
   color: #333;              /* Cor do texto */
   font-size: 16px;          /* Tamanho da fonte */
}
   

Estrutura dos Parâmetros de Eventos

Os eventos de toque retornam um objeto com informações detalhadas sobre a interação. Você pode acessar dados personalizados definidos em atributos HTML como data-nome (por exemplo, data-operation no exemplo acima) através de event.currentTarget.dataset.nome.

A estrutura do objeto de evento é similar a esta:

{
 "type": "tap",             // Tipo do evento (ex: 'tap', 'touchstart')
 "timeStamp": 1234,           // Timestamp do evento
 "target": {                  // Elemento que disparou o evento originalmente
   "id": "myButton",
   "dataset": {
     "customData": "value"    // Dados customizados do elemento
   }
 },
 "currentTarget": {           // Elemento ao qual o listener está anexado
   "id": "myButton",
   "dataset": {
     "customData": "value"
   }
 },
 "detail": {                  // Detalhes específicos do evento
   "x": 10,                   // Coordenada X relativa ao elemento
   "y": 20                    // Coordenada Y relativa ao elemento
 },
 "touches": [                 // Lista de todos os pontos de toque na tela
   {
     "identifier": 0,         // Identificador único do toque
     "pageX": 50,             // Posição X do toque na página
     "pageY": 60,             // Posição Y do toque na página
     "clientX": 50,           // Posição X do toque na viewport
     "clientY": 60            // Posição Y do toque na viewport
   }
 ],
 "changedTouches": [          // Lista de toques que mudaram desde o último evento
   {
     "identifier": 0,
     "pageX": 50,
     "pageY": 60,
     "clientX": 50,
     "clientY": 60
   }
 ]
}
   

Tipos de Eventos de Toque

O campo type no objeto de evento indica a natureza da interação. Os tipos de eventos de toque mais comuns incluem:

• touchstart: O dedo começa a tocar a tela.
• touchmove: O dedo se move sobre a tela enquanto toca.
• touchcancel: A interação de toque é interrompida (ex: por uma chamada telefônica).
• touchend: O dedo deixa de tocar a tela.
• tap: Um toque rápido na tela, onde o dedo toca e levanta rapidamente.
• longpress: O dedo permanece na tela por mais de 350ms antes de levantar. O evento tap não é disparado se longpress for acionado.
• longtap: Similar a longpress, mas longpress é o evento recomendado.
• transitionend: Disparado após a conclusão de uma transição WXSS ou animação wx.createAnimation.

Exemplo de Detecção de Tipo de Evento

É possível registrar um único manipulador para múltiplos tipos de eventos e, dentro dele, determinar qual evento foi disparado.

Código JavaScript (.js)

Page({
   // ... outros dados e métodos ...

   // Manipulador genérico para eventos de toque
   handleInteraction: function(event) {
       const eventType = event.type;
       console.log("Tipo de evento:", eventType);

       if (eventType === 'tap') {
           console.log("Ocorreu um toque rápido.");
       } else if (eventType === 'touchstart') {
           console.log("Início do toque.");
       } else if (eventType === 'touchend') {
           console.log("Fim do toque.");
       }
       // Adicione mais condições para outros tipos de evento conforme necessário
   },
});
   

Código WXML (.wxml)

Para que o manipulador handleInteraction receba diferentes tipos de eventos, eles devem ser explicitamente vniculados:

<!-- pages/components/touchHandler.wxml -->

<!-- Vincula múltiplos eventos de toque ao mesmo manipulador 'handleInteraction' -->
<view
   bindtap="handleInteraction"
   bindtouchstart="handleInteraction"
   bindtouchend="handleInteraction"
   class="interaction-area">
   Interaja aqui
</view>