微信小程序——自定義組件、生命週期

「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」前端

在咱們平常的開發中，組件起着重要的做用。組件的應用場景有不少，好比，當某個板塊在多個頁面屢次出現的時候，咱們就須要用到組件。json

1. 自定義組件

建立一個component的文件夾，而後右鍵點擊新建component小程序
在page裏面添加一個新的頁面，打開其中的json文件，以下所示，tab爲文件夾名稱後端
```
"usingComponents": {
    "Tabs": "../../components/tab/tab"
  }
複製代碼
```
再在page的wxml添加<Tabs><Tabs>文件，接下來建立組件的操做就在tab中進行數組
綁定的函數，不能寫在data同級，而是寫在methods裏面微信

a. 父向子傳遞數據

父組件(頁面)向子組件傳遞數據經過標籤屬性的方式來傳遞，markdown

（1）在子組件上進行接收；子組件要經過在properties中接收，傳遞要從父組件接收的數據str，其中，type是要接收的數據類型，value是默認值。app

（2）把這個數據當成是data中的數據直接用便可。也就是下面這個例子中的str，把它當成是在子組件中data中的數據直接{{str}}用便可。handleItem是綁定的函數(在子組件中)異步

// 這個寫在tab.js(子組件js)中
properties: {
  str: {
    type: String,
    value: ''
  }
},
method: {
    handleItemTap(e) {
      // 獲取索引
      const { index } = e.currentTarget.dataset;
      // 獲取data中的數組
      let { tabs } = this.data;
      // 最嚴謹的作法，從新拷貝一份數組，再對這個數組備份
      // let tabs = JSON.parse(JSON.stringfy(this.data.tabs));
      // 循環數組
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
      this.setData({
        tabs
      })
    },
}
// 這個寫在page(父組件wxml)中
<Tabs str="123"><Tabs>

複製代碼

以上這段代碼至關於在子組件(tab.js)中的data給str賦值123。這是一個比較簡單的例子，也就是說，當咱們要實現父向子傳遞數據，在父組件中，能夠在wxml定義一個tabs數據<Tabs tabs="{{tabs}}"></Tabs>，而後在js文件中定義數據的值，再經過子組件的properties來獲取父組件中這個tabs的值而後就能夠在子組件中使用了。ide

b. 子向父傳遞數據

經過事件的方式傳遞：在子組件的標籤上加入一個自定義事件；

在子組件中，點擊事件觸發的時候，觸發子組件中的自定義事件，同時傳遞數據給父組件。this.triggerEvent("父組件自定義事件的名稱", 要傳遞的參數)

// 子組件js中
methods: {
  handleItemTap(e) {
    const { index } = e.currentTarget.dataset;
    this.triggerEvent("itemChange", { index });
  },
}

// 父組件wxml中 綁定事件
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>
// 父組件js中 用來接收子組件傳遞數據的
handleItemChange(e) {
    const { index } = e.detail;
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  },
複製代碼

在觸發自定義組件中的triggerEvent事件就至關於觸發了父組件中的binditemChange事件，而後就會調用handleItemChange這個函數，實現了子父組件之間的鏈接。

`slot`標籤

其實就是一個佔位符，等到父組件調用子組件的時候，再傳遞這些標籤，最終這些被傳遞的標籤就會替換slot的位置(寫在子組件中)。而後在父組件的Tabs標籤中寫的東西就會渲染出來了。

2. 生命週期

a. 應用生命週期

應用第一次啓動的時候就會觸發的事件，在應用第一次啓動的時候，獲取用戶的我的信息。
應用被用戶看到觸發的事件，對應用的數據或者頁面效果重置。
應用被隱藏的時候觸發的事件，暫停或者清除定時器
應用代碼發生了錯誤的時候觸發的事件，在應用發生代碼報錯的時候，收集用戶的錯誤信息，經過異步請求將錯誤的信息發送到後臺去。
頁面找不到就會觸發的事件，在應用第一次啓動的時候，若是找不到第一個入口頁面纔會觸發。若是頁面不存在了，經過js的方式來從新跳轉頁面，從新跳轉到第二個首頁(不能跳轉到tabbar頁面[相似於導航組件]) wx.navigateTo({url: ''})

App({
  onLaunch() {  // 1. 
    console.log("onLaunch");
  },
  onShow() {   // 2. 
    console.log("onShow");
  },
  onHide() {   // 3. 
    console.log("Hide");
  },
  onError(err) { // 4.
    console.log(err);
  },
  onPageNotFound() {  // 5. 
    console.log("onPageNotFound");
  }
})
複製代碼

b. 頁面生命週期

在頁面的js文件會自動生成的生命週期函數。

onLoad 發送異步請求來初始化頁面數據
onUnload有關閉(如關閉當前頁面)的意思就是卸載
onPullDownRefresh 在app.js文件中能夠設置是否容許上拉刷新

在寫小程序的過程當中，忘記了一些方法屬性能夠經過微信官方文檔查找，多打demo纔有助於記憶還有讓本身更加信手沾來~加油！！