微信小程序自定义组件

微信小程序自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
创建自定义组件：在页面中创建文件夹components，里面放需要的组件文件夹，如下：

image

下面我们先从写页面开始一步步往下深入

页面

image

先做出如上的效果，并添加点击切换橘色背景的效果(因为我们要使点击的当前view的class为active，所以需要设置一个变量，当变量等于当前下标时，class=active，下标通过加data-i获得，变量为activeIndex)

<view class="list" style="padding:50rpx 0">
  <view class="listLeft">度数</view>
  //当手点击时，触发choose函数，choose为获得当前数组的下标，赋值给activeIndex，再通过判断activeIndex===index来使当前class=active
  <view bindtap="choose" data-i='{{index}}' class="{{activeIndex===index?'active':''}}" wx:for='{{3}}'>0度</view>
</view>

.list{
  display: flex;
  margin: 10rpx 0;
}
.list .listLeft{
  min-width: 100rpx;
}
.list view{
  margin: 0 10rpx;
}
.active{
  background: orangered;
  color: #fff;
}

// pages/detail/detail.js
//引入外部封装函数
import {
  $get,
  $attr
} from '../../utils/fun.js'
Page({
//当触发此事件时，activeIndex当前view中data-i的值
  choose(e){
    let i = $attr(e,'i')
    this.setData({
      activeIndex:i
    })
  }，
  
  data: {
    activeIndex:0 
  },
})

自定义组件

将上面的代码样式语言放在components中相应文件夹的wxss文件中，我的是放在guige/index.wxcss中

/* pages/components/guige/index.wxss */
.list{
  display: flex;
  margin: 10rpx 0;
}
.list .listLeft{
  min-width: 100rpx;
}
.list view{
  margin: 0 10rpx;
}
.active{
  background: orangered;
  color: #fff;
}

相应的wxml放在对应的wxml中，其中标签之间的变量如{{label}}是其他页面传进的值，通过properties传入，如下是components中的页面，变量为{{}}中的值，来自properties

<!--pages/components/guige/index.wxml-->
<view class="list">
  <view class="listLeft">{{label}}</view>
  <view bindtap="choose" data-i='{{index}}' class="{{activeIndex===index?'active':''}}" wx:for='{{list}}'>{{item}}</view>
</view>

components的js文件和普通的不一样，方法需放在methods中，data放不需要传递的值，properties放传过来的值，其中的变量作为属性，他的属性值为数组，其他页面传进数据是通过组件上面的属性传递的

  properties: {
  //传递label，为字符串，value中放默认值
    label:{
      type:String,
      value:'种类'
    },
    list:{
      type: Array
    }
  },

如下是其他页面引用自定义的组件，在json中定义组件名字，及路径，在页面中用名字引入，传递label和list

<h1 label='种类' list='{{typeList}}'></h1>

{
  "usingComponents": {
    "h1":"../../components/guige/index"
  }
}

组件中也可以定义bind-tab，这样就不用每个view中都新建一个事件了

// pages/components/guige/index.js
import {
  $get,
  $attr
} from '../../utils/fun.js'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    label:{
      type:String,
      value:'种类'
    },
    list:{
      type: Array
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
//事件方法需保存下methods中
    choose(e) {
      let i = $attr(e, 'i')
      this.setData({
        activeIndex: i
      })
    }
  }
})

当然，我们也可以通过提供一个 <slot> 节点，用于承载组件引用时提供的子节点

<view>
  <slot></slot>
</view>

当页面引用时，只需写成

<h1 label='label'>111</h1>

但是此方法只适用于传递文本，不能传递数组等类型

组件中数值的变化一般都是通过对data里面的数值进行改变，再通过this.triggerEvent('aa',this.data.count),引用的页面通过组件上bindaa="change",这里的aa可以随便命名，只要保证triggerEvent和bind后面的字符一致就可，通过change方法(change也是可以随意命名)里面的e的参数得到要调用的值

 this.triggerEvent('change', this.data.mycount)

 <counter bindchange="handleCountChange" count="{{count}}"></counter>

完~