【微信小程序】【项目实战】三、事件（点击事件）、路由跳转_微信小程序点击事件

小程序框架介绍
注册页面
生命周期
页面路由

事件

一、 事件

什么是事件

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

事件分类

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

  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。（eg:bindtap）
  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。（eg:catchtap）

• 普通事件绑定(冒泡事件)————事件绑定的写法类似于组件的属性，如：

  <view bindtap="handleTap">
      Click here!
  </view>
  1
  2
  3

  如果用户点击这个 view ，则页面的 handleTap 会被调用。

• 绑定并阻止事件冒泡————除 bind 外，也可以用 catch 来绑定事件。
  与 bind 不同， catch 会阻止事件向上冒泡。

   例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2
   (因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，
   点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。
  1
  2
  3

  <view id="outer" bindtap="handleTap1">
    outer view
    <view id="middle" catchtap="handleTap2">
      middle view
      <view id="inner" bindtap="handleTap3">
        inner view
      </view>
    </view>
  </view>
  1
  2
  3
  4
  5
  6
  7
  8
  9

  注： 如果有弹出层，要阻止冒泡，否则会穿透。

dataset

• 在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

• 在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。

• 这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

  data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

  示例：

  <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
  
  Page({
    bindViewTap:function(event){
      event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
      event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
    }
  })
  1
  2
  3
  4
  5
  6
  7
  8

点击事件和自定义数据主要用于：点击事件时获取数据

比如：有for循环时，获取index

 <view wx:for="{{needData.val}}" wx:key="index" 
	class="dialog-item {{index==needData.toValIndex?'selectedItem':''}}" 
	data-dialogid="{{index}}" catchtap="getValueTap">{{item}}</view>  
1
2
3

一、 路由跳转

注意事项

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

上面是文档内容
路由

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/index'
})
//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
  url: 'test?id=1'
})
//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
  url: 'test?id=1'
})
//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
//使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
//关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

获取跳转路由携带的参数

wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onLoad (option) {
    console.log(option.id)
  }
})
1
2
3
4
5
6
7
8
9