UNIAPP调用API接口

API:开发者可以通过这些接口与其它程序进行交互,获取所需数据或者执行指定操作。

网络请求 API:

UniApp 中内置了网络请求 API,方便调用

uni.request

uni.uploadFile

uni.request 接口主要用于实现网络请求。GET 和 POST 是使用最普遍的两种请求方式。

该接口支持的请求方式有:GET、POST、PUT、DELETE、HEAD、OPTIONS、TRACE、CONNECT。

参数名 类型 是否必填 作用
url String 请求的 URL 地址
method String 请求的方式,支持 GET、POST、PUT、DELETE、HEAD、OPTIONS、TRACE、CONNECT
header Object 需要设置的请求头部信息
data Object/String 请求的数据
dataType String 返回值的数据类型,支持 json、text、default
responseType String 响应类型,支持 text、arraybuffer、blob
success Function 请求成功后的回调函数
fail Function 请求失败后的回调函数
complete Function 请求完成后的回调函数
复制代码
uni.request({
    url: 'https://api.example.com/login', 
    method: 'POST',  
    header: {
        'content-type': 'application/json'
    },  
    data: {
        username: 'example',
        password: 'example123'
    },  
    success: res => {
        console.log(res.data)
    },  
    fail: error => {
        console.log(error)
    }
})

uni.uploadFile 接口主要用于上传文件

参数名 类型 是否必填 作用
url String 请求的 URL 地址
filePath String 要上传的文件路径,仅支持本地路径
name String 上传文件的名字
header Object 需要设置的请求头部信息
formData Object 需要上传的额外参数
success Function 请求成功后的回调函数
fail Function 请求失败后的回调函数
complete Function 请求完成后的回调函数
复制代码
uni.uploadFile({
    url: 'https://api.example.com/upload', 
    filePath: '/path/to/file',
    name: 'file', 
    header: {
        'content-type': 'multipart/form-data'
    }, 
    formData: {
        'name': 'example'
    },
    success: res => {
        console.log(res.data)
    },
    fail: error => {
        console.log(error)
    }
})

路由 API:

uni.navigateTo

uni.redirectTo

uni.navigateTo 接口是用于跳转到新页面的方法,并传递参数。

通过这个接口,我们可以实现跳转到新页面,并传递参数。

参数名 类型 是否必填 作用
url String 要跳转的页面路径,支持相对路径和绝对路径
success Function 跳转成功后的回调函数
fail Function 跳转失败后的回调函数
complete Function 跳转完成后的回调函数
复制代码
uni.navigateTo({
    url: '/pages/detail/detail?id=1',
    success: res => {
        console.log(res)
    },
    fail: error => {
        console.log(error)
    }
})

uni.redirectTo 接口是用于关闭当前页面并跳转到新页面的方法

参数名 类型 是否必填 作用
url String 要跳转的页面路径,支持相对路径和绝对路径
success Function 跳转成功后的回调函数
fail Function 跳转失败后的回调函数
complete Function 跳转完成后的回调函数
复制代码
uni.redirectTo({
    url: '/pages/index/index',
    success: res => {
        console.log(res)
    },
    fail: error => {
        console.log(error)
    }
})

Storage API

一些数据需要本地存储,以便在下次启动应用程序时能够快速访问到

UniApp 提供了 Storage API,用于本地存储数据。

方法名 参数 作用
uni.setStorage key,value 将数据存储在本地缓存中
uni.getStorage key 从本地缓存中获取指定 key 对应的内容
uni.removeStorage key 从本地缓存中删除指定 key
uni.clearStorage 清空本地缓存
复制代码
// 存储数据
uni.setStorage({
    key: 'username',
    data: 'example',
    success: function () {
        console.log('数据存储成功')
    }
})

// 获取数据
uni.getStorage({
    key: 'username',
    success: function (res) {
        console.log(res.data)
    }
})

// 删除数据
uni.removeStorage({
    key: 'username',
    success: function () {
        console.log('数据删除成功')
    }
})

网络请求、路由、Storage 存储、组件、插件、生命周期

相关推荐
军军君018 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_233312 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
Java陈序员18 小时前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
玩代码的菜鸟1 天前
uniapp类似抖音视频滑动
uni-app
默魔2 天前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
shmily ....2 天前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术2 天前
uniapp制作一个个人页面
uni-app
小阿技术2 天前
uniapp制作一个视频播放页面
uni-app
小周同学:3 天前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app