了解下小程式的生命周期

用戶端打開小程式的時候，就将代碼包下載下傳到本地進行解析，首先找到了根目錄的 app.json ，知道了小程式的所有頁面。

在這個Index頁面就是我們的首頁，用戶端在啟動的時候，将首頁的代碼裝載進來，通過微信的機制，就渲染出來了頁面。

App({
  onLaunch() {
    // 小程式啟動之後 觸發
  }
})

小程式在啟動的時候，首先通過 App() 定義的 App() 執行個體的 onLaunch 方法，這個方法是各個頁面共享的，當然還有更多的回調事件。

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

在頁面加載時，data這個屬性會提供給頁面使用，會以Json的形式傳回給前端，然後我們可以試着把這個值渲染在頁面上。

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

小程式頁面中還有很多的方法，像 onReady() 當頁面加載妥當，可以進行互動的時候觸發，還有小程式被切入背景的 OnHide() 事件。當然這些都是應用級的事件，還有一些和使用者親密互動的事件，官方稱這種叫做頁面事件處理函數。

像最操蛋的是微信小程式沒有下拉事件 onPullDownRefresh() ，這個東西自己搞，我也是福氣了，不過也對，這東西解耦，就當我剛才說的是放屁。。。例如以下代碼。

在.json檔案裡設定 "enablePullDownRefresh": true,用于開啟頁面下拉加載效果，可以目前頁設定也可以全局設定；

{　　//目前頁
    "enablePullDownRefresh": true //目前頁
    "backgroundTextStyle": "dark" //頂部顯示顔色為深色的三個點
}

"window": {  //全局
    "enablePullDownRefresh": true //全局
    "backgroundTextStyle": "dark" //頂部顯示顔色為白色的三個點
  }

然後在某個頁面的js中，去寫一個下拉事件，然後例如這樣的。

onPullDownRefresh:function(){
    var that = this;
    that.setData({
      currentTab: 0 //目前頁的一些初始資料，視業務需求而定
    })

　　　　wx.startPullDownRefresh()；

this.onLoad(); //重新加載onLoad()
    console.log('i am refreshing....');
  }

經過微信開發者的調試工具，我們可以輕松看到log的記錄，在那個setData裡面是初始的資料。

最後，在onload事件中停止重新整理。

onLoad: function (options) {
    wx.stopPullDownRefresh() //重新整理完成後停止下拉重新整理動效
  },

你可以通過一個按鈕來進行重新整理，bindtap可以直接請求邏輯層。

下面就要說一說事件了，事件是視圖層到邏輯層的通訊方式。事件是綁定到dom上的，當觸發的時候就回去執行響應的邏輯層。這些都是最基本的。

但是其中的事件分為 bindtap 和 catchtap 。那這兩個有什麼差別呢？一個是冒泡一個是不冒泡。那這冒不冒泡又是個什麼鬼意思呢？

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

經過測試，點選inner view 會觸發 inner view和 middle view的事件，而點選 middler view 則隻會觸發它的事件，因為再放上走被outer view給擋住了。

此處為了調試，請在app.json中的pages中添加頁面，然後可以通過以下代碼進行跳轉。

wx.navigateTo({
      url: '../demo/demo',
    })

看樣子，小程式比Vue還要優雅。