第八阶段:uni-app小程序 --首页开发(2)

一:分析页面布局

1.1: 功能

搜索框:

轮播图:

分类的导航区:

楼层区:

二: 利用命令创建home分支

git branch

git checkout -b home

 git branch

三: 配置网络请求(main.js 入口函数)

由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用@escook/request-miniprogram 第三方包发起网络数据请求。

1:在每次请求之前展示loading效果(请求拦截器),每次请求完成之后隐藏loading(响应拦截器),就要使用拦截器了

2: option参数是请求时候的相关配置,如果暂时用不到,还是可以声明一下的

3: 原生小程序就用wx. xxx. 

   uni-app小程序就用 uni. xxx

4: 展示loading的时候提供属性 :标题title

5:请求完毕后还要手动关闭loading的效果,在响应拦截器

//main.js. 入口函数import Vue from 'vue'
import App from './App'// 导入网络请求的包
import { $http } from '@escook/request-miniprogram'uni.$http = $http// 请求的根路径
$http.baseUrl = 'https://www.uinav.com'// // 请求拦截器
// $http.beforeRequest = function(options) {
//   uni.showLoading({
//     title: '数据加载中...'
//   })
// }// // 响应拦截器
// $http.afterRequest = function() {
//   uni.hideLoading()
// }
// 请求拦截器
$http.beforeRequest = function(option){// 每次请求之前展示loading效果(请求拦截器)uni.showLoading({title:'数据加载中...'})
}// 响应拦截器// 请求完毕后还要手动关闭loading的效果,在响应拦截器
$http.afterRequest = function(){uni.hideLoading()
}

四:实现轮播图功能

4.1 请求轮播图的数据

实现步骤:

  1. 在 data 中定义轮播图的数组

  2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

  3. 在 methods 中定义获取轮播图数据的方法

1: 请求获取数据,请求失败就调用uni.showToast ( { title:,duration: 弹框时间  , icon:  图标} ); 请求成功就把数据复制给data中的swpierList

 2: data() { } 存储数据。 onload(){ } 调用方法,获取数据 

      vue中所有的方法都放在methods中,method{} 获取轮播图数据的方法

3: 发送请求前要+根路径,所以在main.js中配置根路径

// 请求的根路径
$http.baseUrl = 'https://www.uinav.com'

4: 请求服务器获取的数据是一个大对象(下图),在对象的data{ } 中 ;{ data : res } 意思是结构出data属性,并重命名为res属性

总结:

1: 在main.js中挂载了请求的根路径

2: 在home.vue中定义一个swiperList[ ] 节点

   onload(){ } 调用方法,获取轮播图的数据

    methods:{} 进行发起请求获取数据。利用uni.$http.get(url) 发起网络请求,返回值是promise,并且用async 和 await 进行网络优化;在判断是否成功,失败就返回提示,成功就复制给swiperList进行存储;

十: 解决问题

1: 在开发某个项目的时候,请求接口时,要在小程序里面配置域名 ,并在微信开发者工具里面配置相关请求的域名

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

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

相关文章

每天学习一个Linux命令之route

每天学习一个Linux命令之route 在Linux系统中,route命令是用于配置和管理网络路由表的工具。它允许管理员查看、添加、修改和删除路由表的条目,以确定网络流量的传输路径。以下是route命令的所有可用选项及其用法。 语法 route [选项] [目标] [命令]可…

【网络原理】TCP 协议中比较重要的一些特性(三)

目录 1、拥塞控制 2、延时应答 3、捎带应答 4、面向字节流 5、异常情况处理 5.1、其中一方出现了进程崩溃 5.2、其中一方出现关机(正常流程的关机) 5.3、其中一方出现断电(直接拔电源,也是关机,更突然的关机&am…

【JVM】什么是运行时数据区?

什么是运行时数据区? 运行时数据区指的是JVM所管理的内存区域,其中分成两大类: 线程共享 – 方法区、堆 方法区:存放每一个加载的类的元信息、运行时常量池、字符串常量池。 堆:存放创建出来的对象。 线程不共享 – …

pycharm如何创建虚拟环境

在 PyCharm 中创建虚拟环境可以通过以下步骤完成: 1. 打开 PyCharm:首先,打开 PyCharm 集成开发环境。 2. 创建新项目或打开现有项目**:如果你要在一个新项目中创建虚拟环境,可以选择创建新项目。如果已经有现有项目…

ASP.NET-框架分类与详解

一、ASP.NET框架概述 ASP.NET是由微软公司推出的一种基于.NET框架的服务器端Web应用程序开发技术。它提供了丰富的工具和框架,用于开发各种规模的Web应用程序和服务。ASP.NET具有高度的灵活性和可扩展性,适用于不同规模和复杂度的项目。 在ASP.NET的生…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:TextTimer)

通过文本显示计时信息并控制其计时器状态的组件。 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 无 接口 TextTimer(options?: TextTimerOptions) 参数: 参数名参数类型…

IBM DataStage服务的启动和停止

IBM DataStage服务的启动和停止 1 DataStage服务启动1.1 启动DB21.2 启动ASB代理服务1.3 启动ASBNODE服务1.4 启动DS服务1.5 启动DS监控 2 DataStage服务停止2.1 停止DS监控2.2 停止DS服务2.3 停止ASBNODE服务2.4 停止ASB代理服务2.5 停止DB2 在IBM DataStage中,服务…

【Miniconda】一文了解conda虚拟环境的作用

【Miniconda】一文了解conda虚拟环境的作用 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程👈 希望得到您的订阅和支持~ &am…

cuda out of memory后清理GPU缓存

省流&#xff1a; sudo fuser -v /dev/nvidia* |awk ‘{for(i1;i<NF;i)print "kill -9 " $i;}’ | sudo sh 事情是这样的&#xff0c;明明模型就不大&#xff0c;但是一直报错cuda out of memory. 输入nvidia-smi查看GPU利用率发现&#xff0c;整体GPU占用了9000…

跨域CORS

概述 同源策略 同源策略&#xff08;Sameoriginpolicy&#xff09;是一种约定&#xff0c;它是 浏览器 最核心、最基本 的安全功能。 因此 跨域问题 仅仅存在于 浏览器&#xff0c;走出浏览器 例如 curl、postman 就不存在跨域了。 所谓同源&#xff08;即指在同一个域&…

微信小程序关闭首页广告

由于之前微信小程序默认开启了首页广告位。导致很多老人误入广告页的内容&#xff0c;所以想着怎么屏蔽广告。好家伙&#xff0c;搜索一圈&#xff0c;要么是用户版本的屏蔽广告&#xff0c;或者是以下一个模棱两可的答案&#xff0c;要开发者设置一下什么参数的&#xff0c;如…

AI预测福彩3D第10弹【2024年3月16日预测--第2套算法重新开始计算第2次测试】

今天继续开始咱们第2套算法的验证&#xff0c;计划每套算法连续测试10期&#xff0c;达到50%的命中率即为较优的模型&#xff0c;可继续使用。老规矩&#xff0c;先上图表&#xff0c;再下结论~ 最终&#xff0c;经过研判分析&#xff0c;2024年3月16日福彩3D的七码预测结果如下…

Stargo 管理部署 Starrocks 集群

配置主机间 ssh 互信 ssh-copy-id hadoop02 ssh-copy-id hadoop03配置系统参数 ############################ Swap检查 ############################ echo 0 | sudo tee /proc/sys/vm/swappiness########################### 内核参数检查 ########################## echo…

外包干了3天,技术明显进步。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…

【DFS深度优先搜索专题】【蓝桥杯备考训练】:迷宫、奶牛选美、树的重心、大臣的旅费、扫雷【已更新完成】

目录 1、迷宫&#xff08;《信息学奥赛一本通》&#xff09; 2、奶牛选美&#xff08;USACO 2011 November Contest Bronze Division&#xff09; 3、树的重心&#xff08;模板&#xff09; 4、大臣的旅费&#xff08;第四届蓝桥杯省赛Java & C A组&#xff09; 5、扫…

Redis分布式锁:共享的秘密花园

嗨&#xff0c;亲爱的读者朋友们&#xff01;欢迎来到这个充满情感色彩、充满趣味的Redis分布式锁的冒险之旅。今天&#xff0c;我们将一起揭开这个神秘的面纱&#xff0c;深入了解Redis分布式锁是如何成为分布式系统的保护神&#xff0c;保护我们的数据免受混乱的。 分布式的…

JavaWeb笔记 --- 三、MyBatis

三、MyBatis 概述 MyBatis是一个持久层框架&#xff0c;用于简化JDBC Mapper代理开发 在resources配置文件包中创建多级目录用 / MyBatis核心配置文件 enviroments&#xff1a;配置数据库连接环境信息。 可以配置多个enviroment&#xff0c;通过default属性切换不同的envir…

以太网传输图片工程出现的问题总结(含源码)

本文对以太网传输图片的工程曾经出现过的问题及解决思路进行整理&#xff0c;便于日后出现类似问题能够快速处理。也指出为什么前文在FIFO IP设计时为啥强调深度的重要性。 1、问题 当工程综合完毕之后&#xff0c;下载到板子&#xff0c;连接以太网口&#xff0c;相关硬件如下…

源于一区| 改善性能的5种高效而小众的变异策略,一键调用 (Matlab)

基于群体的优化算法在达到迭代后期时种群多样性往往会速降&#xff0c;进化将陷入停滞&#xff0c;而许多算法本身并没有突变机制&#xff0c;一旦受到局部最优值的约束&#xff0c;就很难摆脱这些约束。它还将减少种群多样性&#xff0c;减缓收敛速度。 变异策略可以增加种群…

从嵌套事务的日志看MyBatis的sqlSession生命周期

service层业务代码 Override public void test(){QueryWrapper<StoreRebateCalculateLog> queryWrapper;queryWrapper new QueryWrapper<>();queryWrapper.eq("delete_flag", 0);//执行查询A,A事务开启List<StoreRebateCalculateLog> storeRebat…