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

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

事件

一、 事件

什么是事件

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

事件分类

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

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

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

  <view bindtap="handleTap">
      Click here!
  </view>
  

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

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

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

  <view id="outer" bindtap="handleTap1">
    outer view
    <view id="middle" catchtap="handleTap2">
      middle view
      <view id="inner" bindtap="handleTap3">
        inner view
      </view>
    </view>
  </view>
  

dataset

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

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

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

  示例：

  <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 // 大写会转为小写
    }
  })
  

点击事件和自定义数据主要用于：页面和组件之间的传值

例如：在/pages/index/index中引用了组件中的card组件,要如何将index中的数据传递到card中去呢？

1. 引用组件（之前说过）
2. 传值

/pages/index/index

<!--index.wxml-->
<view>我是首页的内容</view>
<button class="card1" bindtap="showCard1">点击显示卡片1</button>
<card cardData="{{cardItem}}" wx:if="{{isShow}}"></card>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    isShow: false,//卡片是否显示
    //要传递到组件的数据
    cardItem: [{
        cardTitle: '订单编号',
        cardContent: 'D8392789279837'
      },
      {
        cardTitle: '商品名称',
        cardContent: '防晒霜'
      },
      {
        cardTitle: '订单金额',
        cardContent: '678.00'
      },
      {
        cardTitle: '支付时间',
        cardContent: '2022-04-26'
      },
    ]
  },
  // 事件处理函数
  // 点击查看卡片详情
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  
  // 点击显示card1
  showCard1() {
    console.log('点击事件：显示卡片');
    this.setData({
      isShow: true//点击显示变成true
    })
  },
  onLoad() {

  },

})

components/card/card.wxml

<!--components/card/card.wxml-->
<view class="view">
<!-- 卡片 -->
  <view class="cardBox">
    <view class="card-item" wx:for="{{cardData}}" wx:key="i" wx:for-item="item">
      <view class="card-title">{{item.cardTitle}}</view>
      <view class="card-con">{{item.cardContent}}</view>
    </view>
  
  </view>
</view>

// components/card/card.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        cardData: Object,//在这里接收pages传递过来的值
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 生命周期
        lifetimes: {
            ready: function () {
                // 在组件在视图层布局完成后执行
                console.log(this.data.cardData);//可以输出查看

            },
        }
    }
})

一、 路由跳转

注意事项

• 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
})

获取跳转路由携带的参数

wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onLoad (option) {
    console.log(option.id)
  }
})