电商实战项目-首页

自定义组件

定义组件：

声明组件：index/index.json

使用组件：index/index.wxml

轮播图

<!-- 
		1、swiper标签存在默认的框度和高度
			100% * 150px
		2、image标签也存在默认的宽度和高度
			320px * 240px
		3、设计图片和轮播图
			1、先看一下原图的宽高 750 * 340
			2、让图片的高度自适应 宽高 等于100%
			3、让swiper标签的高度 变成和图片的高一样即可
		4、图片标签
			mode 属性 渲染模式
				widthFix 让图片的的标签宽高 和 图片标签的内容的宽高都等比例的发生变化 
	-->
	<view class="index_swiper">
		<swiper indicator-dots autoplay="{{true}}" indicator-active-color="#EB4450">
			<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
				<navigator>
					<image src="{{item.image_src}}" mode="widthFix"></image>
				</navigator>
			</swiper-item>
		</swiper>
	</view>

.index_swiper{
  swiper{
    width: 750rpx;
    height: 340rpx;
    swiper-item{
      image{
        width: 100%;
      }
    }
  }
}

分类导航

<view class="index_cate">
	<navigator wx:for="{{cateList}}" wx:key="name">
		<image src="{{item.image_src}}" mode="widthFix"></image>
	</navigator>
</view>

.index_cate{
  display: flex;
  navigator{
    flex: 1;
    padding: 10rpx;
    image{
      width: 100%;
    }
  }
}

楼层（渲染嵌套）

<view class="index_floor">
		<view class="floor_group" wx:for="{{floorList}}" wx:key="floor_title">
			<view class="floor_title">
				<image src="{{item.floor_title.image_src}}" mode="widthFix"></image>
			</view>
			  <view class="floor_list">
				  <navigator url="" wx:for="{{item.product_list}}"
				   wx:for-item="item2" wx:for-index="index2" wx:key="name">
				  	<image class="" src="{{item2.image_src}}"
					   mode="{{index2 === 0 ? 'widthFix' : 'scaleToFill'}}"></image>
				  </navigator>
			  </view>
		</view>
	</view>

.index_floor{
  .floor_group{
    // border-left: 10rpx solid #fff;
    // border-right: 10rpx solid #fff;
    .floor_title{
      padding: 10rpx 0;
      image{
        width: 100%;
      }
    }
    .floor_list{
      overflow: hidden;
      padding: 0 10rpx;
      navigator{
        float: left;
        width: 33.33%;
        height:33.33vw * 386 / 232;

        // 后四个超链接
        &:nth-last-child(-n+4){
          // 原图的宽高 232 * 386
          // 232 / 386 = 33.33vw / height
          // 第一张图片的高度 height:33.33vw * 386 / 232
          height:33.33vw * 386 / 232 / 2;
          border-left: 10rpx solid #fff;
        }

        &:nth-child(2),&:nth-child(3){
          border-bottom: 10rpx solid #fff;
        }
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

发送请求（优化）

默认：

wx.request({
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     method: "GET",
     success:(res)=>{
       console.log(res.data.message);
       this.setData({
         swiperList:res.data.message
       })
     }
   })

考虑到多层回调，暂时用es6的Promise方法封装优化

export const request = (params) => {
  return new Promise((resolve,reject) => {
    wx.request({
      ...params,
      success:(res) => {
        resolve(res)
      },
      fail:() => {
        reject(err)
      }
    })
  })
}

然后在需要的页面中引入并使用

import { request } from "../../request/index.js";

  data: {
    swiperList: [],
    cateList: [],
    floorList:[]
  },

  onLoad: function (options) {
    // wx.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   method: "GET",
    //   success:(res)=>{
    //     console.log(res.data.message);
    //     this.setData({
    //       swiperList:res.data.message
    //     })
    //   }
    // })
    this.getSwiperList();
    this.getCateList();
    this.getFloorList();
  },
  // 获取楼层的数据
  getFloorList() {
    request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      method: "GET",
    }).then((res) => {
      console.log(res)
      this.setData({
        floorList: res.data.message,
      });
    });
  },
  
 // 获取分类导航的数据
  getCateList() {
    request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      method: "GET",
    }).then((res) => {
      this.setData({
        cateList: res.data.message,
      });
    });
  },

  // 获取轮播图的数据
  getSwiperList() {
    request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      method: "GET",
    }).then((res) => {
      this.setData({
        swiperList: res.data.message,
      });
    });
  },