微信点击事件,跳转页面,页面生命周期及如何阻止冒泡点击事件扩散到父节点

本文介绍了微信小程序中的点击事件，将其与Vue进行对比，并详细讲解了页面跳转的wx.navigateTo和wx.redirectTo两种方法及其生命周期差异。同时，文章还探讨了如何阻止点击事件冒泡到父节点，通过catchtap实现这一目标。

最近在学习小程序,把自己的知识点整理一下

点击事件:

  <view class='moto-container' bindtap='onTap'>
    <text class='moto'>开始小程序之旅</text>
  </view>

因为本人有过vue基础,而微信感觉好vue有太多相似之处
首先点击事件在微信里叫冒泡事件

bindtap     这个就是点击事件

这是微信官方文档给的所有事件
无论你要使用那种事件,请记得前面一定要加bind,如刚才代码所示
在这里插入图片描述
如何实现页面跳转以及他的生命周期
跳转页面有两种方法,一个是wx.navigateTo方法
另一个就是 wx.redirectTo方法
来一起和我看一下他们的区别吧~

onTap: function() {
        wx.navigateTo({
             url: '../posts/post'
        });
        
    },
    onHide:function(){

    },

当执行navigateTo实行跳转的时候,实际上只是把跳转之前的页面给隐藏了.并没有结束它的生命周期,这时候会调用onHide方法.如图所示:
在这里插入图片描述

onTap: function() {
        wx.redirectTo({
            url: '../posts/post',
        })
    },
    onUnload: function() {
        console.log(123)
    }

当使用wx.redirectTo跳转页面的时候,这时候返回的按钮消失了而且调用了onUnload方法.跳转之前的页面生命周期结束.如图
在这里插入图片描述
跳转语句完整的写法是:

wx.redirectTo({
    url: '',
    success:function(){},
    fail:function(){},
    complete:function(){}
})

这个语法有点类似于Java的
try {

	} catch (Exception e) {
	
	}finally {
	
	}
success跳转成功调用的方法
fail是跳转失败调用的方法
complete是成功或失败都调用的方法

冒泡事件

  <view class='moto-container' bindtap='onTap'>
    <text class='moto'bindtap='onSubTap'>开始小程序之旅</text>
  </view>

这里父节点和子节点都有点击事件,如果点击子节点的冒泡事件那么这时候父节点的冒泡事件也会相应
那么有没有一种方法可以阻止父节点冒泡事件的发生呢?
请看代码

  <view class='moto-container' bindtap='onTap'>
    <text class='moto' catchtap='onSubTap'>开始小程序之旅</text>
  </view>

这里的catchtap就是阻止父级冒泡事件的发生