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

好吧，突然發(fā)現(xiàn)學(xué)不完了，一下子，那就分開吧，由于時(shí)間太久，直接重新大致復(fù)習(xí)了一下

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

其中，components為組件目錄，nodemodules為模塊目錄，pages為小程序的頁(yè)面目錄，utils為一些基礎(chǔ)功能的封裝。好比安裝的第三方百度統(tǒng)計(jì)功能在此。

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

  {{innerText}}

編寫js文件

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

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

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

  }
})

完成對(duì)組件的初始化，包括設(shè)置屬性列表，初始化數(shù)據(jù)，以及設(shè)置相關(guān)的方法。

需要在json文件中聲明。

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

在page目錄下設(shè)置組件的聲明，

好啦，上方的是一個(gè)最簡(jiǎn)單的自定義組件

組件模板中有一個(gè)

用于承載組件引用的時(shí)候提供的子節(jié)點(diǎn)。

ps 在page中引用的組件，必須在json文件中進(jìn)行聲明。否則為無(wú)效節(jié)點(diǎn)

在wxml文件中

  這是文字

而模板文件如下

  {{innerText}}

這樣在page中的text節(jié)點(diǎn)會(huì)加載在slot節(jié)點(diǎn)的位置中。

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

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

然后在組件的wxml文件中設(shè)置slot的內(nèi)容

  
  {{innerText}}
  這是組件的內(nèi)部?jī)?nèi)容
  

使用slot的name屬性確定組件的內(nèi)容
在page頁(yè)面中，使用該組件

  這是文字
  hello world

對(duì)于組件樣式來(lái)說(shuō)，使用

:host

來(lái)指定組件的默認(rèn)樣式。
即可指定默認(rèn)樣式

使用外部傳入的屬性，在component中使用，即使用page中的wxss。
直接在component構(gòu)造函數(shù)中externalClasses屬性中，使用數(shù)組。

在同一個(gè)節(jié)點(diǎn)上使用普通樣式和外部樣式，兩個(gè)權(quán)重是相同的，會(huì)造成不可思議的bug產(chǎn)生。

在組件中，使用components構(gòu)造函數(shù)的externalClasses屬性確定外部樣式表的名稱

externalClasses: ["my-class"]

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

  
  {{innerText}}
  這是組件的內(nèi)部?jī)?nèi)容
  

然后，在page中使用

  這是文字
  hello world

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

.my-class {
  color:yellow
}

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

使用component構(gòu)造器，進(jìn)行構(gòu)造。
該構(gòu)造函數(shù)用于定義組件。調(diào)用Component函數(shù)能指定組件的數(shù)據(jù)，屬性和方法。

這個(gè)和視圖層的page構(gòu)造函數(shù)很類似。

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

tips 在網(wǎng)頁(yè)中，也有這一點(diǎn)。

定義組件的js

Component({
  behaviors: [], // 進(jìn)行代碼復(fù)用機(jī)制

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

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

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

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

定義組件的wxml

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

然后在page中使用該組件

在這之前json中設(shè)置該組件

接著運(yùn)行如下

小程序的頁(yè)面可以視為自定義組件，因此，頁(yè)面同樣可以使用Component構(gòu)造函數(shù)構(gòu)造，此時(shí)要求對(duì)應(yīng)的json文件擁有usingComponents定義段
此時(shí)組件的屬性可以用于接收頁(yè)面的參數(shù)，
在app.json文件中添加一個(gè)頁(yè)面，并在導(dǎo)航欄設(shè)置該頁(yè)面

{
  "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
}

添加的參數(shù)為pages參數(shù)，以及tabBar參數(shù)

并設(shè)置編譯模式，設(shè)置頁(yè)面的啟動(dòng)參數(shù)

組件的js文件如下

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

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

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

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

添加了一個(gè)properties，并添加一個(gè)methods事件，在頁(yè)面加載的時(shí)候，觸發(fā)該事件。
啟動(dòng)編譯，控制臺(tái)輸出當(dāng)前頁(yè)面參數(shù)，參數(shù)獲取完成。

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

用于監(jiān)聽子組件，如果子組件被觸發(fā)，則父組件將會(huì)觸發(fā)該事件。

  這是文字
  hello world

當(dāng)子組件觸發(fā)了myevent事件時(shí)候，將會(huì)調(diào)用onMyEvent方法。

    onMyEvent: function(e) {
      console.log(e.detail);  // 自定義組件觸發(fā)的時(shí)候。提供的detail事件。將會(huì)返回當(dāng)前點(diǎn)擊的鼠標(biāo)坐標(biāo)
    }

使用triggerEvent方法，完成對(duì)父組件事件的觸發(fā)
wxml中添加

點(diǎn)擊按鈕

然后在js中添加

onTap: function() {
      var myEventDetail = {}; // 提供給事件的監(jiān)聽函數(shù)
      var myEventOption = {}; // 觸發(fā)事件的選項(xiàng)
      this.triggerEvent("myevent", myEventDetail, myEventOption)
    },

確保該組件將會(huì)有myevent供父組件進(jìn)行觸發(fā)

類似于網(wǎng)頁(yè)中的自定義組件

完成綁定以后，由于上一節(jié)，父組件以及完成事件的監(jiān)聽，此時(shí)點(diǎn)擊組件內(nèi)的按鈕，將會(huì)完成父組件綁定的事件的觸發(fā)

由于冒泡和傳播的存在，父組件依舊可以通過(guò)冒泡和傳播來(lái)進(jìn)行獲取

有三個(gè)參數(shù)，第一個(gè)參數(shù)為暴露給父節(jié)點(diǎn)的事件類型。第二個(gè)參數(shù)為向父組件傳遞的數(shù)據(jù)，第三個(gè)參數(shù)為選項(xiàng)，傳入對(duì)象進(jìn)去

組件的js文件中

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

將對(duì)象傳入第二個(gè)選項(xiàng)中
接收數(shù)據(jù)，在父組件的e.detail中接收子傳給父的內(nèi)容
完成了數(shù)據(jù)從子傳遞到父

上上上節(jié)介紹了父?jìng)鬟f到子的過(guò)程

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

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

配置頁(yè)面的json文件信息

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

接著繼續(xù)配置
書寫頁(yè)面的wxml文件

由于是在原有基礎(chǔ)上添加，繼續(xù)書寫body組件的內(nèi)容,確定掛載點(diǎn)

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

 var myEventOption = {
        bubbles: true
      }; // 觸發(fā)事件的選項(xiàng)

即完成允許冒泡。
接著，繼續(xù)，書寫pages的wxml文件，完成事件和節(jié)點(diǎn)的綁定

接著單擊按鈕完成事件的觸發(fā)

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

確定事件是否進(jìn)入內(nèi)部，即，是否觸發(fā)組件內(nèi)部
接著，在原來(lái)的代碼的基礎(chǔ)上繼續(xù)添加內(nèi)容。
由于內(nèi)部組件依舊是一個(gè)事件類型為myevent
接著，修改內(nèi)部組件的配置

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

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

綁定body事件完成以后，接著單擊按鈕，觸發(fā)事件
觸發(fā)過(guò)程為1,3,2說(shuō)明事件是先進(jìn)入父組件，觸發(fā)父組件的事件完成以后，在繼續(xù)觸發(fā)引用組件的節(jié)點(diǎn)樹上的事件。

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

      var myEventOption = {
        bubbles: false,
        composed: true,
        capturePhase: true
      }; // 觸發(fā)事件的選項(xiàng)

然后觸發(fā)事件，由于是捕獲，將會(huì)觸發(fā)回調(diào)myevent的list1的回調(diào)函數(shù)進(jìn)行處理。

一種代碼復(fù)用機(jī)制

類似于C++的模板 ？？ 確定嗎？ 木有學(xué)習(xí)過(guò)c++，其實(shí)我一直在思考css文件如何實(shí)現(xiàn)復(fù)用。因?yàn)槲也幌雽懘蠖未a呀，(@ο@) 哇～

每個(gè)behavior都會(huì)包含一組屬性，數(shù)據(jù)，生命周期函數(shù)和方法。組件引用的時(shí)候，上述將會(huì)合并

類似于深拷貝，不過(guò)js中的深拷貝是直接開辟了一塊新的儲(chǔ)存空間，淺拷貝屬于直接進(jìn)行引用，js進(jìn)行賦值操作執(zhí)行的是淺拷貝

使用Behavior()構(gòu)造函數(shù)，進(jìn)行構(gòu)造出代碼的復(fù)用
文件目錄如下

微信的路徑太坑了。

模板文件如下

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

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

屬于配置項(xiàng)目，接著繼續(xù)書寫內(nèi)部組件

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

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

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

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

在最上方引入文件，（微信小程序的路徑一個(gè)大坑），接著在behaviors引入即可?？梢詁ehaviors引入behaviors即包的相互依賴。

構(gòu)建一個(gè)復(fù)雜的程序很有必要進(jìn)行分包

使得自定義組件有類似表單控件的功能，將會(huì)在頁(yè)面觸發(fā)submit事件的時(shí)候?qū)?huì)直接附帶提交
演示
先創(chuàng)建一個(gè)組件
此時(shí)目錄結(jié)構(gòu)

好吧。是有一點(diǎn)復(fù)雜了
添加內(nèi)置組件，并設(shè)置data數(shù)據(jù)中的value的值

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

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
  },


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

  }
})

接著書寫page頁(yè)面中的內(nèi)容
引入組件

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

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

  hello world
  提交

添加事件的處理程序

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

單擊按鈕，控制臺(tái)輸出鍵值對(duì)，到此完成。