Présentation de trois mini-événements de programme

Résumé : Cet article présente comment utiliser l'applet WeChat événement. 1 : L'événement apparaît dans l'outil de développement d'applets WeChat. Créez un nouveau dossier d'événements, créez un nouveau fichier et remplissez le code suivant dans event.wxml : viewclass=view1bindtap=view1clickid=view1 data. -title=titre de l'actualité data-id=100 Ici...

Cet article explique comment utiliser les événements du mini-programme WeChat.

1 : Événement bouillonnant

à WeChatDans le mini outil de développement de programme, créez un nouveau dossier d'événements, créez un nouveau fichier et remplissez le code suivant dans event.wxml :

1. <view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
     这里是view 1
       <view class="view2" bindtap="view2click" id="view2">
            这里是view 2
             <view class="view3" bindtap="view3click" id="view3">
                  这里是view 3
             </view>
       </view>
   </view>

Remplissez le code suivant en événement.wxss :

.view1{
  height: 500rpx;
  width: 100%;
  background-color:beige;
}
.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

1. .view3{
     height: 300rpx;
     width: 60%;
     background-color:aqua;
   }

Ajoutez le code suivant à event.js :

1. //事件处理函数
     view1click : function(event){
       console.log("view1click")
     },
     view2click : function(){
       console.log("view2click")
     },
     view3click : function(event){
        console.log("view3click")
     },

Compilez et exécutez, puis cliquez sur View3 résultat de la zone dans le simulateur Comme le montre la figure 1 : Vous pouvez voir qu'en plus de view3, les événements de clic de view2 et view1 ont répondu. Il s'agit de l'événement de clic bouillonnant

Figure 1

2 : Bloquer les événements bouillonnants

volonté

1. <view class="view3" bindtap="view3click" id="view3">

a été remplacé par

1. <view class="view3" catchtap="view3click" id="view3">

--- est remplacé par : catchtap

Les autres codes restent inchangés, compilez et exécutez ou cliquez sur la zone view3, vérifiez les informations du journal, comme le montre la figure 2, l'événement ne bouillonne plus Figure 2

3 : Informations sur l'événement entrantes

Dans le code ci-dessus :

view1click : function(event)Ajoutez le code pour imprimer les informations sur l'événement entrant comme suit : Compilez et exécutez comme indiqué dans la figure 3 :

1. view1click : function(event){
       console.log("view1click")
       console.log(event)
     }

Figure 3

L'ensemble de données contient l'attribut personnalisé, id : 100, titre : "News Title", Cet attribut personnalisé est défini dans le code suivant :

[Recommandations associées]

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2. Téléchargement complet du code source de l'applet WeChat

3. Démo du mini programme WeChat : centre commercial d'imitation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!