微信小程序基础到进阶(共6节)

• 微信小程序开发-开发流程和开发基础 - 1

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

• 微信小程序开发- 3 - 原生组件(一)

• 微信小程序开发- 4 - 原生API

• 微信小程序开发- 5 - 开放功能(登录、购物车)

• 微信小程序开发- 6 - 开放功能(微信支付)

内容摘要

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

生命周期

小程序生命周期

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线程的视图层拿到数据后回再次渲染视图层

页面路由

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

事件流

<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可以阻止事件的冒泡和捕获阶段的调用