摘要：自定義組件觸發的時候。使用外部樣式表在最上方引入文件，微信小程序的路徑一個大坑，接著在引入即可。

好吧，突然發現學不完了，一下子，那就分開吧，由于時間太久，直接重新大致復習了一下

微信小程序自定義組件
微信小程序支持自定義組件
下方的目錄

其中，components為組件目錄，nodemodules為模塊目錄，pages為小程序的頁面目錄，utils為一些基礎功能的封裝。好比安裝的第三方百度統計功能在此。

一個組件包括json，wxml，wxss，js四個文件組成。
wxml文件如下

  {{innerText}}

編寫js文件

// components/component.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    innerText: {
      type: String,
      value: "hello world"
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

完成對組件的初始化，包括設置屬性列表，初始化數據，以及設置相關的方法。

需要在json文件中聲明。

{
  "usingComponents": {
    "component": "/components/component"
  }
}

在page目錄下設置組件的聲明，

好啦，上方的是一個最簡單的自定義組件

組件模板中有一個

用于承載組件引用的時候提供的子節點。

ps 在page中引用的組件，必須在json文件中進行聲明。否則為無效節點

在wxml文件中

  這是文字

而模板文件如下

  {{innerText}}

這樣在page中的text節點會加載在slot節點的位置中。

如果要使用多個slot需要在js文件中聲明

  options: {
    multipleSlots: true // 允許組件中使用多個slot
  }

然后在組件的wxml文件中設置slot的內容

  
  {{innerText}}
  這是組件的內部內容
  

使用slot的name屬性確定組件的內容
在page頁面中，使用該組件

  這是文字
  hello world

對于組件樣式來說，使用

:host

來指定組件的默認樣式。
即可指定默認樣式

使用外部傳入的屬性，在component中使用，即使用page中的wxss。
直接在component構造函數中externalClasses屬性中，使用數組。

在同一個節點上使用普通樣式和外部樣式，兩個權重是相同的，會造成不可思議的bug產生。

在組件中，使用components構造函數的externalClasses屬性確定外部樣式表的名稱

externalClasses: ["my-class"]

然后在組件的wxml文件中，使用該外部樣式表

  
  {{innerText}}
  這是組件的內部內容
  

然后，在page中使用

  這是文字
  hello world

是滴，直接使用page中的樣式表，page中的樣式表

.my-class {
  color:yellow
}

使用全局樣式表設置js文件中的options對象中的addGlobalClass屬性為true可以使用全局樣式表

使用component構造器，進行構造。
該構造函數用于定義組件。調用Component函數能指定組件的數據，屬性和方法。

這個和視圖層的page構造函數很類似。

在properties定義段中，屬性名采用駝峰命名法，wxml采用連字符的命名，之間相互轉換。

tips 在網頁中，也有這一點。

定義組件的js

Component({
  behaviors: [], // 進行代碼復用機制

  properties: {
    myProperty: { // 屬性名
      type: String, // 屬性的類型（必填）
      value: "",  // 屬性的初值
      observer: (newValue, oldValue, changedPath) => {
        console.log(newValue);
        console.log(oldValue)
      } 
    },
    myProperty2: String // 一種簡化的定義方式
  },
  data: {},  // 私有數據，用于模板渲染

  lifetimes: {
    // 組件的生命周期函數，用于聲明組件的生命周期
    attached: () => {},
    moved: () => {},
    detached: () => {}
  },

  pageLifetimes: {
    // 組件所在頁面的生命周期函數
    show: () => {},
    hide: () => {}
  },

  methods: {
    // 組件的方法，其中下劃線開頭為私有方法
    onMyButtonTap: function() {
      this.setData({
        myProperty: "hello world"
      })
    },
    // 內部方法，使用下劃線開頭
    _myPrivateMethod: function() {
      this.setData({
        "A[0].B": "myPrivateData"
      })
    }
  }
})

定義組件的wxml

  {{myProperty}}
  Button
  {{A[0].B}}
  _myPrivateMethod

然后在page中使用該組件

在這之前json中設置該組件

接著運行如下

小程序的頁面可以視為自定義組件，因此，頁面同樣可以使用Component構造函數構造，此時要求對應的json文件擁有usingComponents定義段
此時組件的屬性可以用于接收頁面的參數，
在app.json文件中添加一個頁面，并在導航欄設置該頁面

{
  "pages":[
    "pages/helloWorld/hello",
    "pages/index/index",
    "pages/logs/logs",
    "components/component"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#c7dbc8",
    "navigationBarTitleText": "小小",
    "navigationBarTextStyle":"whiter",
    "enablePullDownRefresh": true,
    "backgroundColor": "#fceaea"
  },
  "tabBar": {
    "list": [{
      "text": "ming",
      "pagePath": "pages/logs/logs"
    }, {
      "text":"home",
      "pagePath": "pages/index/index"
    }, {
      "text": "hello",
      "pagePath": "pages/helloWorld/hello"
    }, {
      "text": "ing",
      "pagePath": "components/component"
    }],
    "color": "#f8fcea",
    "backgroundColor": "#ff9999",
    "selectedColor": "#c5ff99",
    "borderStyle": "white",
    "position": "top"
  },
  "functionalPages": true
}

添加的參數為pages參數，以及tabBar參數

并設置編譯模式，設置頁面的啟動參數

組件的js文件如下

// components/component.js
Component({
  /**
   *  組件配置 
   **/
  options: {
    multipleSlots: true // 允許組件中使用多個slot
  },
  /**
   * 組件的屬性列表
   */
  properties: {
    innerText: {
      type: String,
      value: "hello world"
    },
    paramA: Number,
    paramB: Number,
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    onLoad: function() {
      console.log(this.data.paramA);
      console.log(this.data.paramB);
    }
  },

  /**
   *  使用外部樣式表 
   **/
  externalClasses: ["my-class"]
})

添加了一個properties，并添加一個methods事件，在頁面加載的時候，觸發該事件。
啟動編譯，控制臺輸出當前頁面參數，參數獲取完成。

WXML數據綁定，用于父組件，向子組件指定的屬性設置數據。此方法僅僅能設置JSON數據。
事件，用于子組件向父組件傳遞數據，可以傳遞任意數據。

用于監聽子組件，如果子組件被觸發，則父組件將會觸發該事件。

  這是文字
  hello world

當子組件觸發了myevent事件時候，將會調用onMyEvent方法。

    onMyEvent: function(e) {
      console.log(e.detail);  // 自定義組件觸發的時候。提供的detail事件。將會返回當前點擊的鼠標坐標
    }

使用triggerEvent方法，完成對父組件事件的觸發
wxml中添加

點擊按鈕

然后在js中添加

onTap: function() {
      var myEventDetail = {}; // 提供給事件的監聽函數
      var myEventOption = {}; // 觸發事件的選項
      this.triggerEvent("myevent", myEventDetail, myEventOption)
    },

確保該組件將會有myevent供父組件進行觸發

類似于網頁中的自定義組件

完成綁定以后，由于上一節，父組件以及完成事件的監聽，此時點擊組件內的按鈕，將會完成父組件綁定的事件的觸發

由于冒泡和傳播的存在，父組件依舊可以通過冒泡和傳播來進行獲取

有三個參數，第一個參數為暴露給父節點的事件類型。第二個參數為向父組件傳遞的數據，第三個參數為選項，傳入對象進去

組件的js文件中

    onTap: function() {
      var myEventDetail = {
        a:3,
        b:4,
        c:5
      }; // 提供給事件的監聽函數
      var myEventOption = {}; // 觸發事件的選項
      this.triggerEvent("myevent", myEventDetail, myEventOption)
    },

將對象傳入第二個選項中
接收數據，在父組件的e.detail中接收子傳給父的內容
完成了數據從子傳遞到父

上上上節介紹了父傳遞到子的過程

該選型確定的是是否冒泡
由于composed默認為false則該事件只在主樹上觸發，不會進入任何其他組件的內部。
編寫兩個嵌套的組件
在components目錄下繼續新建一個目錄為body

原諒自己的命名技術，component命名╮(╯▽╰)╭

配置頁面的json文件信息

{
  "usingComponents": {
    "component": "/components/component",
    "body": "/components/body/body"
  }
}

接著繼續配置
書寫頁面的wxml文件

由于是在原有基礎上添加，繼續書寫body組件的內容,確定掛載點

編譯一個最基本的組件嵌套完成。為body組件，嵌套一個component組件
接著進行事件的綁定
書寫內層組件的bubbles，為允許進行冒泡

 var myEventOption = {
        bubbles: true
      }; // 觸發事件的選項

即完成允許冒泡。
接著，繼續，書寫pages的wxml文件，完成事件和節點的綁定

接著單擊按鈕完成事件的觸發

至此，完成了事件的冒泡。

確定事件是否進入內部，即，是否觸發組件內部
接著，在原來的代碼的基礎上繼續添加內容。
由于內部組件依舊是一個事件類型為myevent
接著，修改內部組件的配置

onTap: function() {
      var myEventDetail = {
        a:3,
        b:4,
        c:5
      }; // 提供給事件的監聽函數
      var myEventOption = {
        bubbles: true,
        composed: true
      }; // 觸發事件的選項
      this.triggerEvent("myevent", myEventDetail, myEventOption)
    },
    onMyEvent: function(e) {
      console.log(e.detail);  // 自定義組件觸發的時候。提供的detail事件。
    }

修改composed的值為true。
綁定body的事件

綁定body事件完成以后，接著單擊按鈕，觸發事件
觸發過程為1,3,2說明事件是先進入父組件，觸發父組件的事件完成以后，在繼續觸發引用組件的節點樹上的事件。

為事件是否有捕獲階段。
由于事件是先冒泡，后捕獲，所以必須要先進行冒泡
修改配置如下

      var myEventOption = {
        bubbles: false,
        composed: true,
        capturePhase: true
      }; // 觸發事件的選項

然后觸發事件，由于是捕獲，將會觸發回調myevent的list1的回調函數進行處理。

一種代碼復用機制

類似于C++的模板 ？？ 確定嗎？ 木有學習過c++，其實我一直在思考css文件如何實現復用。因為我不想寫大段代碼呀，(@ο@) 哇～

每個behavior都會包含一組屬性，數據，生命周期函數和方法。組件引用的時候，上述將會合并

類似于深拷貝，不過js中的深拷貝是直接開辟了一塊新的儲存空間，淺拷貝屬于直接進行引用，js進行賦值操作執行的是淺拷貝

使用Behavior()構造函數，進行構造出代碼的復用
文件目錄如下

微信的路徑太坑了。

模板文件如下

module.exports = Behavior({
  behaviors: [],

  properties: { // 外部數據
    myBehaviorProperty: {
      type: String,
      value: "hello world"
    }
  }
})

屬于配置項目，接著繼續書寫內部組件

// components/component.js
var myBehavior = require("/behaviors/behavior")
Component({
  // 代碼復用
  behaviors: [myBehavior],
  /**
   *  組件配置 
   **/
  options: {
    multipleSlots: false // 允許組件中使用多個slot
  },
  /**
   * 組件的屬性列表
   */
  properties: {
    innerText: {
      type: String,
      value: "hello world"
    },
    paramA: Number,
    paramB: Number,
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    onLoad: function() {
      console.log(this.data.paramA);
      console.log(this.data.paramB);
    },
    onTap: function() {
      var myEventDetail = {
        a:3,
        b:4,
        c:5
      }; // 提供給事件的監聽函數
      var myEventOption = {
        bubbles: false,
        composed: true,
        capturePhase: true
      }; // 觸發事件的選項
      this.triggerEvent("myevent", myEventDetail, myEventOption)
    },
    onMyEvent: function(e) {
      console.log(e.detail);  // 自定義組件觸發的時候。提供的detail事件。
    }
  },

  /**
   *  使用外部樣式表 
   **/
  externalClasses: ["my-class"]
})

在最上方引入文件，（微信小程序的路徑一個大坑），接著在behaviors引入即可。可以behaviors引入behaviors即包的相互依賴。

構建一個復雜的程序很有必要進行分包

使得自定義組件有類似表單控件的功能，將會在頁面觸發submit事件的時候將會直接附帶提交
演示
先創建一個組件
此時目錄結構

好吧。是有一點復雜了
添加內置組件，并設置data數據中的value的值

// components/custom-form-field/custom-form-field.js
Component({
  /**
   *  代碼復用 .讓其擁有表單屬性
   **/
  behaviors: ["wx://form-field"],
  /**
   * 組件的屬性列表
   */
  properties: {
    value: {
      type: String,
      value: "hello world"
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
  },


  /**
   * 組件的方法列表
   */
  methods: {

  }
})

接著書寫page頁面中的內容
引入組件

{
  "usingComponents": {
    "component": "/components/component",
    "body": "/components/body/body",
    "custom-form-field": "/components/custom-form-field/custom-form-field"
  }
}

完后接著繼續書寫wxml中添加該表單組件，并添加提交按鈕

  hello world
  提交

添加事件的處理程序

  formSubmit: function (e) {
    console.log("form", e.detail.value)
    console.log(333)
  }

單擊按鈕，控制臺輸出鍵值對，到此完成。