API 调用

Taro API

Taro 提供了统一的 API 调用方式，封装了各端的原生 API，使开发者可以使用相同的代码调用不同平台的 API。

基础 API

网络请求

// 发起网络请求
Taro.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    id: 1
  },
  header: {
    'Content-Type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  },
  fail: function(err) {
    console.log(err)
  }
})

// 上传文件
Taro.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
    user: 'test'
  },
  success: function(res) {
    console.log(res.data)
  }
})

// 下载文件
Taro.downloadFile({
  url: 'https://example.com/file.pdf',
  success: function(res) {
    if (res.statusCode === 200) {
      console.log('下载成功')
    }
  }
})

存储 API

// 存储数据
Taro.setStorage({
  key: 'userInfo',
  data: {
    name: '张三',
    age: 20
  },
  success: function() {
    console.log('存储成功')
  }
})

// 读取数据
Taro.getStorage({
  key: 'userInfo',
  success: function(res) {
    console.log(res.data)
  }
})

// 移除数据
Taro.removeStorage({
  key: 'userInfo',
  success: function() {
    console.log('移除成功')
  }
})

// 清空存储
Taro.clearStorage({
  success: function() {
    console.log('清空成功')
  }
})

设备 API

// 获取设备信息
Taro.getSystemInfo({
  success: function(res) {
    console.log(res)
  }
})

// 获取网络状态
Taro.getNetworkType({
  success: function(res) {
    console.log(res.networkType)
  }
})

// 获取位置信息
Taro.getLocation({
  type: 'wgs84',
  success: function(res) {
    console.log(res.latitude, res.longitude)
  }
})

界面 API

// 显示 Toast
Taro.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
})

// 显示 Loading
Taro.showLoading({
  title: '加载中',
  mask: true
})

// 隐藏 Loading
Taro.hideLoading()

// 显示模态框
Taro.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

// 显示操作菜单
Taro.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'],
  success: function(res) {
    console.log(res.tapIndex)
  }
})

路由 API

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

// 重定向到新页面
Taro.redirectTo({
  url: '/pages/login/index'
})

// 返回到上一页
Taro.navigateBack({
  delta: 1
})

// 跳转到 Tab 页面
Taro.switchTab({
  url: '/pages/home/index'
})

// 关闭所有页面，跳转到新页面
Taro.reLaunch({
  url: '/pages/index/index'
})

事件 API

// 监听网络状态变化
Taro.onNetworkStatusChange(function(res) {
  console.log(res.isConnected)
  console.log(res.networkType)
})

// 监听页面滚动
Taro.onPageScroll(function(res) {
  console.log(res.scrollTop)
})

// 监听页面加载
Taro.onLoad(function(option) {
  console.log(option)
})

// 监听页面显示
Taro.onShow(function() {
  console.log('页面显示')
})

// 监听页面隐藏
Taro.onHide(function() {
  console.log('页面隐藏')
})

// 监听页面卸载
Taro.onUnload(function() {
  console.log('页面卸载')
})

API 调用注意事项

1. 异步调用：Taro API 大多是异步调用，需要使用回调函数或 Promise 处理结果
2. 平台差异：不同平台的 API 可能存在差异，需要注意兼容处理
3. 权限申请：某些 API 需要用户授权，如位置、相机等
4. 错误处理：需要处理 API 调用失败的情况
5. 性能优化：避免频繁调用 API，合理使用缓存

API 封装

为了提高代码的可维护性和复用性，可以对常用的 API 进行封装：

// api/index.js
import Taro from '@tarojs/taro'

const baseURL = 'https://api.example.com'

export const request = (options) => {
  return new Promise((resolve, reject) => {
    Taro.request({
      url: baseURL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...options.header
      },
      success: function(res) {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export const get = (url, data) => {
  return request({ url, method: 'GET', data })
}

export const post = (url, data) => {
  return request({ url, method: 'POST', data })
}

export const put = (url, data) => {
  return request({ url, method: 'PUT', data })
}

export const del = (url, data) => {
  return request({ url, method: 'DELETE', data })
}

第三方 API

除了 Taro 提供的 API，还可以使用第三方 API：

1. 微信小程序 API：在微信小程序端可以直接调用微信提供的 API
2. 支付宝小程序 API：在支付宝小程序端可以直接调用支付宝提供的 API
3. 百度小程序 API：在百度小程序端可以直接调用百度提供的 API
4. 字节跳动小程序 API：在字节跳动小程序端可以直接调用字节跳动提供的 API

API 调试

使用 Taro DevTools

Taro 提供了 DevTools 工具，可以在开发过程中调试 API 调用：

1. 网络请求调试：查看网络请求的详细信息
2. 存储调试：查看和修改存储数据
3. 界面调试：查看和修改界面元素
4. 性能调试：分析 API 调用的性能

使用 console 调试

在开发过程中，可以使用 console.log() 来调试 API 调用：

Taro.request({
  url: 'https://api.example.com/data',
  success: function(res) {
    console.log('请求成功:', res)
  },
  fail: function(err) {
    console.log('请求失败:', err)
  }
})

API 最佳实践

1. 统一封装：对常用 API 进行统一封装，提高代码复用率
2. 错误处理：统一处理 API 调用失败的情况
3. 请求拦截：添加请求拦截器，处理认证、日志等
4. 响应拦截：添加响应拦截器，处理统一的错误码
5. 性能优化：合理使用缓存，减少重复请求
6. 安全处理：注意 API 调用的安全性，避免泄露敏感信息