HBuilderX（uni-app）搭建小程序流程（请求封装，下拉刷新，底部加载等）

uni-app 是一个跨平台的前端框架，用于开发多端应用。uni-app 提供了一个统一的 API，允许开发者编写一次代码，最终部署到多个平台，极大地提高了开发效率。在编写小程序的时候和原生微信开发者工具语法略有区别。

目录

一、请求工具封装

二、点击跳转页面报错MiniProgramError{"errMsg":"navigateTo:fail timeout"}

三、滚动底部发请求和下拉刷新

四、接收路由参数 

五、引入vant3

---

一、请求工具封装

网络请求官网： 

网络请求：   uni.request(OBJECT) | uni-app官网

在 uni-app 中进行网络请求时，可以通过封装请求工具来简化和统一请求的逻辑。封装后的请求工具可以处理常见的请求配置、错误处理、响应数据处理等，使得网络请求的管理更加清晰和高效。

1、不封装的请求示例

uni.request({
    url: 'https://www.example.com/request',  // 目标 URL 地址
    data: {
        text: 'uni.request'  // 请求发送的数据（可以是 GET 请求的查询参数，或 POST 请求的请求体）
    },
    header: {
        'custom-header': 'hello'  // 自定义请求头，向服务器发送附加的头部信息
    },
    success: (res) => {
        console.log(res.data);  // 请求成功时，打印服务器响应的数据
        this.text = 'request success';  // 更新组件的文本内容为 'request success'
    }
});

• url：请求的目标地址。https://www.example.com/request 是一个示例 URL，表示请求发送到 https://www.example.com/request 这个接口。这个地址是服务器上公开的接口，uni.request 会向该地址发送 HTTP 请求。

• data：请求中发送的数据。在这个例子中，data: { text: 'uni.request' } 表示发送一个包含字段 text 和值 'uni.request' 的对象。

  • 如果是 GET 请求，data 会被编码为查询字符串，如 ?text=uni.request。
  • 如果是 POST 请求，data 会作为请求体发送。

• header：请求头部信息。在这个例子中，设置了一个自定义请求头 'custom-header': 'hello'，它将作为请求的一个头部传递给服务器。这通常用于身份验证、内容类型设置等场景。

• success：这是请求成功后的回调函数。在请求成功并收到服务器响应后，会执行 success 函数。

  • res 是返回的响应对象，包含了服务器返回的数据。
  • console.log(res.data)：打印服务器响应的数据，通常是 JSON 格式的数据。
  • this.text = 'request success'：这行代码将组件的 text 属性更新为 'request success'，通常会用于更新页面显示的内容（例如，页面上的文本会显示为 'request success'）。

2、在文件结构中新建

3、请求工具封装

在src/utils/api/api.js中：

// src/utils/api.js

const baseURL = "http://localhost:8082/api";  // 确保你的基础 URL 正确

// 请求封装函数
const request = (url, method = 'GET', data = {}) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method: method,
      data: data,
      success(res) {
        if (res.statusCode === 200) {
          resolve(res.data);  // 返回数据
        } else {
          reject(res);  // 如果不是 200，返回错误信息
        }
      },
      fail(err) {
        reject(err);  // 请求失败时
      }
    })
  });
};

export { request };

4、请求工具封装优化（可选）

// src/utils/api.js

const baseURL = "http://localhost:8082/api";  // 确保你的基础 URL 正确

// 请求封装函数
const request = (url, method = 'GET', data = {}, showLoading = true) => {
  // 请求拦截器：可以在这里添加请求头、token等信息
  const token = uni.getStorageSync('token'); // 假设你存储了token
  const headers = {
    'Authorization': token ? `Bearer ${token}` : '', // 如果有token，自动添加到请求头
    'Content-Type': 'application/json'  // 默认发送 JSON 格式的数据
  };

  // 在请求开始时，显示加载中（如果需要）
  if (showLoading) {
    uni.showLoading({
      title: '加载中...',
      mask: true
    });
  }

  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method: method,
      data: data,
      header