微信小程序的开发（随堂笔记演练）

微信小程序首页的实现

一：项目的需求
eg：
1：大大降低客户的成本
2：从上至下：幻灯片-精品推荐-热门评测
二、编码实战
1.首页分为幻灯片、精品推荐、热门评测三个部分。需要在index.wxml中将其分为三大类。

2：幻灯片：从微信公众平台的组件中找到swiper复制代码

（ps:有的时候因为版本的不同，会遇到了一些问题。eg：幻灯片的图片加载不出来。)
解决方案：将 view class=“swiper-item{{item}}”/view那一行替换成image src="{{item}}" class=“slide-image” width=“355” height=“550”/，这样幻灯片里面的图片就能显现出来了。

3.：精品推荐
代码如下：
index.wxss
.header{
border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
}/* 精品推荐 /
.text-all{
color: green;
font-size: 10px;
}/ 全部精品 */
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.content-item{
height: 250rpx;
width: 45%;
background-color: goldenrod;
margin: 5px;
position: relative;
}/照片的四个框架/
.content-item image{
width: 100%;
height: 100%;
}/照片大小/
.content-item-text{
position: absolute;
bottom: 0px;
color: white;
font-size: 10px;
background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.8), rgba(0,0,0,0));
height:125rpx;
width: 98%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}/图片下方的渐变和文字/
（ps：此代码为实例，里边内容可根据需要自行修改即可）

4：热门评测
代码如下：
index.wxss
.list-item{
height: 500rpx;
width: 100%;
}
.list-item-images{
height: 300rpx;
width: 100%;
position: relative;
}
.list-item-imgages-img{
height: 100%;
width: 100%;
}
.avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
bottom: -50rpx;
right: 50rpx;
}
.list-item-text{
height: 200rpx;
width: 96%;
margin-top: 20rpx;
padding-left: 2%;
padding-right: 2%;
}
.list-item-text-content{
font-size: 10px;
color: #999;
margin-top: 20rpx;
}

本次完成的只是一个框架，最终实践内容会以视频呈现