新手微信小程序静态页面开发（第一周）

这周开始学习写微信小程序，在结构方面和html差一些不过了解了后都差不多。

先展示成果

一开始的轮播图做的很顺利没想到这里的这么简单

<view class='lun'>
        <!-- 轮播图 -->
        <swiper class="swiper-container" indicator-dots autoplay interval="3000" indicator-color="#e1c985" indicator-active-color="white">
            <swiper-item>
                <image class="lun-img" src="../../images/lunb.png"></image>
            </swiper-item>
            <swiper-item>
                <image class="lun-img" src="../../images/lunb.png"></image>
            </swiper-item>
            <swiper-item>
                <image class="lun-img" src="../../images/lunb.png"></image>
            </swiper-item>
        </swiper>
    </view>

.swiper-container {
    height: 346rpx;
}

.item {
    height: 100%;
    line-height: 360rpx;
    text-align: center;
}

.lun {
    margin: auto;
    margin-top: 40rpx;
    width: 709rpx;
    height: 340rpx;
}
.lun-img{
    width: 100%;border-radius: 10rpx;
}

下一个就是图标区域，这个一开始我写的是两行<view>但是这样显然会增加复杂度，但是一开始如果写在一行会超出就是8个都写在一个view里面会有4个超出屏幕，因为用了display:flex，经过查询我知道可以使用flex-wrap: wrap; （换行）这样就完美解决了

这个区域也没啥好多说的，不过一开始左边的文本和右边的时间是单独写了两个div的，这个也不是很行，就写到一行里面去了，分别取了一个左右浮动。

这个区域是本章最多的一个了，我思考了一段时间大部分时间都花在这个“按钮”身上，我一开始以为这种就是用button来写的，这就导致了一个问题，button组件没有办法这么灵活的调整外观，所以一开始做的一直不满意，后面被告知用view来做就行了，后面价格点击事件就行反正是后台获取数据，问题就立马结局了。再一个就是这些文字，要想让他居中对齐最好加margin：xxrpx;这样整体会美观一些，下面几个区域大部分都是这样了就不放ch

<view class="shensong-row">
                <view class="shensong-kuai">
                    <image class="allpicture" src="../../images/nongye/no2.png"> </image>
                    <view>
                        <view class="allword">小麦(深松+播种+飞防+收割)</view>
                        <view class="row-all">

                            <view class="yn"> ￥626.00</view>
                            <view class="yuyue">立即预约</view>
                        </view>
                    </view>
                </view>

这一块也算是难点之一，因为4个字大小不一样，但是就导致不能依靠Padding来给他们撑开，因为撑开也会因为前面的问题导致宽度不一，所以直接用width来给他们一个固定宽度， 还有line-height来写高度

<view style="display: flex;margin-top: 40rpx;">
            <view class="xiji-title">西吉特产</view>
            <view class="xiji-title">种子</view>
            <view class="xiji-title">化肥</view>
            <view class="xiji-title">农药</view>
        </view>

.xiji-title{
    font-size: 28rpx;
    color: white;
    background: linear-gradient(#38adf1, #2158a9); 
    border: 1px solid #35a1e7;
    border-radius: 15rpx;

    width:150rpx;
    text-align: center;
    padding:0rpx 8rpx;
    margin: 0 10rpx;
    line-height:  56rpx;
    }

 总结下来写起来还是很快的，目前进度两天就能把这个写完，但是后面的细节部分不信，花了很多天来调整细节还有一些问题，不如把样式都写在css里面不能写在里面。总的来说还算不错。