当前位置:首页 > uni-app

uniapp常用接口

2026-03-05 06:24:03uni-app

uniapp常用接口分类

uniapp作为跨平台开发框架,提供了丰富的API接口以满足不同场景需求,主要分为以下几大类:

网络请求

使用uni.request发起HTTP请求,支持Promise风格调用:

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  success: (res) => console.log(res.data)
});

数据缓存

uni.setStorageuni.getStorage实现本地数据存储:

uni.setStorage({
  key: 'user_token',
  data: 'abcdef123456'
});

媒体操作

uni.chooseImage选择图片,uni.previewImage预览图片:

uni.chooseImage({
  count: 3,
  success: (res) => console.log(res.tempFilePaths)
});

设备相关

uni.getSystemInfo获取设备信息:

uni.getSystemInfo({
  success: (res) => console.log(res.model)
});

位置服务

uni.getLocation获取当前位置:

uni.getLocation({
  type: 'wgs84',
  success: (res) => console.log(res.latitude)
});

界面交互

uni.showToast显示提示框:

uniapp常用接口

uni.showToast({
  title: '操作成功',
  icon: 'success'
});

支付功能

uni.requestPayment调用支付接口:

uni.requestPayment({
  provider: 'wxpay',
  orderInfo: '...',
  success: (res) => console.log(res)
});

文件操作

uni.uploadFile实现文件上传:

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: tempFilePath,
  name: 'file'
});

导航相关

uni.navigateTo页面跳转:

uni.navigateTo({
  url: '/pages/detail?id=1'
});

扫码功能

uni.scanCode调用扫码接口:

uniapp常用接口

uni.scanCode({
  success: (res) => console.log(res.result)
});

扩展能力接口

蓝牙操作

uni.openBluetoothAdapter初始化蓝牙模块:

uni.openBluetoothAdapter({
  success: (res) => console.log(res)
});

传感器

uni.onAccelerometerChange监听加速度计:

uni.onAccelerometerChange((res) => {
  console.log(res.x, res.y, res.z);
});

全局事件

uni.$onuni.$emit实现跨页面通信:

// 页面A
uni.$emit('update', {data: newData});

// 页面B
uni.$on('update', (data) => console.log(data));

平台专有接口

微信小程序专有

uni.login获取微信登录凭证:

uni.login({
  provider: 'weixin',
  success: (res) => console.log(res.code)
});

APP端专有

uni.getPushClientId获取推送标识:

uni.getPushClientId({
  success: (res) => console.log(res.cid)
});

注意事项

  • 部分接口需要配置manifest.json权限声明
  • 平台差异接口需判断运行环境:
    // #ifdef H5
    console.log('仅在H5平台执行');
    // #endif
  • 异步接口推荐使用Promise封装提高代码可读性

标签: 接口常用
分享给朋友:

相关文章

vue实现接口

vue实现接口

在 Vue 中实现接口请求 Vue 本身不直接提供 HTTP 请求功能,通常需要借助第三方库如 axios 或 fetch 来实现接口请求。以下是几种常见方法: 使用 axios 发送请求 安装 a…

vue3中实现接口轮询

vue3中实现接口轮询

使用 setInterval 实现基础轮询 在 Vue 3 中,可以通过 setInterval 定时调用接口。在组件的 onMounted 钩子中启动轮询,并在 onUnmounted 钩子中清除定…

vue调用后台接口实现

vue调用后台接口实现

Vue 调用后台接口的实现方法 在 Vue 中调用后台接口通常涉及以下几个关键步骤: 安装必要的依赖 确保项目中安装了 axios 或 fetch 等 HTTP 请求库。通过以下命令安装 axios…

elementui常用

elementui常用

Element UI 常用组件 Element UI 是一套基于 Vue.js 的桌面端组件库,提供了丰富的 UI 组件,适用于快速开发企业级中后台产品。以下是 Element UI 中常用的组件及其…

react如何接接口

react如何接接口

React 中接入接口的常见方法 使用 fetch API 发起 HTTP 请求fetch 是浏览器原生支持的 API,无需额外安装库。发起 GET 请求的示例代码如下: fetch('https:…

react公用组件如何请求接口

react公用组件如何请求接口

公用组件请求接口的实现方法 公用组件在React中请求接口需要遵循高内聚、低耦合原则,确保组件可复用且不依赖特定业务逻辑。以下是几种常见实现方式: 使用自定义Hook封装请求逻辑 创建可复用的数据请…