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

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

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

一、下载网络请求包

这个包是以前黑马程序员老师写的一个包,跟着课程学习,感觉挺好用的。

在资源管理器自己项目的页面下,调用cmd或者powershell,首先初始化npm

复制代码
npm init -y

然后下载大佬的包。

复制代码
npm install @escook/request-miniprogram

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

因为是node包管理下载的。

二、导入配置包

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

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

请求拦截器在网络请求过程中起着非常重要的作用。他们主要是用来处理一些预处理操作,如检查用户登陆状态,修改请求信息,添加额外的头部信息等。

uni包含了所有wx.api,所以可以无缝将wx换为uni。

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

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

python 复制代码
$http.afterRequest = function(){
	uni.hideLoading()
}

三、请求轮播图的数据

实现步骤:

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

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

html 复制代码
<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>

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

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

四、渲染轮播图的UI结构

1.渲染UI结构:

html 复制代码
<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结构

html 复制代码
<style lang="scss">
	swiper { 
		height: 330rpx;

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

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

相关推荐
啊我不会诶3 分钟前
倍增法和ST算法 个人学习笔记&代码
笔记·学习·算法
高压锅_12205 分钟前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_805962936 分钟前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
逼子格17 分钟前
振荡电路Multisim电路仿真实验汇总——硬件工程师笔记
笔记·嵌入式硬件·硬件工程·硬件工程师·硬件工程师真题·multisim电路仿真·震荡电流
aha-凯心35 分钟前
前端学习 vben 之 axios interceptors
前端·学习
一条破秋裤40 分钟前
一份多光谱数据分析
笔记·数据挖掘·数据分析
zstar-_1 小时前
【算法笔记】6.LeetCode-Hot100-链表专项
笔记·算法·leetcode
许白掰2 小时前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
程序员Xu2 小时前
【OD机试题解法笔记】连续出牌数量
笔记·算法·深度优先
生如夏花℡2 小时前
HarmonyOS学习记录4
学习·华为·harmonyos