uniapp学习（008-1 对接API）

最新推荐文章于 2025-01-01 17:18:35 发布
最新推荐文章于 2025-01-01 17:18:35 发布
阅读量1.1k 收藏 8
点赞数 18
分类专栏： uniapp 文章标签： uni-app 学习 vue 微信小程序 css 小程序 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/143181556
版权

零基础入门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实现API接口封装与请求方法的设计与开发方法
api_Anzexi的博客
07-27 3658
在UniApp中，我们可以将所有的API接口进行统一管理和封装，以便调用和管理。在UniApp中，实现API接口封装与请求方法的设计与开发是一个十分重要的部分。本文将介绍如何使用UniApp实现API接口封装与请求方法的设计与开发，并提供相关的代码示例。结语：通过使用UniApp实现API接口封装与请求方法的设计与开发，可以大大简化代码的编写和维护工作，并提高开发效率。在UniApp的页面中，我们可以通过this.$api来调用API接口封装与请求方法进行数据的请求。三、使用API接口封装与请求方法。
Uni-app接口入门及使用指南
Nekoneee的博客
05-20 2166
安装Node.js和HBuilderX开发工具；创建一个Uni-app项目，并配置好相关环境。1.处理并发请求 在某些情况下，我们可能需要同时发送多个请求，并等待它们都完成后再进行处理。这可以通过Promise.all()方法来实现。// 创建一个包含多个请求的数组// 使用Promise.all()等待所有请求完成// 所有请求完成后的处理逻辑// 处理每个请求的返回结果});})// 错误处理逻辑});
uni-app环境搭建与调用API接口
m0_66225597的博客
05-22 2493
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app开发小程序封装API接口请求
CN_czj的博客
04-25 1189
一、建立一个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 3229
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`：各个页面的逻辑和视图，如首页、商品详情、购物车、订单...
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框架快速...
uniapp-蓝牙模块连接
03-06
【标题】"uniapp-蓝牙模块连接"涉及的是在uni-app框架中实现蓝牙设备的连接与通信技术。uni-app是一个基于Vue.js开发的多端框架，可以用来构建跨平台的小程序、H5、APP等应用。在uni-app中，开发者可以利用其提供的...
Android，IOS，微信小程序仿糗百项目uniapp-QiuBai-master.zip
09-25
4. **数据交互与API调用**：为了获取和提交数据，项目可能需要对接糗百的API接口，这涉及到了网络请求的处理，通常使用uniapp的uni.request()方法。开发者需要了解JSON格式，以及HTTP协议的基本知识。 5. **状态...
uni-app常用API
上庸者-不服周
11-02 1122
（1）在App.vue文件中定义接口的基础地址。（3）在main.js文件中，配置全局的api。（2）创建utils\api.js。
uni-app超详细的api接口调用方法（Vue3）
qq_72675091的博客
04-21 6431
一篇非常详细的uni-app接口调用方法（vue3）
uniapp-一些实用的api接口
Anorry的博客
09-12 976
调用后可以跳转到地图页。
Uni-App API 开发指南：构建跨平台应用
u011464172的专栏
06-17 1727
Uni-App 提供了丰富的 API，涵盖多媒体、设备、支付、地图以及其他功能，方便开发者构建功能丰富的跨平台应用。本文只是对 Uni-App API 的简要介绍，更详细的使用方法请参考官方文档。希望本文能够帮助您快速上手 Uni-App API 开发，创建优秀的跨平台应用。
uniapp封装api具体步骤
m0_61169066的博客
02-10 2450
用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)=>{ ..
uni-app全局文件与常用API
面向命运编程
08-01 921
在使用uni-app开发跨平台应用时，全局文件和常用 API 是非常重要的部分。以下是有关uni-app全局文件结构以及常用 API 的详细介绍。
uniapp常用api
qq_45796592的博客
03-09 3590
uniapp的常用api
UniApp 与后端服务的交互
qq_42190530的博客
01-01 1878
UniApp 与后端服务的交互
uniapp组件uni-file-picker如何使用的
最新发布
03-23
<think>好的，用户想了解uniapp中uni-file-picker组件的使用方法和示例。首先，我需要回忆一下uni-file-picker的基本功能，它是用于文件上传的组件，支持选择图片、视频等文件，并且可以配合云存储使用。接下来，我应该按照用户提供的引用内容，特别是引用[2]，里面提到了结合canvas添加水印的例子，可能需要将这点整合到教程中。 首先，我应该介绍组件的基本用法，比如如何引入到页面中，基本的属性设置，比如file-mediatype指定文件类型，file-extname指定后缀，limit限制数量等。然后，需要说明事件处理，比如@select选择文件后的回调，@progress上传进度，@success和@fail的处理。 然后，用户提供的引用[2]中提到将水印方法抽离成组件，这部分可以作为高级用法示例。需要展示如何在选择文件后，调用子组件的方法添加水印。可能需要解释waterMarker.vue子组件的结构，以及如何在父组件中引用它，传递图片路径，然后处理水印后的图片上传。 同时，用户可能对实际应用中的常见问题感兴趣，比如如何限制文件类型、大小，如何显示预览，如何与后端接口对接等。应该覆盖这些常见问题的解决方法，比如使用uni.uploadFile进行上传，处理服务器响应。 需要注意用户提供的引用内容中的细节，比如uni.downloadFile和uni.saveFile，虽然问题主要是关于uni-file-picker，但可能在上传后的处理中涉及这些API，可以适当提及。 最后，按照用户的要求生成相关问题，这些问题应该围绕组件的其他功能、优化方法、结合其他API的使用，比如如何自定义样式，多平台适配问题，大文件分片上传等。 检查是否有遗漏的部分，比如代码示例的正确性，确保使用中文回答，格式符合要求，特别是LaTeX部分，但在这个问题中可能用不上数学公式，所以可能不需要添加。确保引用标记正确，比如引用[^2]在讲解水印部分添加。最后保持结构清晰，分步骤说明，并提供示例代码。</think>### uni-file-picker 组件使用教程 #### 1. 基本功能与属性 uni-file-picker 是用于实现文件选择、上传的组件，支持图片、视频、文件等类型。通过以下属性控制行为： - `file-mediatype`：指定文件类型（`image`/`video`/`all`） - `file-extname`：限制文件后缀（如`.jpg,.png`） - `limit`：限制选择文件数量 - `mode="grid"`：启用九宫格预览模式 #### 2. 基础示例代码 ```html <template> <view> <uni-file-picker file-mediatype="image" :limit="3" @select="handleSelect" @progress="handleProgress" @success="handleSuccess" ></uni-file-picker> </view> </template> <script> export default { methods: { handleSelect(files) { console.log('已选择文件:', files.tempFiles) }, handleProgress(e) { console.log('上传进度:', e.progress) }, handleSuccess(res) { console.log('上传成功:', res.data) } } } </script> ``` #### 3. 添加水印功能（结合子组件） 引用[2]中提到的水印组件集成方法： 1. **创建子组件** `waterMarker.vue`： ```html <template> <canvas canvas-id="watermarkCanvas"></canvas> </template> <script> export default { methods: { addWatermark(src) { return new Promise((resolve) => { const ctx = uni.createCanvasContext('watermarkCanvas') // 绘制图片与水印文字 ctx.drawImage(src, 0, 0, 300, 200) ctx.setFontSize(14) ctx.fillText(new Date().toLocaleString(), 10, 190) ctx.draw(false, () => { uni.canvasToTempFilePath({ canvasId: 'watermarkCanvas', success: (res) => resolve(res.tempFilePath) }) }) }) } } } </script> ``` 2. **父组件调用**： ```html <template> <view> <water-mark ref="marker"></water-mark> <uni-file-picker @select="addMark"/> </view> </template> <script> export default { methods: { async addMark(files) { const marked = await this.$refs.marker.addWatermark(files.tempFilePaths[0]) uni.uploadFile({ url: 'https://api.example.com/upload', filePath: marked, name: 'file' }) } } } </script> ``` #### 4. 核心配置说明 | 属性 | 类型 | 说明 | |--------------|------------|-------------------------------| | auto-upload | Boolean | 是否自动上传（默认true） | | disablePreview | Boolean | 禁用预览功能 | | del-icon | String | 自定义删除图标 | #### 5. 文件管理相关API - 手动上传：通过 `ref` 调用 `upload()` - 删除文件：`remove(index)` - 清空文件：`clear()`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值