微信小程序开发学习笔记《18》uni-app框架-网络请求与轮播图

微信小程序开发学习笔记《18》uni-app框架-网络请求

博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档

一、下载网络请求包

这个包是以前黑马程序员老师写的一个包，跟着课程学习，感觉挺好用的。
在资源管理器自己项目的页面下，调用cmd或者powershell，首先初始化npm

npm init -y

然后下载大佬的包。

npm install @escook/request-miniprogram

下载的包会存放在如图所示

因为是node包管理下载的。

二、导入配置包

在main.js文件中头部加入如下代码，实现导入与配置。

//导入网络请求包（npm install @escook/request-miniprogram） 使用的是刘龙彬写的
import {$http} from '@escook/request-miniprogram'
uni.$http = $http     //设置uni里面的$http为导入的$http

请求拦截器在网络请求过程中起着非常重要的作用。他们主要是用来处理一些预处理操作，如检查用户登陆状态，修改请求信息，添加额外的头部信息等。
uni包含了所有wx.api，所以可以无缝将wx换为uni。

$http.beforeRequest = function(options){
	uni.showLoading({
		title:'数据加载中...'
	})
}

响应拦截器提供了一种有效的处理服务响应的方法，使我们能够全局处理接口的响应数据，统一处理接口的错误和异常等。

$http.afterRequest = function(){
	uni.hideLoading()
}

三、请求轮播图的数据

实现步骤:

1. 在data中定义轮播图的数组
2. 在onLoad生命周期函数中调用获取轮播图数据的方法
3. 在methods中定义获取轮播图数据的方法

在对应需要轮播图的页面，输入一下代码，

<template>
	<view>
		Home
	</view>
</template>

<script>
	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
			},
		},
	}
</script>

<style lang="scss">

</style>

其中在发起网络请求之前，需要设置请求的根路径。

//在main.js入口文件中设置
//请求的根路径
$http.baseUrl = 'https://www.uinav.com'      //这个是自己后端写的，根据自己后端项目需要写出对应根路径

四、渲染轮播图的UI结构

1.渲染UI结构:

<template>
	<view>
		<!--轮播图区域。可以通过uswp快捷生成模板！-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<!--循环渲染轮播图的item项-->
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item">
					<!--动态绑定图片的 src属性-->
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

2.美化UI结构

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

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

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。