小程序---原生開發---自定義組件

在開發過程中，我們經常需要創建一些公用組件以便方便我們多次調用。組件的功能以及事件的一個傳遞，這使得需要注意，有些組件可能樣式一樣，點擊的事件效果會有所不同，所以組件需要功能多樣化，方便使用

創建組件，使用微信開發者工具創建，直接選擇創建組件的選項，所有的頁面都會給創建好。

但是使用別的軟件進行開發的時候，創建組件一定要創建完整。比如說一個組件中有xx.js  xx.wxml  xx.wxss  xx.json

如果你少一個xx.json文件，會導致你引入組件的時候找不到這個文件。爲了避免出錯，創建所有的頁面即可。

組件的js頁面是這樣的

var app = getApp()
Component({

  behaviors: [],

  // 屬性定義（詳情參見下文）
  properties: {
    myProperty: { // 屬性名
      type: String,
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },

  data: {}, // 私有數據，可用於模板渲染

  lifetimes: {
    // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready: function() { },

  pageLifetimes: {
    // 組件所在頁面的生命週期函數
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
      })
    },
    // 內部方法建議以下劃線開頭
    _myPrivateMethod: function(){
      // 這裏將 data.A[0].B 設爲 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

和普通的js頁面是不一樣的

當我們有數據需要傳遞的時候在properties中寫出即可，例如

properties: {
    navbarData: { // navbarData 由父頁面傳遞的數據
      type: Object,
      value: {
        gobank: true,
        gohome: true,
        has_search: false,
      },
      observer: function (newVal, oldVal) { 
      }
    }
  },

當我們有點擊事件需要傳遞的時候，需要傳遞什麼這個看需求，我這裏只寫傳遞點擊事件

methods: {
    goback: function () {
	  this.triggerEvent('goback')
    },
    goHome: function () {
      wx.navigateTo({
        url: '/pages/index/index',
      });
    }
  }

當我們在頁面中使用需要現在aa.json文件中先調用纔可以使用，可以在app.json中全局調用，也可以在使用頁面下的.json文件中調用，局部調用，看需求

"usingComponents": {
		"headpage":"/components/pagehead/pagehead"
	}

使用頁面index.wxml，這裏的點擊事件bind:xxx     xxx這個名稱要和在組件中triggerEvent中的名稱保持一致，如果有誤，則無法調用點擊事件

<!--index.wxml-->
	<headpage bind:goback='goback'></headpage>
<view class="container" bindtap="goToPage">
 首頁
</view>

index.js中的點擊事件，書寫我們需要處理的操作即可

 goback(){
	  navigUrl.navigatoBackUrl('../index/index')
  }