微信小程序入门4--事件

事件入门

小程序官方文档对事件的解释如下

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

截取官方文档中的部分交互事件

事件实现流程

• 首先在页面.wxml中使用bind定义事件捕获,并绑定回调函数

<view bind:tap="onTap" class="journey-container"></view>

• 然后在.js文件中定义回调函数需要执行的业务逻辑

// 事件的回掉函数
  onTap: function(params) {
    //跳转页面
    console.log(666)
  },

• 随后触发事件(本例中是tap事件)，便可以执行对应逻辑

事件冒泡设置-catch与bind

catch会阻止事件继续冒泡，bind不会阻止事件继续冒泡

• 首先在页面.wxml文件中定义事件与回调函数

<view catch:tap="onViewTap" class="journey-container">
    <text catch:tap="onTextTap" class="journey">开启小程序之旅</text>
  </view>

• 然后在页面.js文件中定义回调函数

onViewTap: function(params) {
    console.log("on tap View")
  },
  onTextTap: function() {
    console.log("on tap Text")
  },

• 点击text-开启小程序之旅，仅调用onTextTap，是由于catch阻止了tap事件的冒泡行为

跳转页面事件介绍

• 小程序中提供了两个页面跳转的函数，为navigateTo与redirectTo，写在绑定事件的回调函数中，触发事件即可跳转路由，下面是回调函数onTap

onTap: function(params) {
    //跳转页面
    // wx.navigateTo({
    //   url:"/pages/posts/posts"
    // })
    //跳转页面
    wx.redirectTo({
      url:"/pages/posts/posts"
    })
  }

• 二者的区别：navigateTo保留当前父页面存入页面栈中，最多存10个页面，不会销毁当前页面,可返回；redirectTo会销毁当前父页面，直接跳转至下个子页面

• 跳转页面演示 在页面.wxml模块中添加了监听tap事件的回调函数onGoToDeatil

<view bind:tap="onGoToDetail" class="post-container">
</view>

在页面.js文件中添加跳转逻辑

onGoToDetail(event){
    wx.navigateTo({
      url:'/pages/post-detail/post-detail'
    })
  }

点击post-container组件即可完成页面跳转，至post-detail页面

至此便完成小程序事件入门