微信小程序的事件机制

比如我们android从一个activity跳转到另一个activity,是通过Intent,而在小程序中从一个界面跳转到另外一个界面是通过什么方式呢？而事件又是什么东东？

什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

事件的使用方式

在组件中绑定一个事件处理函数

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

在微信小程序中函数的定义语法

方法名：function(){

 // 方法体

}

在微信小程序中触摸事件是tap,但是我们不能直接在标签中写tap="click" 而是在tap前加上bind,那么触摸事件就是bindtap,还有比如长按事件longpress,那么在标签中也是bindlongpress 

bindtap = "click"  这个意思是当用户在这个组件也就是控件触摸后 会去js中查找click函数并且执行其中代码

click_tap:function(){

console.log("我被点击了");

wx.navigateTo({

url: '../posts/posts',

})

},

这是我点击按钮后跳转到另外一个界面,wx可以看做是微信小程序中的内置对象,对应的url其实就是我们app.json配置的地址

但是很奇怪的问题发生了如图：

发现导航栏会有个返回键,当我点击返回键了以后还是回调了之前的界面.那么就相当于我们打开的界面是它的子界面,如果你不想有返回键,也就是说不想让它是子界面，可以这么弄：

click_tap:function(){

console.log("我被点击了");

wx.redirectTo({

url: '../posts/posts',

})

},

这样导航栏就不在会有返回键了,而成了它是个主界面.

上次讲的生命周期方法有二个方法没说onHide() onUnload()  如果哦懂android得话 这二个方法很好理解,onHide()方法相当于onPause()  onUnload()相当于onDestory()方法如果我们界面跳转是使用了wx.navigateTo,那么我们跳转后那个界面还在的,只是被隐藏了而已,假如我们跳转的是用wx.redirectTo，那么上一个界面就是被销毁了,但是在微信小程序中叫做卸载.

现在我们来做一个实验,

<view class="top_container" bindtap='onParentTap'>

<text class='user_name' bindtap='onSubTap'>开启小程序旅程</text>

</view>

我在text的父标签view上也添加了触摸事件,text本身也添加了触摸事件,通过log日记来分析下,在Page下添加二个函数：

onSubTap:function(){

console.log("text被点击了");

},

onParentTap: function () {

console.log("tex的父标签t被点击了");

},

点击text log如下：

点击view的log如下 也就是点击非文字区域：

从中我可以发现如果是点击了子标签,如果父标签也设置了触摸的话,也会执行,这在微信小程序中叫做冒泡事件,在文档中也有列出来一些冒泡事件。

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

如果你想阻止冒泡事件,就不要使用bind...等绑定事件,而是使用catch,还是以我们上面的例子：

<view class="top_container" catchtap='onParentTap'>

<text class='user_name' catchtap='onSubTap'>开启小程序旅程</text>

</view>