在开发程序的过程当中,很多时候我们会遇到这样的问题,就是相似样式的模块重复多次的出现,那么对于这种情况有没有简单的方法可以统一管理呢?
是有的!
在我们小程序当中,除了前面讲到的模板可以使样式类似的内容统一管理,我们也可以通过自定义组件来定义重复出现的模块。
下面我们以星级评定为例来讲解一下自定义组件的使用:
首先我们需要在项目中新建一个文件夹如: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>