当前位置:首页 > 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 中实现接口调用通常使用 axios 或 fetch 等 HTTP 客户端库。以下是常见的实现方式: 安装 axios 通过 npm 或 yarn 安装 ax…

vue怎么实现接口

vue怎么实现接口

Vue 实现接口请求的方法 Vue 中实现接口请求通常使用 axios 或 fetch,以下是具体实现方式。 使用 axios 发送请求 安装 axios: npm install axios 在…

vue常用功能实现

vue常用功能实现

数据绑定与响应式更新 Vue 通过 v-model 实现表单元素与数据的双向绑定,修改数据会自动更新视图。响应式系统基于 Object.defineProperty(Vue 2)或 Proxy(Vue…

vue实现登录调用接口

vue实现登录调用接口

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

vue实现按需调用接口

vue实现按需调用接口

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

vue接口实现导出

vue接口实现导出

Vue 接口实现导出功能 在 Vue 项目中实现导出功能通常涉及前端调用后端接口获取数据,并以文件形式下载。以下是几种常见的实现方式: 通过 Blob 对象下载文件 当后端返回文件流时,前端可通过…