uniapp学习笔记

moyuqaq0303

已于 2024-06-16 20:19:54 修改

阅读量393

点赞数 5

文章标签：前端学习

于 2024-06-16 20:02:27 首次发布

本文链接：https://blog.csdn.net/moyuqaq0303/article/details/139725226

版权

uni.request基本用法

uni.request({
  url: 'https://your-api-url.com/data', // 必填，请求的url
  method: 'GET', // 默认为GET，请求方法
  data: { // 请求的参数
    key: 'value'
  },
  header: { // 设置请求的header
    'content-type': 'application/json' // 默认值
  },
  success: (res) => {
    console.log('请求成功', res.data);
  },
  fail: (err) => {
    console.log('请求失败', err);
  },
  complete: () => {
    console.log('请求完成');
  }
});

2.2 配置说明

url: 请求的地址。
method: 请求方法，如'GET', 'POST'等。
data: 请求的参数，格式根据content-type决定。
header: 设置请求的头信息。
success: 请求成功的回调函数。
fail: 请求失败的回调函数。
complete: 不管成功还是失败，都会执行的回调函数。

uniapp.request(object)参数说明

url (string): 必填参数，表示请求的URL地址。
method (string, 默认: 'GET'): 请求方法，如 'GET', 'POST', 'PUT', 'DELETE' 等。
data (Object | String): 请求的参数，如果是GET请求则会转换为query字符串追加到URL上；如果是POST请求等，则作为请求体发送。类型取决于content-type设置。
header (Object): 设置请求的头部信息，如{'content-type': 'application/json'}。
dataType (string, 默认: 'json'): 预期服务器返回的数据类型。合法值：'json', 'text'。
responseType (string, 默认: 'text'): 设置响应的数据类型。合法值：'text', 'arraybuffer'。
success (Function): 请求成功后的回调函数，参数为一个对象，包含服务器返回的数据。
fail (Function): 请求失败的回调函数，参数为一个对象，包含错误信息。
complete (Function): 不管成功还是失败，都会执行的回调函数，参数为一个对象，包含请求的响应信息。

使用uni.request需要注意以下几点。
1.在各小程序平台运行时，网络相关的API在使用前需要配置域名白名单。
2.请求的header中，content-type默认为application/json。
3.应避免在header中使用中文，或使用encodeURIComponent进行编码，否则百度小程序中将会
4.网络请求的超时时间，可以统一在项目manifest.json文件中配置networkTimeout属性。
5.H5端本地调试需注意跨域问题。
6.由于百度小程序iOS客户端请求失败时会进入fail回调，需要针对百度小程序增加相应的处理，以
解决该问题。
7.小程序端不支持自动保持cookie，服务器应避免验证cookie。
8.H5端cookie受跨域限制（和平时开发网站一样)，旧版的uni.request未支持withCredentials配置,
可以直接使用xhr对象或其他类库。
9.根据W3C规范，H5端无法获取response header中的Set-Cookie、Set-Cookie2两个字段，对于跨域
请求，允许获取的response header字段只限于simple response header和Access-Control-Expose-Headerso

10.低版本（Android 8.0和iOS 12.1之前的版本）手机自身不支持IPv6，如果服务器仅允许IPv6，会导致低版本手机的应用无法正常运行或访问速度非常慢。
11.localhost、127.0.0.1等服务器地址只能在PC端运行，手机端连接时不能访问。应使用标准IP并保证手机能连接计算机网络。
12.debug模式中Android端暂时无法获取响应头，URI中含有非法字符（如未编码为%20的空格）时请求会失败。
13.iOS端App第一次安装启动后，会弹出是否允许联网的询问框，在用户点击同意前，调用联网API会失败，应注意判断这种情况。例如，官方提供的新闻模板示例（HBuilderX新建项目可选择）会判断如果无法联网，则提供一个错误页，提示用户设置网络及下拉刷新重试。
14.具有良好体验的App，还会判断当前是否处于飞行模式、网络是Wi-Fi还是移动网络。
15.部分Android设备，真机运行或debug模式下的网速比release模式低很多。
16.使用一些比较小众的证书机构（如CFCA OV OCA）签发的SSL证书在Android设备的网络请求会失败，因为这些机构的根证书不在系统内置根证书库中，可以更换其他常见机构签发的证书（如Let's Encrypt)，或配置sslVerify为false，关闭SSL证书验证。
回单次网络请求数据量建议控制在50KB以下（仅指json数据，不含图片），数据过多时应分页获取，

uni.uploadFile基本用法

uni.uploadFile({
  url: 'https://your-server.com/upload', // 必填，上传文件的服务器地址
  filePath: '本地文件路径', // 必填，要上传的文件路径
  name: 'file', // 服务器接收文件的字段名，默认为file
  formData: { // HTTP 请求中其他额外的 form-data 参数
    user: 'test'
  },
  header: { // 设置请求的 header
    'content-type': 'multipart/form-data' // 默认值
  },
  success: (res) => {
    console.log('上传成功', res.data);
  },
  fail: (err) => {
    console.log('上传失败', err);
  },
  complete: () => {
    console.log('上传完成');
  }
});

（1）App平台支持多文件上传，微信小程序只支持单文件上传，上传多个文件需要反复调用图片上传
API，因此跨端的写法就是循环调用图片上传API。
（2)hello uni-app中的客服反馈支持多图上传。uni-app插件市场中也有多个封装的组件。
（3）App平台选择和上传非图像、视频文件的相关教程可参考“资源文件\网址索引.docx”中的链接。
（4）网络请求的超时时间可以统一在manifest.json文件中配置networkTimeout属性。
（5）支付宝小程序开发者工具上传文件返回的http状态码为字符串形式，支付宝小程序真机返回的状
态码为数字形式。

uploadTask对象

1. abort()

作用: 用于取消当前的上传任务。当调用此方法后，正在进行的上传将会被终止，相关的网络活动和资源占用也将被释放。

2. onProgressUpdate(callback)

作用: 注册一个监听函数，用于接收上传进度更新的事件。当文件上传过程中进度发生变化时，会触发此回调

let uploadTask = uni.uploadFile({
  url: 'https://your-server.com/upload',
  filePath: '本地文件路径',
  name: 'file',
  formData: {
    user: 'username'
  },
  success: (res) => {
    console.log('上传成功', res.data);
  },
  fail: (err) => {
    console.error('上传失败', err);
  }
});

// 监听上传进度
uploadTask.onProgressUpdate((res) => {
  console.log('上传进度：' + res.progress + '%');
  console.log('已上传字节数：' + res.totalBytesSent);
  console.log('总字节数：' + res.totalBytesExpectedToSend);
});

// 取消上传
// uploadTask.abort();

uni.downloadFile基础使用

uni.downloadFile({
  url: 'http://example.com/path/to/file', // 必填，下载文件的URL
  header: { // 可选，设置请求的header
    'content-type': 'application/octet-stream'
  },
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功，临时路径为：', res.tempFilePath);
      // 可以进一步处理文件，如保存到相册、打开等
    } else {
      console.error('下载失败，状态码：', res.statusCode);
    }
  },
  fail: (err) => {
    console.error('下载失败', err);
  },
  progress: (event) => {
    console.log('下载进度', event.progress);
  }
});

`uni.`downloadTask方法

1. abort()

作用: 用于取消当前的下载任务。当调用此方法后，正在进行的下载将会被中断，相关资源也会被释放。

2. onProgressUpdate(callback)

作用: 注册一个监听函数，用于接收下载进度更新的事件。当下载过程中文件的下载进度发生变化时，会触发此回调。
- 参数:
  - callback: 回调函数，接收一个对象作为参数，该对象通常包含以下属性：
    - progress: 当前下载进度百分比，取值范围为0到100。
    - totalBytesWritten: 已经下载的文件大小，单位为字节。
    - totalBytesExpectedToWrite: 预期下载的总文件大小，单位为字节。

let downloadTask = uni.downloadFile({
  url: 'http://example.com/file.zip',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功，临时路径为：', res.tempFilePath);
    }
  },
  fail: (err) => {
    console.error('下载失败', err);
  }
});

// 监听下载进度
downloadTask.onProgressUpdate((res) => {
  console.log('下载进度：' + res.progress + '%');
  console.log('已下载字节数：' + res.totalBytesWritten);
  console.log('预期总字节数：' + res.totalBytesExpectedToWrite);
});

// 可以在适当的时候取消下载
// downloadTask.abort();