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

相关推荐
CHB19 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23333 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张4 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬4 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106324 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode