微信小程序开发学习笔记《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()
}
三、请求轮播图的数据
实现步骤:
- 在data中定义轮播图的数组
- 在onLoad生命周期函数中调用获取轮播图数据的方法
- 在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站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。
