当前位置:首页 > 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封装提高代码可读性

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

相关文章

vue3中实现接口轮询

vue3中实现接口轮询

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

vue实现接口配置

vue实现接口配置

Vue 中实现接口配置的方法 在 Vue 项目中配置接口通常涉及以下几个关键步骤: 创建 API 配置文件 新建一个 api 目录,创建 index.js 文件作为接口配置入口。可以将接口按模块分类…

java实现vue接口

java实现vue接口

Java 实现 Vue 接口的方法 在 Java 中实现 Vue 前端调用的接口,通常需要使用 Spring Boot 框架构建 RESTful API。以下是具体的实现步骤和代码示例。 创建 S…

vue实现登录调用接口

vue实现登录调用接口

Vue 登录接口调用实现 安装 axios 在项目中安装 axios 用于发送 HTTP 请求: npm install axios 创建 API 服务文件 在 src 目录下创建 api/auth…

vue实现按需调用接口

vue实现按需调用接口

Vue 中按需调用接口的实现方法 在 Vue 项目中按需调用接口可以优化性能,避免不必要的网络请求。以下是几种常见实现方式: 使用计算属性触发接口调用 通过计算属性监听数据变化,在需要时调用接口:…

react公用组件如何请求接口

react公用组件如何请求接口

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