小程序学习笔记（二）之生命周期|页面路由|事件流

1 小程序的生命周期！

• 应用生命周期：onLaunch、onShow、onHide、onError；

   注意：小程序进入后台状态时会调用onHide方法，切回来时会触发onShow方法。

• 页面生命周期：onLoad、onShow、onReady、onHide、onUnload。

   注意：打开新页面时会触发当前页的onHide方法，关闭当前页时触发onUnload。

• 小程序启动的时候会触发两个线程，如图：

 

2 小程序的页面路由！

• wx.navigateTo或使用组件<navigator open-type="navigateTo"/>：打开新页面；
• wx.redirectTo或使用组件<navigator open-type="redirectTo"/>：页面重定向；
• wx.navigateBack或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮：页面返回。
• wx.switchTab或使用组件<navigator open-type="switchTab"/>或用户切换Tab：tab切换；
• wx.reLaunch或使用组件<navigator open-type="reLaunch"/>：重启动。
• getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

3 小程序的事件流！

• 事件对象：

// test.wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>

// test.js
Page({
  tapName(event) {
    console.log(event)
  }
})

打印结果：

• 使用catchtap可以阻止向上冒泡事件：

<view id="middle" catchtap="handleTap2"></view>

• 捕获阶段监听事件可采用capture-bind、capture-catch关键字，后者能中断捕获阶段和取消冒泡阶段。下面代码点击inner view会先后调用handleTap2、handleTap4、handleTap3、handleTap1，如果代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view

  id="outer"

  bind:touchstart="handleTap1"

  capture-bind:touchstart="handleTap2"

>

  outer view

  <view

    id="inner"

    bind:touchstart="handleTap3"

    capture-bind:touchstart="handleTap4"

  >

    inner view

  </view>

</view>