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

相关推荐
&白帝&6 小时前
uniapp中使用picker-view选择时间
前端·uni-app
fakaifa7 小时前
八戒农场小程序V2最新源码
小程序·uni-app·php·生活·开源软件
平凡シンプル11 小时前
安卓 uniapp跨端开发
android·uni-app
艾小逗13 小时前
uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
鸭子嘎鹅子呱1 天前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社1 天前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp(源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
Angus-zoe1 天前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal1 天前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky2 天前
uniapp+若依 开发租房小程序源码分享
uni-app
帅过二硕ฅ2 天前
uniapp点击跳转到对应位置
前端·javascript·uni-app