微信小程序学习总结(三)

微信小程序学习总结(三)

一. 页面路由

  路由方式            页面栈表现                                     路由前页面            路由后页面                  触发时机
   初始化              新页面入栈                                                          onload, onShow             小程序打开的第一个页面
   打开新页面          新页面出栈                                     onHide               onload, onShow              调用API wx.navigateTo或使用组件<navigator open-type="navigateTo"/>
   页面重定向          当前页面出栈,新页面入栈                         onUnload             onload, onShow              调用API wx.redirectTo 或使用 <navigator open-type"redirectTo"/>
   页面返回            页面不断出栈,直到目标返回页,新页面入栈           onUnload             onload, onShow              调用API wx.navigateBack 或使用组件 <navigator opne-type="navigateBack"/>或用户点击左上角返回按钮 
   Tab切换             页面全部出栈,只留下新的Tab页面                                       参考表                       调用API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换Tab
   重加载              页面全部出栈, 只留下新的页面                    onUnload             onload, onShow              调用API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

   getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面   	    路由后页面	       触发的生命周期(按顺序)
   A	            A	             Nothing happend
   A	            B	             A.onHide(), B.onLoad(), B.onShow()
   A	            B（再次打开）     A.onHide(), B.onShow()
   C	            A	             C.onUnload(), A.onShow()
   C	            B	             C.onUnload(), B.onLoad(), B.onShow()
   D	            B	             D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
   D（从转发进入）	A	             D.onUnload(), A.onLoad(), A.onShow()
   D（从转发进入）	B	             D.onUnload(), B.onLoad(), B.onShow()

二.事件

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

  <!-- index.wxml -->
  <view>
    <view class="btn" bindtap="clickMe">
      点击我!
    </view> 
  </view>
  
  // index.js
  Page({
    clickMe (e) {
      console.log(e);
    }
  })

1.事件处理

①事件捕获阶段
绑定的事件会从最外层传到目标节点元素, 依次检查经过的节点是否绑定了相同的事件,执行对应的函数
②事件处理阶段
事件在到达目标节点时会触发相应的监听函数
③事件冒泡阶段
事件冒泡向上传到最外层节点, 检查经过的节点是否绑定了相同的事件监听类型, 执行回调函数

2.事件对象:

 ① type        代表事件的类型

 ② timeStamp   页面打开到触发事件所经过的毫秒数

③ target 触发事件的源组件

 属性	          类型	           说明
  id	           String	     事件源组件的id
  tagName  	       String        当前组件的类型
  dataset	       Object	     事件源组件上由data-开头的自定义属性组成的集合

④ currentTarget 事件绑定的当前组件

 属性          	类型	       说明
  id	         String	      当前组件的id
  tagName        String	      当前组件的类型
  dataset	     Object	      当前组件上由data-开头的自定义属性组成的集合

⑤ dataset

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。
书写方式： 以 data- 开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如 data-element-type ，最终在 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 // 大写会转为小写
    }
  })

⑥touches

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是
CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

⑦ Touch 对象

  属性	             类型	           说明
   identifier	      Number	        触摸点的标识符
   pageX, pageY	      Number         	距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
   clientX, clientY	  Number         	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

⑧ CanvasTouch 对象

   属性	              类型	                 说明           
    identifier	        Number	               触摸点的标识符	
    x, y	            Number          	   距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴	

⑨ changedTouches

    changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）

⑩detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离

  可捕获事件
    类型                     触发条件
      touchstart               手指触摸动作开始
      tap                      手指触摸后马上离开
      touchmove                手指触摸后移动
      touchcancel              手指触摸动作被打断，如来电提醒，弹窗
      touchend                 手指触摸动作结束
      longpress                手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
      longtap                  手指触摸后，超过350ms再离开（推荐使用longpress事件代替）


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