前端综合实训

一.构建项目页面
1.配置app.json文件，并配置页面路径

     

2.设置导航栏样式。

二.首页结构
1.构建首页结构。

2.设置首页背景样式。

三.新建banner组件
1.在index文件夹中新建一个banner文件夹。

2.配置banner.json文件

3.在index.json中引入当前组件路径。

4.同以上相同操作创建entrance文件。

四.完成轮播图组件
1.遍历bannerList，进行图片轮播。

2.在banner.scss中设置轮播图样式

五.完成entrance组件
1.构建导航区域

2.设置图标样式

设置后样式为下图

六.广告区域编写
1.在index.wxml中完成广告区域架构

2.在index.scss中完成广告区域样式

 7.商品列表区域编写
1.注册goods-card和goods-list组件。

在miniprogram中创建components文件夹，并在其创建goods-card和goods-list文件夹

2.在goods-card.json中注册引用组件

3.在goods-list.wxml中进行商品介绍编写

4.完成样式编写

.goods_cart_container{
  width: 350rpx;
  margin-top: 18rpx;
  background: #fff;
  border-radius: 18rpx;
}
 
.good_img {
  width: 100%;
  max-height: 360rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
 
.goods_item_info {
  display: flex;
  // 更改主轴为纵轴
  flex-direction: column;
  padding: 10rpx 20rpx;
}
 
.goods_item_info .goods_item_info_name {
  font-weight: 600;
  font-size: 30rpx;
  line-height: 20px;
  // 隐藏溢出
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.goods_item_info .goods_item_info_promo {
  padding-top: 20rpx;
  padding-bottom: 3px;
  font-size: 12px;
  color: #71797f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.goods_item_info_bottom {
  display: flex;
  line-height: 50rpx;
  margin-top: 20rpx;
}
 
.goods_item_info_bottom .goods_image {
  width: 48rpx;
  height: 48rpx;
}
 
.goods_item_info_price {
  font-size: 30rpx;
  font-weight: bold;
  color: #f3514f;
}
 
.goods_item_info_price .text {
  font-size: 24rpx;
  padding-right: 4rpx;
  font-weight: normal;
}
 
.goods_item_info_origin_price {
  flex: 1;
  font-size: 20rpx;
  color: #71797f;
  text-decoration-line: line-through;
  margin-left: 6%;
  margin-top: 4rpx;
}
 
.goods_item_info_origin_price .text {
  font-size: 20rpx;
}

5.在goods-list.html中编写商品区域

<view class="goods_container">
  <!-- 标题 -->
  <view class="goods_title">人气推荐</view>
 
  <!-- 列表区域 -->
  <view class="goods_card_list">
    <block wx:for="{{ 4 }}" wx:key="index">
      <goods-card />
    </block>
  </view>
 
  <!-- 查看更多 -->
  <view class="goods_more">
    <navigator url="" class="goods_more_btn">
      查看更多
    </navigator>
  </view>
 
</view>

6.在goods-list.scss中编写商品区域总体样式

.goods_title {
  text-align: center;
  font-size: 40rpx;
  line-height: 52rpx;
  font-weight: bold;
  color: #232628;
  padding: 20rpx 0 0rpx 0rpx;
}
 
.goods_card_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.goods_card_list::after {
  content: '';
  width: 350rpx;
}
 
.goods_more {
  margin: 20rpx 0;
}
 
.goods_more_btn {
  display: block;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20rpx;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: rgba(35,38,40,0.7);
}

完成后如图所示：

八.分类页面编写
1.在page/category/category.html中编写分类页面样式

<!--pages/category/category.wxml-->
<view>
  <view class="category-container">
    <!-- 左侧的滑动区域 -->
    <scroll-view class="category-left-view" scroll-y="">
      <view class="left-view-item active">爱礼精选</view>
      <view class="left-view-item">鲜花玫瑰</view>
      <view class="left-view-item">永生玫瑰</view>
      <view class="left-view-item">玫瑰珠宝</view>
    </scroll-view>
    <!-- 右侧的滑动区域 -->
    <scroll-view class="category-right-view" scroll-y="">
      <view class="test">
        <view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">
          <navigator url="" class="navigator">
            <image src="../../assets/images/cate-1.png" mode="" />
            <text class="goods_item_name">真情告白</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

2.在category.scss中完成样式编写

/* pages/category/category.wxss */
.category-container{
  display: flex;
  .category-left-view{
    width: 220rpx;
    background-color:white;
    height: 100vh;
    .left-view-item{
      font-size: 26rpx;
      // 文本排列
      text-align: center;
      line-height: 99epx;
    }
    .active{
      color: #f3514f;
      // &表示当前标签
      // ::before是伪元素标签
      &::before{
        content:"";
        width: 6rpx;
        height: 66rpx;
        background-color: #f3514f;
        display: block;
        position: absolute;
        // 沿着Y轴平移
        transform: translateY(25%);
      }
    }
  }
  .category-right-view{
   <!-- 
        &::(伪元素)
        所谓“伪元素”，就是在DOM结构中本来不存在的，但是通过CSS创建出来的元素
        ::before  ::after
        用于向指定元素的前面或者后面加入特定的内容
    -->
    &::before{
     content: "";
     width: 6rpx;
     height: 100vh;
     background-color: #f3514f;
     display:block;
     position: absolute;
    }
    .right-view-item{
      width: 33%;
      float: left;
      margin-top: 30rpx;
      .navigator{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .goods_item_name{
        font-size: 26rpx;
        margin-top: 18rpx;
      }
    }
  }
  image{
    width: 90rpx;
    height: 90rpx;
  }
}