微信小程序开发学习笔记《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站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。
