商城小程序开发2

一、轮播图

1、配置网络请求

在main.js中配置网络请求服务

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

//将请求函数挂载到uni上的自定义属性上，方便全项目引用
uni.$http = $http

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

//相应拦截器
$http.afterRequest = function() {
	uni.hideLoading()
}

2、请求轮播图数据

轮播图的后端接口以及返回数据

在main.js中配置网络请求的基础域名（后端请求的基础域名）

前端返回数据：
1.data中定义返回值数据 ： swiperList
2.调用生命周期函数获取数据： onload
3.创建调用网络请求的方法：methods下定义相关函数 getswiperlist

const{ data : res }

应为返回的是名叫data的值，我们把data重新命名为res

其中meta下的status表示获取成功，否则失败可以做一个判断函数


这里可以了解一个知识 async 与 await（通常为一起使用）

uni.async函数的作用是创建一个异步函数

在上述代码中，我们使用了async关键字来定义一个异步函数，函数中使用了await关键字，表示要等待uni.$http请求函数执行完毕，并将结果赋值给res变量，最后返回res.data的值。

问题

vue3可能导致http请求挂载不上去

可以修改函数 直接请求后端地址，并添加方法

3、渲染轮播图的ui结构

直接打uSwiper会直接出现轮播图的模版，自己修改就能完成轮播图

<template>
	<view>
		<!--轮播图的区域-->
		<!--indicator-dots=轮播图下的小圆点 :autoplay=自动轮播 :interval=轮播时间间隔 :duration=每张轮播的时间  :circular=衔接滚动-->
		<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>
	</view>
</template>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			heigh: 100%;
		}
	}
</style>

4、轮播图点击进入商品详情页面

1.设置分包

现在pages.json页面创建分包设置，不需要路径（一定要保存）

根目录下创建subpkg文件，并创建gooddetail页面，设置分包subpkg

2.点击设置

3.封装返回值

二、分类导航

1、获取导航栏数据

2、渲染分类导航栏ui

home.vue下首页页面下添加分类导航栏区域

定义如下ui结构

		<!--分类导航栏区域-->
		<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;
		}
	}

3、点击跳转分类页面

主要用到 uni.switchTab api直接跳转tabBar页面

三、楼层区域

1、获取楼层数据

与上面获取轮播图，导航栏设计思路一样

2、渲染楼层标题

4、渲染楼层中的图片

1.定义ui结构

		<view class="floor-list">
			<!--每一层楼的item项-->
			<view class="floor-item" v-for="(item, i) in floorList" :key="i">
				<!--楼层的标题-->
				<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>
					<!--右边小图片的盒子-->
					<view class="right-img-box">
						<view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2">
							<template v-if="i2 !== 0">
								<image :src="item2.image_src" :style="{width: item2.image_width + 'rpx'}" mode="widthFix"></image>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>

2.美化页面

	.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;
	}

4、楼层图片跳转链接

1.创建subpkg分包

因为封装的数据类型返回路径和我们分包的前端路径不一样，所以需要重新处理数据中的路径值

第三步：修改为navigator标签，绑定我们的新链接