微信小程序开发（三）小程序开发框架之生命周期和事件流

• 小程序的开发框架称为MINA框架
  MINA框架由View（视图层）、App Service（逻辑层）和Native（系统层）组成

  
  
  MINA框架.png
• 小程序运行机制
  小程序的启动分为冷启动和热启动两种：
  冷启动：用户首次打开小程序或打开被微信销毁的小程序，小程序需要重新加载。当小程序进入后台，客户端会帮我们在一定时间内（目前是5分钟）维持小程序的状态，超过时间之后就会被微信主动销毁。或者在短时间内（目前是5s）连续收到两次系统告警也会被微信主动销毁。
  热启动：用户已经打开过小程序，在一定时间内再次打开，这个时候我们就不需要再次加载，只需要把后台的小程序切换到前台。
  注：小程序在冷启动的时候，如果发现有新的版本，会帮我们异步下载最新版本代码包，并使用微信客户端本地的包启动，只有在下次打开才会使用新版本。

• 小程序加载机制
  小程序加载流程：在启动时会向CDN请求最新的代码包，第一次启动要等代码包下载完毕，注入到容器之后才能看到小程序页面。

  
  
  小程序加载机制.png

• 小程序生命周期
  (1)应用生命周期：程序初始化完毕后，onLaunch()会被调用。进入后当用户点击右上角的关闭或者手机home键离开小程序，这时并没有被销毁，会调用onHide()方法。当我们从后台再次进入小程序，会调用onShow()方法。当小程序发生脚本错误或API调用失败的时候，调用onError()方法。

  
  
  程序生命周期.png

(2)页面生命周期：当页面初次加载的时候会调用onLoad()，而且如果页面不销毁，onLoad()只会调用一次。页面显示之后，onShow()方法会被调用，当页面从其他页面返回到当前页面时，当前页面的onShow()方法同样会被调用。当页面初次渲染完成后，调用onReady()方法，和onLoad()方法一样，在页面没被销毁前只调用一次。在当前页面打开一个新的页面时，会触发当前页面的onHide()方法。关闭当前页面触发onUnload()方法。

页面生命周期.png

• 页面路由
  在一个多页面的小程序中，所有页面路由由框架来管理。框架以栈的形式维护所有页面。小程序有6中路由方式，每种路由对应一种栈的表现。

  
  
  路由.png
  
  

  触发路由的情况：

  
  
  触发路由.png

• 小程序事件流
  (1)介绍：事件是视图层到逻辑层的通讯方式；事件可以将用户的行为反馈到逻辑层进行处理；事件可以绑定在组件上，触发事件后就会执行逻辑层中对应的事件处理函数；事件对象可以携带额外信息。
  (2)实例:我们在index.wxml的view标签中绑定了一个它的clickMe的点击事件，在index.js中定一个clickMe的回调函数，打印了事件传递的参数。

//index.wxml

  
    点我
  

//index.js
Page({
  clickMe(e){
    console.log(e);
  }
})

(3)事件模型

事件模型.png

(4)捕获事件和冒泡事件

捕获和冒泡事件.png

//index.wxml

  
    containerA
      
        containerB
          
            containerC
          
      
  
  

//index.js
Page({
  clickA(){
    console.log('click containerA');
  },
  clickB(){
    console.log('click containerB');
  },
  clickC(){
    console.log('click containerC');
  },
  captureClickA(){
    console.log('captureClick  containerA');
  },
  captureClickB(){
    console.log('captureClick  containerB');
  },
  captureClickC(){
    console.log('captureClick  containerC');
  }
})