微信小程序-組件篇

 

1、摘要

　　組件是小程序整個語法中佔比比較大的一部分，沒寫過組件能夠說只懂了半個小程序。組件提供了相似頁面的生命週期與邏輯。相比於模板，組件能實現的功能更加全面，也更爲強大。經過slot能夠自由擴展組件，使組件更具備擴展性，使用起來也不會有太大的侷限性。要說不足之處：在目前最新的2.4版本都不能實現組件的自定義數據。並且組件的使用還存在着一些bug。

2、正文

　　組件的相關說明官方文檔已經寫得十分清除，這裏只對寫組件的相關技巧進行探討。

　　小程序爲組件提供了一些配置字段，在相對於的字段添加本身的代碼能夠獲得一些效果（實際上大多數js框架都是這樣作的）。在properties字段下能夠添加組件的屬性，這些屬性能夠在使用組件的時候訪問並賦值。

properties: {
    isShow: {
      type: Boolean,
      value: false,
      observer: function (newVal) {
        this.setData({
          mIsShow: newVal
        });
      }
    },
    title: {
      type: String,
      value: '提示'
    },
    radius: {
      type: String,
      value: '12'
    },
    src: {
      type: String,
      value: ''
    },
    iconWidth: {
      type: String,
      value: '30'
    },
    iconHeight: {
      type: String,
      value: '30'
    },
    iconLeft: {
      type: String,
      value: '610'
    },
    iconTop: {
      type: String,
      value: '25'
    },
    titleColor: {
      type: String,
      value: '#000'
    },
    titleSize: {
      type: String,
      value: '34'
    }
  },

　　上面給出了一系列的字段，注意字段須要設置type和value屬性，type決定了從組件外傳進來的參數會已何種數據類型解析。類如，若是給title字段傳入的是數組 title='{{ ["1", "2"] }}' ，可是它定義的是String類型，那麼就至關於傳入的是 title='[1,2]' 。

還有一個十分好用的屬性，那就是observer屬性。能夠看到isShow字段給了這個屬性。這個屬性是在該字段的值發生變化時候會調用observer的回調函數，所以能夠在該函數中進行一些操做。最經常使用的就是在data字段定義組件的內部變量，而後在該函數中去改變內部變量，這樣就實現了相似頁面中的數據綁定的效果（實際上properties字段下的屬性都不是數據綁定的，也就是在組件外更改變量數值是不會影響到組件內部的模板的）。

　　最後咱們來講說lifetimes字段，這個字段裏面能夠寫組件的生命週期函數，而且會覆蓋該字段外的生命中期函數（實際上能夠直接寫生命週期函數的，不過仍是建議寫在這個字段裏面）。

  lifetimes: {
    ready: function () {
      let that = this;
      const sysInfo = wx.getSystemInfoSync();
      const query = wx.createSelectorQuery();
      query.in(this).select('.component').boundingClientRect().selectViewport().scrollOffset()
      query.exec(function (res) {
        that.setData({
          top: 0,
          left: 0,
          width: sysInfo.windowWidth,
          height: sysInfo.windowHeight
        });
      });
    },
  },

　　說明一下：示例代碼是一個完整的自定義模態框組件。由於模態框須要實現遮罩效果，可是在小程序中屏幕的寬度是固定爲750rpx，可是屏幕高度是根據這個固定寬度計算的，全部會存在不一樣手機的屏幕高度是不一樣的（例如iPhone6與iPhoneX）。因此這裏須要動態計算屏幕的寬高（實際上你也能夠設置一個很是大的高度，使目前市面上全部手機都支持，但這不是最好的實現方式）。這段代碼用到了組件的ready生命週期（由於這裏須要訪問模板節點，只有ready後才能訪問節點）。而後在ready函數中去設置data字段的width和height。這個width和height是與模板進行了數據綁定。

　　

<view class='component cus animated' hidden='{{ !isShow }}' style='width: {{ width }}px; height: {{ height }}px; top: {{ top }}px; left: {{ left }}px' catchtouchmove='onMove'>
  <view class='body' style='border-radius: {{ radius }}rpx'>
    <image class='image' wx:if='{{ src != undefined && src != "" ? true : false }}' src='{{ src }}' style='width: {{ iconWidth }}rpx; height: {{ iconHeight }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx' catchtap='onTap'></image>
    <view class='image icon-cus' wx:if='{{ src != undefined && src != "" ? false : true }}' src='{{ src }}'  style='font-size: {{ iconWidth }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx'  catchtap='onTap'></view>
    <text wx:if='{{ title != undefined && title != "" ? true : false }}' style='color: {{ titleColor }}; font-size: {{ titleSize }}rpx;'>{{ title }}</text>
    <view class='content'>
      <slot name='content'></slot>
    </view>
    <slot name='bottom'></slot>
  </view>
</view>

　　以上是該組件的模板部分。這部分很簡單，與寫頁面沒什麼區別。須要注意的是這裏可使用slot插槽，以上代碼就使用了兩個插槽，分別是模態框的內容部分和底部。由於考慮到擴展性，模態框的內容多是文字和圖片，全部具體內容須要在使用的時候才能肯定。底部也是如此，具體幾個按鈕，以及什麼樣式的按鈕都是不能立馬肯定下來的。

　　咱們還能夠經過內聯樣式來動態的自定義組件的外觀

style='font-size: {{ iconWidth }}rpx; left: {{ iconLeft }}rpx; top: {{ iconTop }}rpx'

　　最後咱們來看下組件的使用與效果。

　　

<e-modal isShow='{{ show1 }}'>
  <text slot='content' style='color: #666; font-size: 30rpx'>確認退出登陸嗎</text>
  <e-enhance-view
    bgColor='#fff'
    width='600'
    type='betweenCenter'
    slot='bottom'>
    <e-base-button
      id='cancle'
      text='取消' 
      theme='fillingAndGradient2'
      width='285'
      height='60'
      textSize='28'
      color='#FE9036'
      endColor='#FE4E36'
      radius='50'
      catchbuttontap='onModalButtonTap'>
    </e-base-button>
    <e-base-button
      id='ok'
      text='確認' 
      theme='fillingAndGradient2'
      width='285'
      height='60'
      textSize='28'
      color='#FE9036'
      endColor='#FE4E36'
      radius='50'
      catchbuttontap='onModalButtonTap'>
    </e-base-button>
  </e-enhance-view>
</e-modal>

3、結論

　　整體來看小程序的組件寫起來也是比較簡單的，只要把頁面玩熟了，組件也就水到渠成了。這裏只是簡單的總結了組件的使用技巧，若是還沒系統的學習過組件的強烈建議看下官方文檔。關於組件的bug也不是不少，我目前就遇到了一個：在navigator標籤中使用組件會出現沒法跳轉的問題。後續遇到bug會進行補充。

4、寫在最後

　　最後推薦一個由我開發維護的小程序組件庫，裏面封裝了開發中經常使用的組件已經收錄了二十餘個，後續還在添加和優化中，但願各位老鐵多多提意見，也能夠提交本身的組件。github地址：https://github.com/qq865738120/easyUI