uniapp学习（008-1 对接API）

原创 于 2024-10-30 17:43:53 发布 · 1.2k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #学习 #vue #微信小程序 #css #小程序 #前端框架

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第83p-第p92的内容

文章目录

对接API

在这里插入图片描述

写几个接口
在这里插入图片描述
在这里插入图片描述

封装request方法

新建一个request.js

封装一个request方法 返回值为Promise对象
在这里插入图片描述
编写success判断方法
在这里插入图片描述
使用解构方法传入参数，这里也设置一下默认值（config={}） 如果没有传东西过来的话就是{}
在这里插入图片描述

编写一个apis.js文件 用来调用api接口

在这里插入图片描述

可以把api请求前面的公共部分提出来

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

传参的api

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

向内再近一层
在这里插入图片描述

组件调用的时候 ，只解构出这个页面需要的api

在这里插入图片描述
在这里插入图片描述

分类模块

给分类数据添加默认值

在组件里
在这里插入图片描述
在这里插入图片描述
在页面里
在这里插入图片描述

设置更新事件的标签

超过3个月不显示标签,逻辑有点复杂，我们可以直接使用 ai对这段逻辑的js代码进行编写
这里使用的是莫尼卡(Monica)
在这里插入图片描述

创建一个通用的js工具文件
在这里插入图片描述

在这里插入图片描述

获取页面参数

onLoad可以获取页面传参
在这里插入图片描述

defineProps也可以从setup生命周期里获取的页面参数

vue3生命周期执行顺序

在这里插入图片描述

触底加载更多

onTeachBottom 触底事件
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

数据拼接
在这里插入图片描述

如果数据到底了 就不要发送请求了 我们使用一个布尔类型的标志作为判断条件
在这里插入图片描述
我们判断最后一次传来的数据长度是否与得到的长度相等 不相等代表已经是最后一页了
在这里插入图片描述

在这里插入图片描述

骨架屏

vue官方扩展组件没有骨架屏，我们自己在插件市场查找骨架屏

在这里插入图片描述

在这里插入图片描述

加载框

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

length为0的时候才出现
在这里插入图片描述

如果一个分类无数据，也要让它消失 这里我们使用上面的哪个noData即可
也可以直接利用status属性可以来达到效果
在这里插入图片描述

下面的使用这个

在这里插入图片描述

在这里插入图片描述

设置底部高度

在这里插入图片描述

在这里插入图片描述
安全高度界面
在这里插入图片描述

UniApp完美对接RuoYi框架开发企业级应用
最新发布
suny8的专栏
07-02 2184
UniApp + RuoYi组合适用于。
Uni-app接口入门及使用指南
Nekoneee的博客
05-20 2531
安装Node.js和HBuilderX开发工具；创建一个Uni-app项目，并配置好相关环境。1.处理并发请求 在某些情况下，我们可能需要同时发送多个请求，并等待它们都完成后再进行处理。这可以通过Promise.all()方法来实现。// 创建一个包含多个请求的数组// 使用Promise.all()等待所有请求完成// 所有请求完成后的处理逻辑// 处理每个请求的返回结果});})// 错误处理逻辑});
UniApp实现API接口封装与请求方法的设计与开发方法
api_Anzexi的博客
07-27 3839
在UniApp中，我们可以将所有的API接口进行统一管理和封装，以便调用和管理。在UniApp中，实现API接口封装与请求方法的设计与开发是一个十分重要的部分。本文将介绍如何使用UniApp实现API接口封装与请求方法的设计与开发，并提供相关的代码示例。结语：通过使用UniApp实现API接口封装与请求方法的设计与开发，可以大大简化代码的编写和维护工作，并提高开发效率。在UniApp的页面中，我们可以通过this.$api来调用API接口封装与请求方法进行数据的请求。三、使用API接口封装与请求方法。
uni-app环境搭建与调用API接口
m0_66225597的博客
05-22 3031
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app开发小程序封装API接口请求
CN_czj的博客
04-25 1244
一、建立一个https.js文件(第一行填写自己的接口地址，下面的请求地址在网上找的) const baseUrl='https://api.apiopen.top'; // 接口地址 export default function https(method,url,data){ //loading wx.showLoading({ title: '加载中...' }); //设置请求头 var header = { 'Content-Type':'application/js.
uni-app请求接口封装
yeyushaqiu的博客
06-02 3284
uniapp使用类封装接口，大致分为三步1 封装请求2 定义接口3 页面调用
uniapp接口请求封装api(超简单)
热门推荐
weixin_45811884的博客
06-03 1万+
最下面有使用方法 const commoneUrl = "http://192.168..."; //公共路径 const userId = uni.getStorageSync("userinfo_Data").id //用户id //post请求封装 function postRequest(url,data,type){ var promise = new Promise((resolve,reject) => { var postData = data; uni.reques
uni-app 开发的微信小程序-小兔鲜儿电商项目-uniapp-shop-vue3-ts.zip
11-04
1. `src`目录：项目的主要代码存放地，包含组件、页面、API接口、全局样式、配置文件等。 - `components`：自定义组件库，实现可复用的UI元素。 - `pages`：各个页面的逻辑和视图，如首页、商品详情、购物车、订单...
uniapp项目-基于deepseek api的微信聊天助手小程序
03-23
uniapp项目-基于deepseek api的微信聊天助手小程序
Honeywell-SdkWX_1.0.0 (1)_honeywell_honeywell扫码_uniapp_蓝牙_
10-02
《霍尼韦尔SdkWX：实现 UniApp 中的蓝牙扫码功能》 霍尼韦尔SdkWX是一款专为UniApp开发者设计的集成库，版本号1.0.0，旨在帮助开发者实现在移动设备上利用霍尼韦尔扫描硬件进行条码扫描的功能。此库特别强调了对...
学习路之uniapp-goEasy入门-最新版本
12-24
"学习路之uniapp-goEasy入门-最新版本"这一课程或者指南，显然意在帮助初学者或者具有一定基础的开发者掌握uni-app框架与GoEasy实时推送服务结合使用的方法。通过教程的学习，用户可以了解到如何利用uni-app框架快速...
uni-app常用API
上庸者-不服周
11-02 1219
（1）在App.vue文件中定义接口的基础地址。（3）在main.js文件中，配置全局的api。（2）创建utils\api.js。
uni-app超详细的api接口调用方法（Vue3）
qq_72675091的博客
04-21 7371
一篇非常详细的uni-app接口调用方法（vue3）
uniapp-一些实用的api接口
Anorry的博客
09-12 1023
调用后可以跳转到地图页。
Uni-App API 开发指南：构建跨平台应用
u011464172的专栏
06-17 1899
Uni-App 提供了丰富的 API，涵盖多媒体、设备、支付、地图以及其他功能，方便开发者构建功能丰富的跨平台应用。本文只是对 Uni-App API 的简要介绍，更详细的使用方法请参考官方文档。希望本文能够帮助您快速上手 Uni-App API 开发，创建优秀的跨平台应用。
uni-app全局文件与常用API
抟土成人祖，炼石补青天。眼中览银河，手可摘星辰。
08-01 1015
在使用uni-app开发跨平台应用时，全局文件和常用 API 是非常重要的部分。以下是有关uni-app全局文件结构以及常用 API 的详细介绍。
uniapp封装api具体步骤
m0_61169066的博客
02-10 2487
用api封装接口方法实现轮播 1.在根目录下新建文件夹api，在api文件夹下新建api.js 2.api.js代码（这里只写了get和post两种情况） //用BASEURL来表示域名地址 const BASE_URL = 'https://api-hmugo-web.itheima.net' //封装请求方法 export const myRequest = (options)=>{ return new Promise((resolve,reject)=>{ ..
uniapp上传文件时用到的api是什么？格式是什么？
子玉的博客
01-05 1043
需要注意的是，`uni.uploadFile` API在不同平台（如微信小程序、H5、App等）上的具体实现可能会有所差异，你需要根据自己的目标平台进行适配。该API用于将文件上传到服务器。- `filePath`：要上传的文件路径，可以是临时文件路径或者持久文件路径（如本地相册中的图片）。- `success`：上传成功时的回调函数，可以在此处处理上传成功后的逻辑。- `fail`：上传失败时的回调函数，可以在此处处理上传失败后的逻辑。- `url`：上传接口的地址，即服务器端处理文件上传的API地址。
uni-app一课一得 （请求接口方法详解+请求接口Promise写法）
weixin_74326596的博客
05-05 2620
Promise接口写法的步骤：1.创建目录和.js文件2.在.js文件中写入接口请求必要的东西3.在main.js中引入.js文件4.页面通过async方法和this.$Shop来使用.js文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值