当前位置:首页 > uni-app

uniapp常用接口

2026-02-06 04:42:10uni-app

uniapp常用接口分类

uniapp作为跨平台开发框架,提供了丰富的API接口,涵盖基础功能、设备能力、界面交互等。以下分类整理常用接口:

基础接口

  • uni.request:发起网络请求,支持Promise和回调两种方式。
  • uni.uploadFile:上传文件至服务器。
  • uni.downloadFile:下载文件资源到本地。
  • uni.setStorage/uni.getStorage:本地数据缓存操作。

界面交互

  • uni.showToast:显示消息提示框,支持图标和持续时间设置。
  • uni.showModal:弹出模态对话框,含确认和取消按钮。
  • uni.showLoading:显示加载提示框,需手动调用hideLoading关闭。
  • uni.navigateTo:保留当前页面,跳转到应用内某个页面。

设备相关

  • uni.getSystemInfo:获取设备系统信息,如屏幕宽高、操作系统版本。
  • uni.scanCode:调起扫码功能,支持条形码和二维码。
  • uni.makePhoneCall:拨打电话。
  • uni.getLocation:获取当前位置信息,支持GPS和网络定位。

媒体操作

  • uni.chooseImage:从相册或相机选择图片。
  • uni.previewImage:预览图片列表,支持滑动查看。
  • uni.saveImageToPhotosAlbum:保存图片到系统相册。
  • uni.startRecord/uni.stopRecord:录音功能控制。

数据存储

  • uni.setStorageSync/uni.getStorageSync:同步方式读写本地缓存。
  • uni.removeStorage:删除指定key的缓存数据。
  • uni.clearStorage:清理所有本地缓存。

支付与分享

  • uni.requestPayment:调起客户端支付(微信、支付宝等)。
  • uni.share:调用原生分享组件,支持图文内容分享。

注意事项

  1. 部分接口如支付、扫码需在真机调试,模拟器可能无法正常调用。
  2. 权限相关接口(如定位、相机)需在manifest.json中配置权限声明。
  3. 网络请求接口需注意域名白名单配置,避免跨域问题。

代码示例

网络请求封装示例:

uni.request({
  url: 'https://example.com/api',
  method: 'POST',
  data: { key: 'value' },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

图片选择示例:

uniapp常用接口

uni.chooseImage({
  count: 3,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    // 处理选中的图片路径
  }
});

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

相关文章

vue 实现接口调用

vue 实现接口调用

使用 Axios 进行接口调用 安装 Axios 依赖: npm install axios 在 Vue 组件中引入并使用: import axios from 'axios'; export…

vue实现登录调用接口

vue实现登录调用接口

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

如何实现vue数据接口

如何实现vue数据接口

实现Vue数据接口的方法 在Vue中实现数据接口通常涉及与后端API的交互,可以通过多种方式完成。以下是几种常见的方法: 使用axios发送HTTP请求 axios是一个流行的HTTP客户端,适用…

react如何接接口

react如何接接口

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

react共用组件如何请求接口

react共用组件如何请求接口

在React中实现共用组件的接口请求 共用组件的接口请求需要结合组件的复用性和数据独立性进行设计。以下是几种常见方法: 通过props传递数据 父组件负责获取数据并通过props传递给共用组件:…

react如何在model层写函数调接口

react如何在model层写函数调接口

React 中 Model 层函数调用接口的实现 在 React 应用中,Model 层通常负责数据管理和接口调用。可以通过以下方式组织代码: 创建独立的 API 服务模块 将接口调用封装在单独的…