微信小程序学习（二）

一、事件响应与数据传输

事件的定义：1、事件是视图层到逻辑层的通讯方式；2、事件可以将用户的行为反馈到逻辑层进行处理；

3、事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数；

4、事件对象可以携带额外信息，如 id, dataset, touches；

（简单的说事件就是绑定在控件上的函数，控件上也可以绑定上对应的数据集合通常命名方式为data-XX，这里的XX为用户定义）

事件的使用方式：bindtap="触发事件的名称" 用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

那么处理函数该如何定义呢？下面给出了相关函数的定义

处理函数名称：function(){
    //事件处理函数
}    //要写在page页面里面，当处理函数较多时整个page页面会显得比较庞大，可读性较差

使用WXS函数来响应事件：（将方法汇集，减少对应js文件，将其与js分离）

使用方式：<wxs module="wxs的名称" src="连接地址"></wxs>

<!--pages/mywx/mywx.wxml-->
<view bindtap="click">{{info}}</view>
<wxs module="wxs" src="../F/F.wxs"></wxs>
<view bindtap="{{wxs.click}}" class="A">{{info2}}</view>

// pages/mywx/mywx.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:"点击我",
    info2:"点击我"
  },
  click:function(){
    self=this
    self.setData({
      info:"我被点击了，通过函数"
    })
  },
  M:function(){
    self = this
    self.setData({
      info2: "我被点击了，通过WXS"
    })
  }
})


function Click(event,ownerInstance) {
  var info2="我被点击，通过WXS"
  var instance = ownerInstance.selectComponent('.A') // 返回组件的实例
  instance.setStyle({
    "color": "red",
    "content":"",
    "border":"1rpx solid"
  })
  instance.callMethod("M")
  return info2
}

module.exports = {
  click:Click//暴露Click接口
}

(不会插入gif，将就一下)

这里的module.exports用于暴露接口，外部访问形式为前面的click，以此来访问内部的Click函数

事件的分类：冒泡事件和非冒泡事件两种：1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

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

（冒泡事件说的明白点就是，孩子被触发其父亲也会被触发，非冒泡事件就是孩子不会影响父亲）

常用的冒泡事件如下表所示：（其他的所有事件均为非冒泡事件）

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

 对于冒泡事件bindtap不会终止事件的冒泡触发，catchtap会终止冒泡事件的触发；（例如下面的源码）

<view id="outer" bindtap="click1">
  outer
  <view id="middle" bindtap="click2">    //情况2即将bindtap改为catchtap
    middle
    <view id="inner" bindtap="click3">
      inner
    </view>
  </view>
</view>


//事件处理函数
 click1:function(){
    console.log('1')
  }
  click2:function(){
    console.log('2')
  }
  click3: function () {
    console.log('3')
  }

情况一点击inner，会打印输出3 2 1；对于情况二则只会打印3 2（原因是被catch捕获）；

事件对象：当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。（这里只介绍几种常用的）

currentTarget（一般用于获取保存在控件中的数据）

属性	类型	说明
id	String	当前组件的id（唯一标识当前组件）
dataset	Object	当前组件上由data-开头的自定义属性组成的集合

 在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如data-enement-type会变为e.currentTarget.dataset.enementType；data-enementType会变为e.currentTarget.dataset.enementtype（即：当有多个连字符‘-’时，首字母大写其余小写，默认为全部小写字母）

type：是事件触发的类型；timeStamp：事件触发时的时间戳；

二、基础组件（控件）

wxml采用标记的形式（类似于html）来定义组件；对于每个组件内也定义了很多属性（attribute）详见下表：

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	其值为函数名称，用于调用函数

 三、花里胡哨（个人认为几乎不用）

1、小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在page页面 json 文件中配置 "pageOrientation": "auto" 。（window 段中设置 "pageOrientation": "auto" ）

2、 iPad 屏幕旋转的方法是：在 app.json 中添加 "resizable":true。在 iPad 上不能单独配置某个页面是否支持屏幕旋转。

3、在小程序中，通常可以使用CSS渐变和CSS动画来创建简易的界面动画。（这个还是可以有的~-~）

动画过程中，可以使用 bindtransitionend     bindanimationstart     bindanimationiteration       bindanimationend 来监听动画事件。 

事件名	含义
transitionend	CSS 渐变结束或wx.createAnimation结束一个阶段
animationstart	CSS 动画开始
animationiteration	CSS 动画结束一个阶段
animationend	CSS 动画结束

持续更新：每篇文章会定期更新，如果有错误的地方希望大家指出，（想用微信小程序做一个动画，后期补上^~^） 

（希望和大家一起进步。）