微信小程序生命周期，事件

目錄

• 雙線程模型
• 小程序中 app.js 中的生命周期
• 小程序的頁面的生命周期
• 小程序的事件

雙線程模型

像 Vue 的雙向數據綁定

總結：

1. 在渲染層將wxml文件與wxss文件轉成js對象，也就是虛擬的dom
2. 邏輯層生成數據，把數據與虛擬的dom相結合，得到真實的dmo,然后在交給渲染層渲染
3. 當有數據變化的時候，邏輯層負責更新數據，js對象發生改變，這種改變方式采用的是diff算法進行比較，只改變，變化的部分
4. 將更新的數據，進行反饋，再次得到虛擬的dmo中，從而更新頁面。

小程序的啟動流程

小程序中 app.js 中的生命周期

app.js 小程序全局只有一個App對象

// 下文中所說的后台是指：用戶將小程序切換到手機的后台運行。這種操作我們叫做從前台切換到后台。和我們平時開發中的后台沒有關系

//下文中所說的前台是指：用戶將小程序重手機后台運行，調用到用戶手機的顯示界面，我們叫做從后台切換到前台。

App({

  /*
    當小程序初始話完成，會觸發onlaunch(全局只觸發一次)，onlaunch在手機后台到前台切換是不會執行的。
    如果要他再次執行，除非在手機中關閉（關閉不是切換到后台，而是直接刪除小程序的后台運行）小程序，然后重新打開，才能執行，
  */
  onLaunch: function () {

    console.log("小程序的初始話：onlaunch")
  },
  /**
   * 當小程序啟動，或者是重后台進入到前台的時候，會執行onshow,
   * 那我們可以通過這個option中的scene值來判斷不同進入場景
   */
  onShow:function(option){
    console.log("小程序onshow，：onShow",option)
  },
  /*小程序重前台進入到后台的時候，會觸發：onHide*/
  onHide:function(){
    console.log("小程序重前台進入到后台的時候，會觸發：onHide")

  },
  /**可以在全局使用 */
  globalData: {
    userInfo: null
  }
})

執行App.js生命周期的時候以及在整個App對象我們可以做什么？

1. 在注冊 app 時候，我們可以通過 onshow 來判斷用戶進入小程序的場景
2. 我們可以在生命周期函數中，做一些數據請求。
3. 我們可以在 app 中設置一個全局的對象，讓所有的頁面都可以使用，比如上面的globalData

小程序的頁面的生命周期

// pages/test/test.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    msg:'own is sb',
  },

  /**
   * 生命周期函數--監聽頁面加載,頁面如果不關閉，這個onload只執行一次
   */
  onLoad: function (options) {
      console.log("onLoad")
  },

   /**
   * 生命周期函數--監聽頁面顯示，頁面從底下切到上面的時候也會執行
   */
  onShow: function () {
    console.log("onShow")
  },
  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    console.log("onHide")
  },

   /**
   * 生命周期函數--監聽頁面初次渲染完成,這個真實dom要渲染的時候，就會執行
   */
  onReady: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作，如果你要監聽這個動作，然后觸發底下的函數的話，你必須"enablePullDownRefresh" ：true配置成可以下拉刷新。
   */
  onPullDownRefresh: function () {
      console.log("onPullDownRefresh")
  },

  /**
   * 頁面上拉觸底事件的處理函數，如果要成功觸發這個事件，必須頁面顯示不夠一頁顯示
   */
  onReachBottom: function () {
    console.log("onReachBottom")
  },

})

在頁面的page對象中可以做哪些事情

1. 在生命周期函數中，向服務器請求數據
2. 在 data 中初始話數據，給 wxml 使用
3. 監聽 wxm l事件，綁定對應的事件
4. 監聽頁面的上拉，下拉等

小程序的事件

事件綁定

wxml 文件

<!--pages/test1/test1.wxml-->

<view bindtap="click1">我是事件</view>
<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按鈕</button>

<view id="outter" bindtap="click3" data-a="o">外面

  <view id="innder" bindtap="click2" data-a="i">
    里面
  </view>
</view>

js 文件

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    name:"owen"
  },
  //e為事件對象，事件所有產生的數據都在e中
  click1:function(e){
      
    console.log("你點我了"，e)
      
  },
  )}

總結：

1. 響應函數直接寫在 page 對象中就可以了，不需要和 vue 一樣寫在 methods 里面
2. <view bind:事件名稱 = "響應函數的函數名" data-參數名 = "值">
3. 獲取2中傳過來的值，在事件對象中。例如：e.currentTarget.dataset中

事件補充

js 文件

// pages/test1/test1.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    name:"owen"
    

  },
  click1:function(e){
    console.log("你點我了",e)
  },
  click2:function(e){
    console.log("里面",e)
  },
  click3:function(e){
    console.log("外面",e)
  },

  click4:function(e){
    console.log("捕獲外")
  },
  click5:function(e){
    console.log("捕獲中")
  },
  click6:function(e){
    console.log("捕獲里")
  }
  ,
  click7:function(e){
    console.log("冒泡外")
  },
  click8:function(e){
    console.log("冒泡中")
  },
  click9:function(e){
    console.log("冒泡里")
  }

})

wxml 文件

<!-- capture-bind:tap 事件的捕獲，從外面到里面-->
<!-- bind:tap就是事件的冒泡，重里面到外面傳遞 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>

    中間
  </view>

</view>

<!-- 如何阻止事件捕獲  將 capture-bind:tap改成  capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>

    中間
  </view>

</view>


<!-- 如何阻止事件冒泡  將bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="innder"  capture-bind:tap="click6" catch:tap="click9">
      里面
    </view>

    中間
  </view>

</view>

wxss 文件

/* pages/test1/test1.wxss */
#outter{
  width: 400rpx;
  height: 400rpx;
  background-color: red;
}
#innder{
  width: 200rpx;
  height: 200rpx;
  background-color: yellow;
}


.outter{
  width: 600rpx;
  height: 600rpx;
  background-color: red;
}
.midd{
  width: 400rpx;
  height: 400rpx;
  background-color: blue;
}
.innder{
  width: 200rpx;
  height: 200rpx;
  background-color: yellow;
}