在开发中有很多时候为了节约代码,方便使用各种功能,我们需要创建很多类、方法、过程。小程序也是一样,小程序所有的方法、过程、类都封装成了一个叫组件的东西,包括微信提供的WEUL组件等等,而且我们还可以自定义组件,把重复使用性高的代码封装成组件方便调用。
自定义组件创建方式,先自已建一个文件夹,命名为 components
在这个文件夹下面创建自已的不同的组件,我们今天创建的就是一个 swiper 图片轮播组件。
文件创建好之后我们先在WXML文件中把需要的代码写上。代码如下:使用微信提供的swiper创建一个轮播组件。
<swiper easing-function="{{easeInOutCubic}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="{{indicator_active_color}}" indicator-color="{{indicator_color}}" style="height:{{height}}">
<block wx:for="{{imgUrls}}" wx:key="id">
<swiper-item>
<image src="{{item.photoUrl}}" class="slide-image" bindtap="swiperLink" data-linktype="{{item.linktype}}" data-url="{{item.linkurl}}" />
</swiper-item>
</block>
</swiper>
因为要重复在不同的情况下使用,所以需要传不同的参数用来控制组件的外观样式及内容。
从上面的代码可以看到我们有很多参数,这些参数都需要在 .js文件中定义才能使用。
.JS文件如下:
// components/swi.js
Component({
/**
* 组件的属性列表
*/
properties: {
height: String,
imgUrls: Array,
indicatorDots: String,
autoplay: String,
interval: Number,
duration: Number,
indicator_active_color:String,
indicator_color:String,
easeInOutCubic:String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
swiperLink:function(e){
//console.log("233");
//console.log(e);
if(e.currentTarget.dataset.linktype==1){//链接到导航条上的页面
wx.switchTab({
url: e.currentTarget.dataset.url
});
}else if(e.currentTarget.dataset.linktype==2){
wx.navigateTo({
url: e.currentTarget.dataset.url
});
}
}
}
})
我们在JS文件中,通过定义参数的方法把需要接收的数据都定义好,然后还写了一个点击事件,因为图片上面可能会加链接。。。
这样一个组件就创建好了。我们引用它的时候怎么引用呢?
先在需要引用组件的.JSON文件中载入组件。
{
"usingComponents": {
"my-swiper": "../../components/swiper/swiper",
"mp-loading": "weui-miniprogram/loading/loading"
}
}
组件加载完成之后就可以直接使用了
在WXML文件中,我们根据定义的组件名称,直接引用组件,并把各项参数都在组件里面定义好,这些参数会被组件中的JS文件获取并使用。
<my-swiper height="300px" imgUrls="{{imgUrls}}" indicatorDots="true" autoplay="true" interval="3000" duration="1000" indicator_active_color="#ff3300" indicator_color="rgba(0, 0, 0, 1)" wx:if="{{swipersuccess=='true'}}">
</my-swiper>
<mp-loading class="swiperloading" type="circle" wx:else></mp-loading>
为了效果好看我们还用官方提供的loading组件给它做了一个预加载项。在没有加载完成的时候显示的是一个正在加载的样式。
接下来我们只需要在JS代码中通过wx.request 把 imgUrls 这个变量获取了,并赋值就OK了。
wx.request({
url: wx.getStorageSync('requestUrl')+'request/getswiper.php',
data: {"class":1},
method:"GET",
header: {'content-type': 'application/json' },// 默认值
success:function(swiper) {
if(swiper.data.errorMsg=='success'){
that.setData({swipersuccess:'true'});
that.setData({imgUrls:swiper.data.imgUrls});
}else{
that.setData({swipersuccess:swiper.data.errorMsg});
console.log(swiper.data.errorMsg);
}
通过这个方法我们就从服务器上获取到了图片及链接数组。。最终调用结果展示OK。
总结:这里面我们用到了 自定义组件 服务器交互 两个知识点。能过这个方法我们就可以直接在服务器上控制轮播图的展示,维护。可以免费修改了之后再去发布版本的麻烦。