小程序之自定义组件及其使用

在开发程序的过程当中，很多时候我们会遇到这样的问题，就是相似样式的模块重复多次的出现，那么对于这种情况有没有简单的方法可以统一管理呢？

是有的！

在我们小程序当中，除了前面讲到的模板可以使样式类似的内容统一管理，我们也可以通过自定义组件来定义重复出现的模块。

下面我们以星级评定为例来讲解一下自定义组件的使用：

首先我们需要在项目中新建一个文件夹如：components   用于存放所有的自定义组件；

第二步：新建一个stars的星级评定文件夹，存放我们要写的内容；

第三步：选中stars文件夹，鼠标右键选中“新建Component”名字依然为stars(与文件夹名保持一致)，写好之后敲回车会自动生成四个相关的文件;

第四步：代码设计

在stars.wxml文件中写界面相关代码：

<!--components/stars/stars.wxml-->
<view class="rate-group">
  <image wx:for="{{lights}}" src="/images/rate_light.png"></image>
  <image wx:for="{{halfs}}" src="/images/rate_half.png"></image>
  <image wx:for="{{grays}}" src="/images/rate_gray.png"></image>
  <text>{{rateText}}</text>
</view>

注意图片提前准备好，并放在images文件夹中（全星 半星  灰色三种）。

stars.js代码：

// components/stars/stars.js
Component({
  /**
   * 组件的属性列表
   * 相关参数
   */
  properties: {
    rate:{
      type:Number,
      value:0
    }
  },

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

  },

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

  },
  lifetimes:{//组件的生命周期函数
    attached:function(){
      var that=this;
      var rate=that.properties.rate;
      //星星个数计算
      var intRate=parseInt(rate);//对数字进行取整   省的出现小数
      var light=parseInt(intRate/2);//高亮星星的个数
      var half=intRate%2;//半星个数    0或1
      var gray=5-light-half;//灰色星星个数    5-其他
      var lights=[];
      var halfs=[];
      var grays=[];
      for(var index=1;index<=light;index++){
        lights.push(index);
      }
      for(var index=1;index<=half;index++){
        halfs.push(index);
      }
      for(var index=1;index<=gray;index++){
        grays.push(index);
      }
    }
  }
})

在index.wxml中使用自定义组件：

首先在index.json中引入：

{
  "usingComponents": {
    "stars":"/components/stars/stars"
  }
}

再在index.wxml中使用自定义组件：

 <stars rate="7.5"></stars>

第五步：完成以上四步简单的星级评定组件就定义好了，运行效果如下：

第六步：如果还想对组件进行其他的设置，我们也可以进行以下设置：

stars.wxml文件：

<!--components/stars/stars.wxml-->
<view class="rate-group">
  <image style="width:{{starsize}}rpx;height:{{starsize}}rpx;" wx:for="{{lights}}" src="/images/rate_light.png"></image>
  <image style="width:{{starsize}}rpx;height:{{starsize}}rpx;" wx:for="{{halfs}}" src="/images/rate_half.png"></image>
  <image style="width:{{starsize}}rpx;height:{{starsize}}rpx;" wx:for="{{grays}}" src="/images/rate_gray.png"></image>
  <text style="font-size:{{fontsize}};color:{{fontcolor}};">{{rateText}}</text>
</view>

stars.js文件：

// components/stars/stars.js
Component({
  /**
   * 组件的属性列表
   * 相关参数
   */
  properties: {
    rate:{
      type:Number,
      value:0
    },
    starsize:{//图片大小
      type:Number,
      value:20//rpx
    },
    fontsize:{//文本字体大小
      type:Number,
      value:20//rpx
    },
    fontcolor:{//字体颜色
      type:String,
      value:"#ccc"
    }
  },

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

  },

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

  },
  lifetimes:{//组件的生命周期函数
    attached:function(){
      var that=this;
      var rate=that.properties.rate;
      //星星个数计算
      var intRate=parseInt(rate);//对数字进行取整   省的出现小数
      var light=parseInt(intRate/2);//高亮星星的个数
      var half=intRate%2;//半星个数    0或1
      var gray=5-light-half;//灰色星星个数    5-其他
      var lights=[];
      var halfs=[];
      var grays=[];
      for(var index=1;index<=light;index++){
        lights.push(index);
      }
      for(var index=1;index<=half;index++){
        halfs.push(index);
      }
      for(var index=1;index<=gray;index++){
        grays.push(index);
      }
      //rate.toFixed(1)保留一位小数
      var rateText=rate&&rate>0?rate.toFixed(1):"未评分";//设置文本
      that.setData({
        lights:lights,
        halfs:halfs,
        grays:grays,
        rateText:rateText
      });
    }
  }
})

在index.wxml中使用组件：

<stars rate="7.5" starsize="30" fontsize="30" fontcolor="red"></stars>