持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

头部

从今天起我们来完成一个商城的项目，首先创建 uni-app 项目 uni_shop，把 pages/index/index.vue 中多余的代码删去，然后修改 pages.json，修改头部文字、头部文字颜色、头部背景色、页面背景色：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni商城",
		"navigationBarBackgroundColor": "#F23030",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

这样头部就改好了：

底部

新建 cart.vue、member.vue、news.vue 三个文件，记得勾选在 pages.json 中注册，这样就会自动在 pages.json 中注册，我们不用再手动添加了：

然后在 pages.json 中增加 tabBar 选项，设置底部 tab 的列表，并通过 color 和 selectedColor 设置 tab 上的文字默认颜色和选中颜色

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
		,{
            "path" : "pages/news/news",
            "style" : {}
        }
	    ,{
            "path" : "pages/cart/cart",
            "style" : {}
        }
        ,{
            "path" : "pages/member/member",
            "style" : {}
        }
		
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni商城",
		"navigationBarBackgroundColor": "#F23030",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"color": "#2c2c2c",//未选中时文字颜色
		"selectedColor": "#F23030",//选中时文字颜色
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/index.png",
				"selectedIconPath": "static/index_active.png"
			},
			{
				"text": "资讯",
				"pagePath": "pages/news/news",
				"iconPath": "static/news.png",
				"selectedIconPath": "static/news_active.png"
			},
			{
				"text": "购物车",
				"pagePath": "pages/cart/cart",
				"iconPath": "static/cart.png",
				"selectedIconPath": "static/cart_active.png"
			},
			{
				"text": "会员",
				"pagePath": "pages/member/member",
				"iconPath": "static/member.png",
				"selectedIconPath": "static/member_active.png"
			}
		]
	}
}

这样底部就做好了：

获取轮播图数据

轮播图我们需要从接口获取，我们用到的接口全部来自：👉点击查看接口地址

首先获取轮播图数据并打印，修改 index.vue，在 onLoad 时调用我们增加的获取轮播图的方法 getSwipers()。在 getSwipers() 中，我们使用 uni.request来发送网络请求，并在成功时打印获取到的数据：

export default {
		......
		onLoad() {
			this.getSwipers()
		},
		methods: {
			getSwipers(){
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
					success:res=> {
						console.log(res)
					}
				})
			}
		}
	}

打印返回数据：

也可以用另一种写法：

methods: {	
	async getSwipers(){
		const res = await uni.request({
			url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
		})
		console.log(res)
	}
}

打印结果如下：

第二种写法了解下即可，我们还是采用第一种方法。我们把获取的轮播图数据保存下，在 data 中定义 swipers 数组，在发送请求返回结果时，statusCode 为 200 时表示成功，并给 swipers 赋值；在不为 200 时弹出提示框提示。

export default {
		data() {
			return {
				swipers:[]
			}
		},
		onLoad() {
			this.getSwipers()
		},
		methods: {
			getSwipers(){
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
					success:res=> {
						if(res.statusCode !== 200){
							return uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
						//console.log(res)
						this.swipers = res.data.message
					}
				})
			}
		}
	}

发送请求封装

我们封装发送请求。新建 util 目录，然后在其中新建 api.js

const BASE_URL = 'https://api-hmugo-web.itheima.net'
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL+options.url,
			data:options.data,
			success: (res) => {
				if(res.statusCode !== 200){
					return uni.showToast({
						title:'获取数据失败',
						icon:'error'
					})
				}
				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title:'请求接口失败',
					icon:'error'
				})
				reject(err)
			}
		})
	})
}

然后在 main.js 中将 myRequest 挂载的全局页面

import { myRequest } from 'util/api.js'

Vue.prototype.$myRequest = myRequest

我们现在可以修改 index.vue 中获取轮播图的方法了：

async getSwipers(){
	const res = await this.$myRequest({
		url:'/api/public/v1/home/swiperdata'
	})
	this.swipers = res.data.message
}

重新运行程序，我们在小程序中的 AppData 可以看到 swiper 已经被赋值了

轮播图展示

关于轮播图展示组件，我们可以查看官方文档：uni-app 内置组件文档：swiper

修改 index.vue，根据上边的文档 放入 swiper 组件，同时循环遍历我们已经拿到的轮播图数据：swipers 来填充组件 swiper-item

其中组件 swiper 的属性 indicator-dots 为 是否显示面板指示点；属性 circular 为是否采用衔接滑动，即播放到末尾后重新回到开头

<template>
	<view class="content">
		<swiper indicator-dots circular>
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
......
</script>

<style lang="scss">
	.content{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>

运行程序，效果如下：