Uni-App API 开发指南：构建跨平台应用

Uni-App API 开发指南：构建跨平台应用

Uni-App 提供丰富的 API，使开发者能够轻松构建跨平台应用，实现各种功能。本文将详细介绍 Uni-App 的多媒体 API、设备 API、支付 API、地图 API 以及其他 API 的使用方法，并提供丰富的示例代码，帮助您快速上手。

一、多媒体 API

Uni-App 提供丰富的多媒体 API，方便开发者处理图像、视频、音频等多媒体资源。

1.1 图片处理

• **uni.chooseImage：**选择本地图片。

uni.chooseImage({
  count: 1, // 选择图片数量
  sizeType: ['original', 'compressed'], // 可选图片尺寸
  sourceType: ['album', 'camera'], // 可选图片来源
  success: (res) => {
    console.log(res.tempFilePaths[0]); // 图片本地路径
  }
});

• **uni.getImageInfo：**获取图片信息。

uni.getImageInfo({
  src: 'https://www.example.com/image.jpg',
  success: (res) => {
    console.log(res.width, res.height); // 图片宽高
  }
});

• **uni.compressImage：**压缩图片。

uni.compressImage({
  src: 'https://www.example.com/image.jpg',
  quality: 50, // 压缩质量（0-100）
  success: (res) => {
    console.log(res.tempFilePath); // 压缩后的图片路径
  }
});

1.2 视频处理

• **uni.chooseVideo：**选择本地视频。

uni.chooseVideo({
  sourceType: ['album', 'camera'], // 可选视频来源
  maxDuration: 60, // 最长视频时长（秒）
  success: (res) => {
    console.log(res.tempFilePath); // 视频本地路径
  }
});

• **uni.getVideoInfo：**获取视频信息。

uni.getVideoInfo({
  src: 'https://www.example.com/video.mp4',
  success: (res) => {
    console.log(res.duration); // 视频时长
  }
});

• **uni.playBackgroundAudio：**播放背景音频。

uni.playBackgroundAudio({
  dataUrl: 'https://www.example.com/audio.mp3',
  title: '背景音乐',
  coverImgUrl: 'https://www.example.com/cover.jpg',
});

1.3 音频处理

• **uni.chooseVoice：**选择本地音频。

uni.chooseVoice({
  sourceType: ['album', 'camera'], // 可选音频来源
  success: (res) => {
    console.log(res.tempFilePath); // 音频本地路径
  }
});

• **uni.getRecorderManager：**获取录音管理器。

const recorderManager = uni.getRecorderManager();
recorderManager.onStart(() => {
  console.log('录音开始');
});
recorderManager.onPause(() => {
  console.log('录音暂停');
});
recorderManager.onStop((res) => {
  console.log(res.tempFilePath); // 录音保存路径
});
recorderManager.start({
  duration: 60000, // 录音时长
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 声道数
});

二、设备 API

Uni-App 提供一系列 API，方便开发者获取设备信息、操作设备功能。

2.1 设备信息

• **uni.getSystemInfo：**获取系统信息。

uni.getSystemInfo({
  success: (res) => {
    console.log(res.model, res.system, res.version); // 设备型号、系统、版本
  }
});

• **uni.getNetworkType：**获取网络类型。

uni.getNetworkType({
  success: (res) => {
    console.log(res.networkType); // 网络类型，如 wifi、2g、3g、4g
  }
});

2.2 设备功能

• **uni.setClipboardData：**设置剪切板内容。

uni.setClipboardData({
  data: 'Hello World!',
  success: () => {
    console.log('设置剪切板成功');
  }
});

• **uni.getClipboardData：**获取剪切板内容。

uni.getClipboardData({
  success: (res) => {
    console.log(res.data); // 剪切板内容
  }
});

• **uni.vibrateLong：**长振动。

uni.vibrateLong();

• **uni.vibrateShort：**短振动。

uni.vibrateShort();

三、支付 API

Uni-App 提供支付 API，方便开发者集成微信支付、支付宝支付等多种支付方式。

3.1 微信支付

• **uni.requestPayment：**发起微信支付请求。

uni.requestPayment({
  provider: 'wxpay', // 支付提供商
  orderInfo: {
    appId: 'wx4f33731c58275165', // 微信支付商户号
    timeStamp: 1580276450, // 时间戳
    nonceStr: '285333525f397783', // 随机字符串
    package: 'prepay_id=wx2019012816110873a28f38a01159705831', // 预支付交易会话标识
    signType: 'MD5', // 签名类型
    paySign: '84711D79905810F45059E330D2483B50', // 签名
  },
  success: (res) => {
    console.log('支付成功', res);
  },
  fail: (err) => {
    console.log('支付失败', err);
  }
});

3.2 支付宝支付

• **uni.requestPayment：**发起支付宝支付请求。

uni.requestPayment({
  provider: 'alipay', // 支付提供商
  orderInfo: {
    appId: '2021000116112633', // 支付宝商户号
    timeStamp: 1580276450, // 时间戳
    nonceStr: '285333525f397783', // 随机字符串
    package: 'prepay_id=wx2019012816110873a28f38a01159705831', // 预支付交易会话标识
    signType: 'RSA', // 签名类型
    paySign: '84711D79905810F45059E330D2483B50', // 签名
  },
  success: (res) => {
    console.log('支付成功', res);
  },
  fail: (err) => {
    console.log('支付失败', err);
  }
});

四、地图 API

Uni-App 集成了腾讯地图 SDK，方便开发者在应用中集成地图功能。

4.1 地图展示

• **uni.createMapContext：**创建地图上下文。

const mapContext = uni.createMapContext('myMap');

• **uni.getMapContext：**获取地图上下文。

const mapContext = uni.getMapContext('myMap');

• **includePoints：**在地图上显示点标记。

mapContext.includePoints({
  points: [{ latitude: 39.90872, longitude: 116.4075 }, { latitude: 39.91872, longitude: 116.4075 }],
  padding: [10, 10, 10, 10],
  success: () => {
    console.log('地图已更新');
  }
});

• **moveToLocation：**移动地图视角。

mapContext.moveToLocation({
  latitude: 39.90872,
  longitude: 116.4075,
  success: () => {
    console.log('地图已移动');
  }
});

4.2 地图操作

• **getCenterLocation：**获取地图中心点坐标。

mapContext.getCenterLocation({
  success: (res) => {
    console.log(res.latitude, res.longitude); // 中心点坐标
  }
});

• **getRegion：**获取地图当前可视区域。

mapContext.getRegion({
  success: (res) => {
    console.log(res.latitude, res.longitude); // 可视区域中心点坐标
    console.log(res.latitudeSpan, res.longitudeSpan); // 可视区域范围
  }
});

• **translateMarker：**移动地图上的点标记。

mapContext.translateMarker({
  markerId: 'markerId',
  latitude: 39.91872,
  longitude: 116.4075,
  success: () => {
    console.log('点标记已移动');
  }
});

五、其他 API

Uni-App 还提供其他 API，例如网络请求 API、文件操作 API、数据存储 API 等。

5.1 网络请求

• **uni.request：**发起网络请求。

uni.request({
  url: 'https://www.example.com/api',
  method: 'GET',
  data: {
    param1: 'value1',
    param2: 'value2',
  },
  success: (res) => {
    console.log(res.data); // 请求数据
  }
});

5.2 文件操作

• **uni.saveFile：**保存文件。

uni.saveFile({
  tempFilePath: 'https://www.example.com/file.txt', // 文件临时路径
  filePath: '/storage/emulated/0/Download/file.txt', // 文件保存路径
  success: () => {
    console.log('文件已保存');
  }
});

• **uni.readFile：**读取文件内容。

uni.readFile({
  filePath: '/storage/emulated/0/Download/file.txt', // 文件路径
  encoding: 'utf8', // 文件编码
  success: (res) => {
    console.log(res.data); // 文件内容
  }
});

5.3 数据存储

• **uni.setStorage：**存储数据。

uni.setStorage({
  key: 'key',
  data: 'value',
  success: () => {
    console.log('数据已存储');
  }
});

• **uni.getStorage：**获取存储数据。

uni.getStorage({
  key: 'key',
  success: (res) => {
    console.log(res.data); // 存储数据
  }
});

六、总结

Uni-App 提供了丰富的 API，涵盖多媒体、设备、支付、地图以及其他功能，方便开发者构建功能丰富的跨平台应用。本文只是对 Uni-App API 的简要介绍，更详细的使用方法请参考官方文档。希望本文能够帮助您快速上手 Uni-App API 开发，创建优秀的跨平台应用。