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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/718639.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Open3D(C++) 指定点数的体素滤波

目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、算法过程 对于数据量较大的点云,在后期进行配准时会影响计算效率。而体素格网…

vue3ts websocket通信

前端&#xff1a;vue3ts 后端&#xff1a;springboot npm安装依赖 cnpm install sockjs-client stompjs 前端代码 <template><div><el-input v-model"message" type"text" placeholder"发送" /><el-button-group><…

LCR 170. 交易逆序对的总数

解题思路&#xff1a; 归并排序&#xff0c;在归并的过程中不断计算逆序对的个数 count mid -i 1&#xff1b;的来源见下图&#xff0c;因为两个数组都是单调递增的&#xff0c;所以如果第一个数组的前一个元素大于第二个数组的对应元素&#xff0c;那么第一个数组的这一元素…

借助Aspose.SVG图像控件,在 C# 中将图像转换为 Base64

Base64 编码是一种二进制到文本的编码方案&#xff0c;可有效地将二进制数据转换为 ASCII 字符&#xff0c;为数据交换提供通用格式。在某些情况下&#xff0c;我们可能需要将JPG或PNG图像转换为 Base64 字符串数据。在这篇博文中&#xff0c;我们将学习如何在 C# 中将图像转换…

分享经典、现代和前沿软件工程课程

随着信息技术的发展&#xff0c;软件已经深入到人类社会生产和生活的各个方面。软件工程是将工程化的方法运用到软件的开发、运行和维护之中&#xff0c;以达到提高软件质量&#xff0c;降低开发成本的目的。软件工程已经成为当今最活跃、最热门的学科之一。 本次软件工程MOOC课…

模板06-普通函数与函数模板调用规则

1、如果函数模板和普通函数都可以实现&#xff0c;优先调用普通函数 2、可以通过空模板参数列表来强调调用函数模板 3、函数模板也可以发生重载 4、如果函数模板可以发生更好的匹配&#xff0c;优先调用函数模板 #include <iostream> using namespace std;int my_add …

混合云技术架构是什么样的

混合云技术架构是什么样的&#xff1f;混合云技术架构是一种将公有云和私有云相结合的云计算架构。它允许组织在私有云和公有云之间灵活地共享和迁移应用程序、数据和服务。 混合云技术架构的设计可以根据组织的需求和业务要求进行定制&#xff0c;通常包括以下组件&#xff1…

现在如何才能开通微信公众号留言功能?

为什么公众号没有留言功能&#xff1f;2018年2月12日之后直到现在&#xff0c;新注册公众号的运营者会发现一个问题&#xff1a;无论是个人还是企业的公众号&#xff0c;在后台都找不到留言功能了。这对公众号来说绝对是一个极差的体验&#xff0c;少了一个这么重要的功能&…

万村乐数字乡村系统开源代码:革命性引领,助推乡村振兴新篇章

如今&#xff0c;国际社会普遍认为信息化、数字化已是重大且不可逆转的发展趋势&#xff0c;如何让广大农村地区充分分享到这个发展带来的红利&#xff0c;从而提升农村的经济活力&#xff0c;确保村民生活质量不断优化&#xff0c;已然成为我们需要认真研究并积极解决的重大议…

Window下编写的sh文件在Linux/Docker中无法使用

Window下编写的sh文件在Linux/Docker中无法使用 一、sh文件目的1.1 初始状态1.2 目的 二、过程与异常2.1 首先获取标准ubuntu20.04 - 正常2.2 启动ubuntu20.04容器 - 正常2.3 执行windows下写的preInstall文件 - 报错 三、检查和处理3.1 评估异常3.2 处理异常3.3 调整后运行测试…

WebFlux的探索与实战 - r2dbc的多表查询

前言 在一个有数据库的项目中&#xff0c;条件查询与多表查询总是同幽灵般如影随形。 好久不见朋友们&#xff0c;我是forte。 本篇文章会以我的 个人经验 来介绍下如何在 Spring WebFlux 中使用 Spring Data R2DBC 进行多表查询。 这次我会以一个自己写的项目作为基础来为各…

[课程]yolov9目标检测封装成类调用

搞定系列&#xff1a;yolov9目标检测封装成类调用 课程地址&#xff1a;https://edu.csdn.net/course/detail/39352 课程介绍课程目录讨论留言 你将收获 学会yolov9封装基本技巧和大体思路 学会yolov9封装类的API调用技巧和自由扩展 学会使用Pycharm调试技巧和运行脚本技…

「连载」边缘计算(二十四)03-04:边缘部分源码(源码分析篇)

&#xff08;接上篇&#xff09; 在Register()函数中对EdgeHub struct的初始化只是对EdgeHub struct中的controller进行初始化。controller的初始化函数具体如下所示。 KubeEdge/edge/pkg/edgehub/controller.go //NewEdgeHubController creates and returns a EdgeHubContro…

uniapp+vue基于Android的图书馆借阅系统qb4y3-nodejs-php-pyton

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 框架支持:springboot/django/php/Ssm/flask/express均支持 前端开发:vue 语言&#xff1a;pythonjavanode.jsphp均支持 运行软件:idea/eclip…

2023天津公租房网上登记流程图,注册到信息填写

2023年天津市公共租赁住房网上登记流程图 小编为大家整理了天津市公共租赁住房网上登记流程&#xff0c;从登记到填写信息。 想要体验的朋友请看一下。 申请天津公共租赁住房时拒绝申报家庭情况会怎样&#xff1f; 天津市住房保障家庭在享受住房保障期间&#xff0c;如在应申…

智慧草莓基地:Java与SpringBoot的技术革新

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

xss.haozi:0x00

0x00没有什么过滤所以怎么写都没有关系有很多解 <script>alert(1)</script>

【Linux取经路】文件系统——inode与软硬链接

文章目录 一、前言二、认识硬件——磁盘2.1 磁盘的存储构成2.2 磁盘的逻辑抽象 三、操作系统对磁盘的使用3.1 再来理解创建文件3.2 再来理解删除文件3.3 再来理解目录 四、硬链接五、软链接六、结语 一、前言 在之前的【Linux取经路】文件系统之被打开的文件——文件描述符的引…

DevStack 基于 Ubuntu 部署 OpenStack

Devstack 简介 DevStack 是一系列可扩展的脚本&#xff0c;用于基于 git master 的最新版本快速调出完整的 OpenStack 环境。devstack 以交互方式用作开发环境和 OpenStack 项目大部分功能测试的基础。 devstack 透过执行 stack.sh 脚本&#xff0c;搭建 openstack 环境&…

AcWing 799. 最长连续不重复子序列

Problem: AcWing 799. 最长连续不重复子序列 文章目录 思路解题方法复杂度Code 思路 这是一个求最长连续不重复子序列的问题。我们可以使用双指针&#xff08;滑动窗口&#xff09;的方法来解决。我们维护一个窗口&#xff0c;并使用一个数组来记录窗口内元素的出现次数。当窗口…