公司门户网站建设特点,wordpress主题样式,成品短视频app下载有哪些软件在线观看,四川省住房和城乡建设厅门户网站微信小程序开发学习笔记《18》uni-app框架-网络请求 博主正在学习微信小程序开发#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 一、下载网络请求包 这个包是以前黑马程序员老师写的一个包#xff0c;跟着课程学习#x…微信小程序开发学习笔记《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中定义获取轮播图数据的方法 在对应需要轮播图的页面输入一下代码 templateviewHome/view /templatescriptexport 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},},} /scriptstyle langscss/style其中在发起网络请求之前需要设置请求的根路径。 //在main.js入口文件中设置 //请求的根路径 $http.baseUrl https://www.uinav.com //这个是自己后端写的根据自己后端项目需要写出对应根路径四、渲染轮播图的UI结构 1.渲染UI结构: templateview!--轮播图区域。可以通过uswp快捷生成模板--swiper :indicator-dotstrue :autoplaytrue :interval3000 :duration1000 :circulartrue!--循环渲染轮播图的item项--swiper-item v-for(item,i) in swiperList :keyiview classswiper-item!--动态绑定图片的 src属性--image :srcitem.image_src/image/view/swiper-item/swiper/view /template2.美化UI结构 style langscssswiper { height: 330rpx;.swiper-item,image {width: 100%;height: 100%;}} /style以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记如果有什么问题烦请联系我删除。