微信小程序自定义组件解析

何为组件化

很久之前，古代人的文件都是一笔一划写的，后面懒得写字了，发明了活字印刷
现在，前端们懒得写重复的代码了，于是出现了组件化开发
某种程度上说，这两者有类似之处，把很多地方都会用到的相同的东西，单独抽出来做成一个独立的东西，哪里需要用到，就拿来用一下
组件化有很多好处
减少代码耦合
页面结构更加清晰直观
易于维护
…
引入并使用一个组件，无论如何会比你去之前的文件里复制粘贴要优雅的多不是么

如何组件化

组件化其实是一种思路，把一个很多地方都会用到的东西，抽取成组件
通常会按照组件的规则，将原本的代码改造成组件，变动并不大，但不代表直接复制粘贴就可以了
相反在真正的组件化改造中，确实会遇到不少麻烦，要考虑到的东西多了很多，大厂的ui组件库一个小小的按钮可能都有几十种属性

但是基础的组件化，其实也没那么难

在微信小程序中制作组件

这是微信小程序官方文档对自定义组件的介绍

组件与页面的结构相差无几，同样是4个文件，不过json文件中会用"component": true来表示这是一个组件，然后在组件的js中，与页面的结构也是不同的

可以在properties中声明组件的属性，在data中设置组件的初始数据，在method中声明方法

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      // 属性的数据类型
      type:String,
      // 属性的默认值
      value:'xz'
    },
    // 快速声明属性的方式
    age:Number
  },

  /**
   * 组件的初始数据
   */
  data: {
    initData:'组件的初始数据'
  },
  
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { // 在组件实例进入页面节点树时执行 },
    moved: function () { // 在组件实例被移动到节点树另一个位置时执行 },
    detached: function () { // 在组件实例被从页面节点树移除时执行 },
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { // 组件所在的页面被展示时执行 },
    hide: function () { // 组件所在的页面被隐藏时执行 },
    resize: function () { // 组件所在的页面尺寸变化时执行 },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 组件的方法
    sayHello(){}
  }
})

在wxml文件中可以使用slot来接受页面传入的结构
要注意在组件中书写样式的时候，不要使用id选择器，属性选择器以及标签选择器，并且后代选择器也要尽量避免使用，只使用class选择器是比较好的选择
行内样式通常用于动态绑定样式，如果是静态的样式请使用class

<view class="my_component">
	<text class="my_component-title">{{name}}</text>
	<slot></slot>
</view>

在页面中注册即可使用

{
  "usingComponents": {
    "my-component":"/components/my_component/my_component"
  }
}

<view>
	<my-component name='jack' age="{{18}}"><text>页面传入的结构</text></my-component>
</view>

这样，一个简单的组件便完成了

组件传值

父传子
父传子通过子组件标签的属性来传递即可，传入到子组件对应设置的数据

<view>
	<!-- 子组件设置了对应的properties即可接收到 -->
	<my-component name='jack' age="{{18}}" showTip ><text>页面传入的结构</text></my-component>
</view>

子传父
子传父通过自定义事件来传值，也可通过this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法

<view>
	<!-- 绑定组件设置的自定义事件 -->
	<my-component bind:componetTap="onComponentTap"><text>页面传入的结构</text></my-component>
</view>

Page({
  onComponentTap: function(e){
    console.log(e.detail) // 自定义组件触发事件时提供的detail对象,在组件内部自行设置
  }
})

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

<button bindtap="onTap">点击触发componentTap事件</button>

Component({
  properties: {},
  data:{initData:'组件内部的数据'}
  methods: {
    onTap: function(){
      var myEventDetail = {componentData:this.data.initData} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('componentTap', myEventDetail, myEventOption)
    }
  }
})

这样就可以从组件内部传递数据至父组件

最后附上一个目前业务中用到的简单的按钮组件,画风简陋让大伙见笑了…

<!--components/home/tool-btn/tool-btn.wxml-->
<view class="c_tool-btn" style="{{'background-color:'+bgc}}">
	<!--角标-->
	<view class="c_tool-btn-tip" wx:if="{{tip}}" >{{tip>=100?'99+':tip}}</view>
	<view class="c_tool-btn-slot" style="{{'color:'+color}}">
		<!-- slot接受一个icon -->
		<slot></slot>
	</view>
</view>

/* components/home/tool-btn/tool-btn.wxss */
.c_tool-btn {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  position: relative;
}

.c_tool-btn-slot {
  display: inline-block;
  position: absolute;
  font-size: 35rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c_tool-btn-tip {
  width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  line-height: 30rpx;
  text-align: center;
  color: white;
  background-color: red;
  font-size: 22rpx;
  position: absolute;
  right: -8rpx;
  top: -8rpx;
}

// components/home/tool-btn/tool-btn.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    color:{
      // 字体颜色
      type:String,
      value:'#b5b5b5'
    }, 
    bgc:{
      // 背景颜色
      type:String,
      value:'#fbc36e'
    }, 
    tip:Number, // 数字角标
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

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

  }
})

下一步的设想是增加一个type来改变为文字按钮或是圆角按钮，那样的话就需要根据传入的type返回不同风格的按钮即可