微信小程序(黑马优购首页)

 

 

1.忽略指定的文件

.gitkeep:可以被git跟踪

2.配置tabBar

"tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
  

3.网络请求

main.js配置

//导入网络请求的包
import {$http} from '@escook/request-miniprogram'

uni.$http  = $http

//请求的根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'


//响应拦截器
$http.beforeRequest = function(options){
  uni.showLoading({
    title:'数据加载中...'
  })
}
//请求拦截器
$http.afterRequest = function(options){
  uni.hideLoading()
}

4.获取首页轮播图

 export default {
    data() {
      return {
        //轮播图数据列表
        swiperList: [],
        //https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
      };
    },
    onLoad() {
        this.getSwiperList();
    },
    methods: {
      async getSwiperList(){
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        console.log(res);
        if(res.meta.status !==200 ){
          return uni.showToast({
            title: '数据请求失败！',
            duration: 1500,
            icon: 'none'
          })
        }
        this.swiperList = res.message
        
      }
    }
  }

 <!-- 轮播图的区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <view class="swiper-item">
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>

5.配置分包

"subPackages": [
    {
      "root": "subpkg",
      "pages": [
        {
          "path": "goods_detail/goods_detail",
          "style":{}
        }
       
      ]
    }
  ],

6.封装弹框方法

//封装弹框的方法
uni.$showMsg = function(title = '数据请求失败!',duration = 1500){
  uni.showToast({
    title,
    duration,
    icon:'none'
  })
}

  async getSwiperList(){
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        console.log(res);
        if(res.meta.status !==200 ){
          // return uni.showToast({
          //   title: '数据请求失败！',
          //   duration: 1500,
          //   icon: 'none'
          // })
          return uni.$showMsg()
        }
        this.swiperList = res.message
        uni.$showMsg('数据请求成功')
        
      }

7.分类导航

  <!-- 分类导航区域 -->
    <view class="nav-list">
      <view class="nav-item" v-for="(item,i) in navList" :key="i">
        <image :src="item.image_src" class="nav-img"></image>
      </view>
    </view>
    



.nav-list{
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
  .nav-img{
    width: 128rpx;
    height: 140rpx;
    
  }
}

8.点击分类导航切换到分类页面

 <!-- 分类导航区域 -->
    <view class="nav-list">
      <view class="nav-item" v-for="(item,i) in navList"
       :key="i"  @click="navClickHandleer(item)">
        <image :src="item.image_src" class="nav-img"></image>
      </view>
    </view>



  navClickHandleer(item){
          if(item.name == '分类'){
            uni.switchTab({
              url: '/pages/cate/cate'
            })
          }
      }

9.楼层区域

 <!-- 楼层区域 -->
    <!-- 楼层的容器 -->
    <view class="floor-list">
      <!-- 每一个楼层的item项 -->
      <view class="floor-item" v-for="(item,index) in floorList" :key="index">
        <!-- 楼层的标题 -->
        <image :src="item.floor_title.image_src" class="floor-title"></image>
        <!-- 楼层的图片区域 -->
        <view class="floor-img-box">
            <!-- 左侧大图片的盒子 -->
            <view class="left-img-box">
              <image :src="item.product_list[0].image_src" 
              :style="{width:item.product_list[0].image_width + 'rpx' }"
              
              mode="widthFix"></image>
            </view>
            <!-- 右侧4个小图片的盒子 -->
              <view class="right-img-box">
                <view class="right-img-box" v-for="(item2,i2) in item.product_list"
                :key="i2" v-if=" i2 != 0" 
                
                >
                 <image :src="item2.image_src" mode="widthFix" 
                 :style="{width: item2.image_width + 'rpx'}"></image> 
                </view>
              </view>
          
            
        </view>
     
     
      </view>
    </view>

.floor-title{
  width: 100%;
  height: 60rpx;
}

.right-img-box{
  display: flex;
  flex-wrap: wrap;
  //使小图片分散对齐
  justify-content: space-around;
}

.floor-img-box{
  display: flex;
  padding-left: 10rpx;
}

10.点击楼层相应的图片进行页面跳转

   <!-- 每一个楼层的item项 -->
      <view class="floor-item" v-for="(item,index) in floorList" :key="index">
        <!-- 楼层的标题 -->
        <image :src="item.floor_title.image_src" class="floor-title"></image>
        <!-- 楼层的图片区域 -->
        <view class="floor-img-box">
            <!-- 左侧大图片的盒子 -->
            <navigator class="left-img-box"
            :url = "item.product_list[0].url"
            >
              <image :src="item.product_list[0].image_src" 
              :style="{width:item.product_list[0].image_width + 'rpx' }"
              mode="widthFix"></image>
            </navigator>
            <!-- 右侧4个小图片的盒子 -->
              <view class="right-img-box">
                <navigator class="right-img-box" v-for="(item2,i2) in item.product_list"
                :key="i2" v-if=" i2 != 0" :url="item2.url"
                >
                 <image :src="item2.image_src" mode="widthFix" 
                 :style="{width: item2.image_width + 'rpx'}"></image> 
                </navigator>
              </view>
        </view>
      </view>




//获取首页楼层数据的方法
      async getFloorList(){
          const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
          if(res.meta.status !== 200){
            return uni.$showMsg()
          }
          
          //对数据进行处理
          res.message.forEach(floor=>{
            floor.product_list.forEach(prod=>{
              prod.url = '/subpkg/goods_list/goods_list?'
              +prod.navigator_url.split('?')[1]
            })
          })
          console.log(res.message);
          
          
          this.floorList = res.message
          
      }