微信小程序-组件篇

 

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