微信小程序開發-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能夠阻止事件的冒泡和捕獲階段的調用