UniApp 常用 API

UniApp 提供跨平台开发能力，以下是核心 API 分类及示例代码：

---

一、网络请求

API： uni.request

// GET 请求示例
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log('响应数据:', res.data)
  },
  fail: (err) => {
    console.error('请求失败:', err)
  }
})

// POST 请求示例
uni.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: { name: '张三', age: 25 },
  header: { 'Content-Type': 'application/json' }
})

---

二、数据存储

API： uni.setStorage / uni.getStorage

// 存储数据
uni.setStorage({
  key: 'userInfo',
  data: { token: 'abcd1234', userId: 1001 },
  success: () => console.log('存储成功')
})

// 读取数据
uni.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log('用户信息:', res.data)
  }
})

---

三、媒体操作

1. 图片选择： uni.chooseImage

uni.chooseImage({
  count: 3,  // 最多选择3张
  success: (res) => {
    const tempFiles = res.tempFilePaths
    console.log('选择的图片:', tempFiles)
  }
})

2. 拍照： uni.chooseImage + 相机模式

uni.chooseImage({
  sourceType: ['camera'],  // 仅使用相机
  sizeType: ['compressed'] // 压缩图片
})

---

四、位置服务

1. 获取位置： uni.getLocation

uni.getLocation({
  type: 'wgs84',
  success: (res) => {
    console.log(`纬度: ${res.latitude}, 经度: ${res.longitude}`)
  }
})

2. 地图导航： uni.openLocation

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.397470,
  name: '天安门广场'
})

---

五、设备信息

API： uni.getSystemInfo

uni.getSystemInfo({
  success: (res) => {
    console.log('设备型号:', res.model)
    console.log('系统版本:', res.system)
    console.log('屏幕宽度:', res.screenWidth)
  }
})

---

六、界面交互

1. 消息提示： uni.showToast

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

2. 模态弹窗： uni.showModal

uni.showModal({
  title: '确认删除',
  content: '确定删除该文件吗？',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

---

七、导航跳转

1. 页面跳转： uni.navigateTo

// 跳转到新页面
uni.navigateTo({
  url: '/pages/detail?id=100'
})

// 返回上一页
uni.navigateBack()

2. Tab 切换： uni.switchTab

uni.switchTab({
  url: '/pages/home/index'
})

---

八、文件操作

API： uni.uploadFile

uni.chooseImage({
  success: (res) => {
    const filePath = res.tempFilePaths[0]
    uni.uploadFile({
      url: 'https://upload.example.com',
      filePath: filePath,
      name: 'avatar',
      success: (uploadRes) => {
        console.log('上传成功:', uploadRes.data)
      }
    })
  }
})

---

关键注意事项：

1. 权限配置：部分 API 需在 manifest.json 声明权限
2. 平台差异：H5/小程序/App 的 API 支持度不同，需测试兼容性
3. 异步处理：推荐使用 async/await 封装异步操作

async function fetchData() {
  try {
    const [res] = await uni.request({ url: 'https://api.example.com' })
    return res.data
  } catch (e) {
    console.error(e)
  }
}