全基础API置

刘春龙原创2026/3/5大约 4 分钟

提示

本章节只讲解部分常用的API，更多API请参考https://uniapp.dcloud.net.cn/api/

路由（页面跳转） 💎

路由管理页面之间的跳转

uni.navigateTo(OBJECT)
uni.redirectTo(OBJECT)
uni.reLaunch(OBJECT)
uni.switchTab(OBJECT)

uni.navigateTo 👻

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

uni.navigateTo({
  url: '/pages/list/list',
})

uni.redirectTo 👻

关闭当前页面，跳转到应用内的某个页面

uni.redirectTo({
  url: '/pages/list/list',
})

uni.reLaunch 👻

关闭所有页面，打开到应用内的某个页面

uni.reLaunch({
  url: '/pages/list/list',
})

uni.switchTab 👻

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.switchTab({
  url: '/pages/list/list',
})

路由传参（页面通讯） 💎

在项目中，页面与页面之间必然会需要传递数据，接下里我们说一说传递数据的方案

路由跳转传递参数 👻

//传递
uni.navigateTo({
  url: '/pages/list/list?name=itbaizhan',
})

//接收
onLoad((options) => {
  console.log(options.name)
})

组件之间传递参数 👻

父传子
子传父

提示

关于组件之间的通讯，请参考Vue组件通讯

组件通讯 💎

在uni-app中，组件通讯遵循Vue的规则

跨组件通讯

注意

在组件中，不可以使用onLoad()函数，在页面中才可以使用。

这里说的是非子父级关系的组件通讯，而是兄弟组件之间的数据传递

发送数据组件

sendWorldHandler(){
  uni.$emit('msg',{
       msg:'兄弟之间',
   })
}

获取数据组件

uni.$on('msg', function (data) {
  console.log(data.msg)
})

数据缓存_同步 💎

本地存储也是实际项目中必备的接口，一些用户信息、数据信息等需要存储到本地

同步数据缓存

uni.setStorageSync(KEY,DATA)
uni.getStorageSync(KEY)
uni.getStorageInfoSync()
uni.removeStorageSync(KEY)
uni.clearStorageSync()

uni.setStorageSync 👻

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

try {
  uni.setStorageSync('storage_key', 'hello')
} catch (e) {
  // error
}

uni.getStorageSync 👻

从本地缓存中同步获取指定 key 对应的内容

try {
  const value = uni.getStorageSync('storage_key')
  if (value) {
    console.log(value)
  }
} catch (e) {
  // error
}

uni.getStorageInfoSync 👻

同步获取当前 storage 的相关信息

try {
  const res = uni.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // error
}

uni.removeStorageSync 👻

从本地缓存中同步移除指定 key

try {
  uni.removeStorageSync('storage_key')
} catch (e) {
  // error
}

uni.clearStorageSync 👻

同步清理本地数据缓存

try {
  uni.clearStorageSync()
} catch (e) {
  // error
}

数据缓存_异步 💎

本地存储也是实际项目中必备的接口，一些用户信息、数据信息等需要存储到本地

异步数据缓存

uni.setStorage(OBJECT)
uni.getStorage(OBJECT)
uni.getStorageInfo(OBJECT)
uni.removeStorage(OBJECT)
uni.clearStorage()

uni.setStorage 👻

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

uni.setStorage({
  key: 'storage_key',
  data: 'hello',
  success: function () {
    console.log('success')
  },
})

uni.getStorage 👻

从本地缓存中异步获取指定 key 对应的内容

uni.getStorage({
  key: 'storage_key',
  success: function (res) {
    console.log(res.data)
  },
})

uni.getStorageInfo 👻

异步获取当前 storage 的相关信息

uni.getStorageInfo({
  success: function (res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  },
})

uni.removeStorage 👻

从本地缓存中异步移除指定 key

uni.removeStorage({
  key: 'storage_key',
  success: function (res) {
    console.log('success')
  },
})

uni.clearStorage 👻

清理本地数据缓存

uni.clearStorage()

网络请求 💎

发起网络请求：uni.request(OBJECT)

参数说明

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	请求方式
timeout	Number	否	60000	超时时间，单位 ms
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	请求方式
timeout	Number	否	60000	超时时间，单位 ms
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

GET请求 👻

uni.request({
  url: 'http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php',
  success(res) {
    console.log(res.data)
  },
})

POST请求 👻

uni.request({
  url: 'http://iwenwiki.com/api/blueberrypai/login.php',
  data: {
    user_id: 'iwen@qq.com',
    password: 'iwen123',
    verification_code: 'crfvw',
  },
  method: 'POST',
  header: {
    'Content-type': 'application/x-www-form-urlencoded',
  },
  success(res) {
    console.log(res.data)
  },
})

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。