微信小程序开发-2- 生命周期、事件、原生组件

内容摘要

• 小程序生命周期
• 小程序事件流
• 小程序原生组件

生命周期

小程序生命周期

1. 小程序应用的生命周期

   • onLaunch
     • 第一次进入小程序时，客户端会帮咱们初始化好小程序的一个运行环境，同时会从CND上下载或者从本地缓存中拿到代码包，把它注入到运行环境；
     • 初始化完毕，微信客户端会给逻辑层的app.js的app实例来派发onLaunch事件
   • onShow
     • 再次进入小程序，切换到前台时调用
   • onHide
     • 手机home键或右上角关闭按钮时调用
   • onError
     • 当小程序发生错误，或api调用失败时，会触发在app构造器里面的onError方法，会给onError传入错误信息

globalData表明小程序应用的全局数据

2. 小程序页面的生命周期
   • onLoad
     • 请求服务器数据
     • 当页面初次加载的时候，微信客户端会给在逻辑层定义的Page实例派发onLoad事件；Page参数构造器定义的onLoad方法就会调用
     • onLoad在页面没有被销毁以前只调用一次；
     • 在onLoad回调中会拿到当前页面的打开参数
   • onShow
     • 请求服务器数据
     • 当页面显示以后，Page构造器里面的onShow方法会调用
     • 另外一种是从别的页面返回到当前页面以后会调用
   • onReady
     • 当页面初次渲染完成后，Page构造器里面的onReady方法会被调用
     • onReady在onShow方法以后
     • 和onLoad方法同样，页面没被销毁以前只调用一次
     • 当onReady触发以后，逻辑层和视图层就能够进行交互了
   • onHide
     • 在当前页面的基础上再打开一个页面的时候，会调用Page构造器参数里面的onHide方法
   • onUnload
     • 若是关闭了当前页的话，会触发当前页的onUnload方法

data 表明当前页面，当前小程序的数据

生命周期执行过程

• 小程序有两大线程组成
• view Thread(负责视图) 和 AppService Thread（处理数据和服务的）,二者协同完成了小程序生命周期的调用
• 小程序首次启动时，view Thread和 AppService Thread同时建立
• AppService线程建立以后会依次调用onLoad和onShow方法，能够在这两个方法内请求服务器数据
• view线程初始化完毕以后，会告诉appService线程已经初始化完毕，appService会给其发送页面的初始化数据
• view线程拿到数据后回触发首次渲染，渲染完成会告诉appService线程
• appService这时会接收到onReady的调用,到onReady调用以后，咱们从服务器上拿的数据也回来了；
• appService会将拿到的数据再次发送给view线程的视图层
• view线程的视图层拿到数据后回再次渲染视图层

页面路由

• 在一个多页面的小程序里，全部页面的路由是有框架进行管理的，框架以栈的形式维护了全部的小程序页面

路由方式	触发时机
打开新页面	调用API wx.navigateTo或使用组件 <navigator open-type="navigateTo" />
页面重定向	调用API wx.redirectTo 或使用组件 <navigator open-type="redirectTo" />
页面返回	调用API wx.navigateBack 或使用组件 <navigator open-type="navigateBack" /> 或用户按左上角返回按钮
Tab切换	调用API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换tab
重启动	调用API wx.reLaunch 或使用组件 <navigator open-type="reLaunch" />

事件流

<view>
    <view class="btn" bindTap="clickMe">
        点击我
    </view>
</view>

小程序事件模型

1. 事件捕获阶段
   • 事件捕获就是所绑定的事件从最外层节点向下传播到目标节点元素，依次检查所通过的节点是否绑定了同一事件的监听回调函数
   • 若是有则执行对应的事件回调函数
2. 事件处理阶段
   • 会触发目标元素所绑定的事件回调函数
3. 事件冒泡阶段
   • 事件从目标节点向外层节点依次检查节点是否绑定了一样的回调函数，若是有则会执行

• currentTarget 触发事件的当前组件
• target 触发事件的根源组件

<view class="A" style="border:1px solid red; width:500px;height: 500px;" bindTap="console.log('A')">
            A
            <view class="A" style="border:1px solid red; width:300px;height: 300px;" bindTap="console.log('B')">
                B
                <view class="A" style="border:1px solid red; width:100px;height: 100px;" bindTap="console.log('c')">
                    c
                </view>
            </view>
</view>

点击C 打印 C B A

<view class="A" style="border:1px solid red; width:500px;height: 500px;"
bindTap="console.log('A')" 
capture-bind:tap="console.log('captrue A')">
        A
        <view class="A" style="border:1px solid red; width:300px;height: 300px;" 
        bindTap="console.log('B')" 
        capture-bind:tap="console.log('captrue B')">
            B
            <view class="A" style="border:1px solid red; width:100px;height: 100px;" 
            bindTap="console.log('c')" 
            capture-catch:tap="console.log('captrue C')">
                c
            </view>
        </view>
    </view>

点击B 
打印 captrue A captrue B captrue B captrue A

• 经过这个例子能够看出，经过bind绑定不会阻止事件的冒泡阶段
• 经过capture能够绑定事件的捕获阶段
• 经过catch能够阻止事件的冒泡和捕获阶段的调用