微信小程序实战开发五：使用自定义组件配置一个通用的图片轮播组件。

睿儿网络郝刚

发布于 2020-09-08 11:09:19

5890

发布于 2020-09-08 11:09:19

在开发中有很多时候为了节约代码，方便使用各种功能，我们需要创建很多类、方法、过程。小程序也是一样，小程序所有的方法、过程、类都封装成了一个叫组件的东西，包括微信提供的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。