最近制作了一個農產品的小程序開發，分享一下載微信小程序制作過程，農產品小程序首頁包含logo、輪播圖、產品列表，設計圖如下：

wxml代碼：

<van-transition show="{{navTitle}}" >
  <van-nav-bar title="村頭村尾" fixed border="{{false}}" custom-class="nav-bar" title-class="nav-var-tit" />
</van-transition>

<view class="m1">
  <view class="bg">
    <image src="/image/a1.jpg" mode="widthFix" />
  </view>
  <view class="logo" style="margin-top:{{statusBarHeight + 22 +'px'}}">
    <image src="/image/logo.png" mode="widthFix" />
  </view>

  <view class="sw">
    <swiper class="swiper" indicator-dots="true" indicator-active-color="#fff" autoplay="true" interval="3500">
      <swiper-item>
        <image src="/image/a2.jpg" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="/image/a3.jpg" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="sbg">
      <image src="/image/a4.png" mode="widthFix" />
    </view>
  </view>
</view>

<view class="m2">
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標題標題標題標題標題題標題</view>
    <view class="v3">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標題標題標題標題標題標題標題標題標題標題標題標題</view>
    <view class="v3">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
  <navigator url="" hover-class="none" class="li">
    <view class="v1">
      <image src="/image/a3.jpg" mode="widthFix" />
    </view>
    <view class="v2">標題標題標題標題標題標題標題標題標題標題標題標題</view>
    <view class="v3">簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介簡介</view>
    <view class="v4">
      <view class="z"><text class="t1">￥</text>38.5<text class="t2">/1.5kg</text></view>
      <text class="y">已售 4521</text>
    </view>
  </navigator>
</view>

<view class="loading">
  <van-loading size="24px" color="#009e27" vertical>加載中...</van-loading>
</view>
<van-divider dashed contentPosition="center">所有數據已加載完成</van-divider>

wxss樣式代碼：

page{background:#f5f5f5;}
.m1{width:100%;height:auto;overflow: hidden;position: relative;}
.m1 .bg{position: absolute;left:0px;top:0px;width:100%;overflow: hidden;z-index: -1;}
.m1 .bg image{width: 100%;display: block;margin:0px auto;}
.m1 .logo{width:100%;height:auto;overflow:hidden;text-align: center;}
.m1 .logo image{width:160px;}
.m1 .sw{width:auto;margin:30px 15px 0px;}
.m1 .swiper{background:#fff;width:100%;border-radius:7px;height:170px;overflow:hidden;}
.m1 .swiper swiper-item{width:100%;height:100%;}
.m1 .swiper swiper-item image{width:100%;height:100%;display:block;border-radius: 7px;}
.m1 .sw .sbg{width:100%;height:10px;}
.m1 .sw .sbg image{width:100%;display: block;margin:0px auto;}

.m2{width:auto;padding:15px;overflow: hidden;}
.m2 .li{display: block;width:100%;height:auto;overflow:hidden;background:#fff;box-shadow:0px 0px 15px #eeeded;border-radius: 6px;margin-bottom: 15px;}
.m2 .li .v1{width:100%;overflow: hidden;}
.m2 .li .v1 image{width:100%;overflow: hidden;display: block;margin:0px auto;border-top-left-radius: 6px;border-top-right-radius: 6px;}
.m2 .li .v2{width:auto;margin:10px 15px 0px;font-size:18px;color:#000;font-weight: 500;}
.m2 .li .v3{width:auto;margin:5px 15px 0px;font-size:12px;color:#898989;}
.m2 .li .v4{width:auto;margin:5px 15px 8px;height:30px;line-height: 30px;}
.m2 .li .v4 .z{width:auto;float:left;font-size:24px;font-weight: bold;color:#009e27;}
.m2 .li .v4 .z .t1{font-size:14px;}
.m2 .li .v4 .z .t2{font-size:14px;font-weight: 500;}
.m2 .li .v4 .y{float:right;font-size:12px;color:#898989;}

.nav-bar{background-image:-webkit-linear-gradient(left,#2f9f20,#b6d32c) !important;}
.nav-var-tit{color:#fff !important;}