### 3.1 创建 home 分支
运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：
git checkout -b home
由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.Request()API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求
3.2.1 安装 @escook/request-miniprogram在终端通过如下命令安装：
npm install @escook/request-miniprogram
安装成功后，根目录会自动出现如下目录：
在项目的 main.js 入口文件中，进行如下配置：
// 导入 $http 对象
import {
$http
} from '@escook/request-miniprogram'
// 将$http挂在到uni顶级对象之上，方便全局调用
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.UInav.com'
// 请求开始前做一些事情
$http.beforeRequest = function(options) {
uni.showLoading({
title: '数据加载中...' // 展示loading效果
})
}
// 请求完成之后做一些事情
$http.afterRequest = function(options) {
uni.hideLoading() // 隐藏loading效果
}3.3 轮播图区域3.3.1 请求轮播图的数据1. 实现步骤
- 在 data中定义轮播图的数组
- 在 onLoad生命周期函数中调用获取轮播图数据的方法
- 在 methods中定义获取轮播图数据的方法
export default {
/**
* 初始化数据
* */
data() {
return {
// 1. 轮播图的数据列表，默认为空数组
swiperList: [],
}
},
onLoad() {
// 2. 在小程序页面钢价在的时候，调用获取轮播图数据的方法
this.getSwiperList()
},
methods: {
// 3. 获取轮播图数据的方法
async getSwiperList() {
// 3.1 发起请求
const {
data: res
} = await uni.$http.get('/api/public/v1/home/swiperdata')
// 3.2 请求失败时执行
if (res.meta.status !== 200) {
return uni.showToast({
title: '数据请求失败!',
duration: 1500,
icon: 'none',
})
}
// 3.3 请求成功时为 data 中的数据赋值
this.swiperList = res.message
}
}
}
获取到的数据格式示例如下：
{
"message": [
{
"image_src": "https://api-hmugo-web.itheima.net/pyg/banner1.png",
"open_type": "navigate",
"goods_id": 129,
"navigator_url": "/pages/goods_detail/index?goods_id=129"
}
],
"meta": {
"msg": "获取成功",
"status": 200
}
}
参数说明如下：
参数名 | 类型 | 说明 |
image_src | string | 图片路径 |
open_type | string | 打开方式 |
goods_id | number | 商品id |
navigator_url | string | 导航链接 |
<template>
<view>
<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<!-- 循环渲染轮播图的 item 项 -->
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="swiper-item">
<!-- 动态绑定图片的src属性 -->
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>2. 美化 UI 结构
<style lang="scss">
swiper {
height: 340rpx;
.swiper-item {
width: 100%;
height: 100%;
}
}
</style>
测试效果如下：
