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 存储、组件、插件、生命周期

相关推荐
断墨先生20 分钟前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~7 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端11 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86811 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦19 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app