Tips：微信小程序可以在HbuilderX用HTML标签（如Ddiv、span等）写前端代码，也可以用微信小程序语法写（view、swiper标签），然后npm run dev编译后，在微信开发者工具里面导入该项目，就可以调试项目，查看效果。

效果图：

微信小程序实现轮播图，本例是在*.wpy页面开发（该页面的temlate内容对应小程序的wxml，style样式对应小程序的wxss，script对应小程序的js文件，config对应小程序的json文件）

<style type="less" scoped="scoped">   .swiper image {      width: 100%;      height: auto;  }    .swiper-image {      height: 100%;      width: 100%;    }    .slide-image {      height: 100%;      width: 100%;      display: block;    }</style><template>     <view class="swiper">        <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}"            style="height:{{imgheights[current]}}rpx;">            <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">               <swiper-item>                    <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />               </swiper-item>             </block>         </swiper>     </view></template><script>  import wepy from '@wepy/core'  wepy.page({    data: {      circular: true,      //是否显示画板指示点，根据图片数量自动生成多少个圆点      indicatorDots: true,      //选中点的颜色      //是否竖直      vertical: false,      //是否自动切换      autoplay: true,      //自动切换的间隔      interval: 3000,      //滑动动画时长毫秒      duration: 1000,      //所有图片的高度      imgheights: [],      //图片宽度      imgwidth: 320,      //默认      current: 0    },    imageLoad: function(e) { //获取图片真实宽度      var imgwidth = e.detail.width,        imgheight = e.detail.height,        //宽高比        ratio = imgwidth / imgheight;      console.log(imgwidth, imgheight)      //计算的高度值      var viewHeight = 750 / ratio;      var imgheight = viewHeight;      var imgheights = this.data.imgheights;      //把每一张图片的对应的高度记录到数组里      imgheights[e.target.dataset.id] = imgheight;      this.setData({        imgheights: imgheights      })    },    bindchange: function(e) {      // console.log(e.detail.current)      this.setData({        current: e.detail.current      })    }  })</script>

将代码粘过去之后，只需要修改循环对象为图片数据就可以了。