网络数据请求

在微信小程序开发中，网络请求是最常见的操作之一。无论是从服务器获取数据，还是向服务器提交数据，微信小程序都为开发者提供了非常便捷的 API，如 wx.request() 方法来处理 HTTP 请求。小程序的网络请求有一些独特的限制，了解并掌握这些限制和技巧，可以帮助开发者更好地实现网络通信功能。

1. 小程序中网络数据请求的限制

微信小程序的网络请求有以下几个方面的限制，这些限制主要是出于安全考虑：

• 域名限制：小程序的网络请求只能向已经备案且在微信小程序后台配置过的合法域名发起。这意味着，只有在微信小程序后台配置的域名才能进行数据交互。
• HTTPS 请求：小程序的网络请求必须使用 HTTPS 协议，这要求所有的服务器都支持 HTTPS，并且证书必须有效。
• 请求次数限制：微信小程序对并发请求的数量有限制，通常最多允许同时发起 10 个并发请求。
• 请求数据大小限制：小程序中 GET 请求传输的数据大小是有限制的（最大 2048 字节），而 POST 请求数据的大小限制为 10MB。

这些限制是为了确保小程序的数据交互安全，避免潜在的安全威胁。

下图展示了小程序网络请求的限制：

2. 配置 request 合法域名

为了确保微信小程序的网络请求是合法且安全的，所有的网络请求必须发送到经过备案的合法域名。因此，在开发过程中，开发者必须在微信小程序的管理后台配置合法域名。

2.1 配置合法域名的步骤

1. 进入微信公众平台：使用小程序开发者账号登录微信公众平台。
2. 选择小程序：在首页选择你需要配置的微信小程序。
3. 进入开发设置：点击“开发设置”选项，进入服务器域名配置页面。
4. 配置服务器域名：在“服务器域名”部分，点击“修改”，添加需要使用的合法域名。所有请求都必须通过这些域名发出。
5. 保存配置：填写完成后，点击保存。

配置完成后，小程序中的 wx.request() 方法将能够正常访问这些域名上的接口。

注意：开发阶段时可以跳过域名校验，但正式上线时必须配置好合法域名。

下图展示了配置 request 合法域名的界面：

3. 发起 GET 请求

在微信小程序中，使用 wx.request() 方法可以发起 GET 请求。GET 请求是最常见的 HTTP 请求类型，通常用于从服务器获取数据。

3.1 使用 wx.request() 发送 GET 请求

以下是一个典型的 GET 请求示例代码：

wx.request({
  url: 'https://example.com/api/data', // 接口地址
  method: 'GET', // 请求方式
  success: function (res) {
    // 请求成功时执行的回调函数
    console.log(res.data); // 输出服务器返回的数据
  },
  fail: function (err) {
    // 请求失败时执行的回调函数
    console.log(err); // 输出错误信息
  }
});

• url：请求的接口地址，必须是合法的 HTTPS 地址。
• method：请求方式，这里指定为 GET。
• success：请求成功时的回调函数，res 包含了服务器返回的响应数据。
• fail：请求失败时的回调函数，用来处理错误。

注意：微信小程序中的所有网络请求都必须使用 HTTPS 协议，如果服务器不支持 HTTPS，网络请求将无法成功发出。

下图展示了 GET 请求的代码示例：

4. 发起 POST 请求

POST 请求通常用于将数据发送到服务器。它与 GET 请求的区别在于，POST 请求会将数据包含在请求的主体（body）中，而不是通过 URL 传递。小程序同样使用 wx.request() 来发起 POST 请求。

4.1 使用 wx.request() 发送 POST 请求

以下是一个发起 POST 请求的示例代码：

wx.request({
  url: 'https://example.com/api/submit', // 接口地址
  method: 'POST', // 请求方式
  data: {
    name: 'John',
    age: 30
  }, // 提交的数据
  header: {
    'content-type': 'application/json' // 设置请求头
  },
  success: function (res) {
    console.log(res.data); // 请求成功后输出返回的数据
  },
  fail: function (err) {
    console.log(err); // 请求失败时输出错误信息
  }
});

• data：传递给服务器的数据，这里可以是 JSON、表单数据等。它将包含在请求的 body 中。
• header：可以设置请求的 HTTP 头部信息。常见的头部信息是 content-type，指定传输的数据格式，如 application/json 或 application/x-www-form-urlencoded。
• success：请求成功时执行的回调函数，res 包含服务器的返回数据。

POST 请求通常用于向服务器发送复杂的数据，如表单数据或 JSON 数据。相比 GET 请求，POST 请求没有数据大小限制，因此适合传输大量数据。

下图展示了 POST 请求的代码示例：

5. 在页面刚加载时请求数据

在很多小程序中，页面加载时自动请求数据是一个常见的需求。为了实现这一功能，我们可以在页面的 onLoad 生命周期函数中调用 wx.request() 方法进行数据请求。onLoad 是页面加载时自动执行的生命周期函数，因此可以在此函数中发起网络请求，初始化页面数据。

5.1 页面加载时请求数据的实现

以下是一个在页面加载时请求数据的示例代码：

Page({
  onLoad: function () {
    // 页面加载时调用的函数
    this.getData(); // 调用自定义的获取数据函数
  },
  getData: function () {
    // 自定义的函数，用于获取数据
    wx.request({
      url: 'https://example.com/api/data', // 接口地址
      method: 'GET',
      success: function (res) {
        console.log(res.data); // 输出返回的数据
      },
      fail: function (err) {
        console.log(err); // 输出错误信息
      }
    });
  }
});

• onLoad：页面加载时触发，该函数会自动调用 getData 函数，发起网络请求。
• getData：自定义的函数，负责发送 GET 请求获取数据。

这种方式非常常见，适用于需要在页面初始时加载远程数据的场景，例如加载用户的基本信息或初始化列表内容。

下图展示了页面加载时请求数据的代码示例：

6. 暂时跳过 request 合法域名校验

在开发阶段，有时我们还没有正式配置好合法域名，但仍然需要测试接口请求。此时可以通过微信开发者工具暂时跳过合法域名的校验。虽然这在开发阶段是允许的，但正式上线时必须配置合法域名。

6.1 在开发者工具中跳过合法域名校验

1. 打开微信开发者工具。
2. 点击项目设置。
3. 找到“不校验合法域名、web-view（业务域名）、TLS 版本及 HTTPS”选项，并勾选该选项。

注意：该操作只在开发者工具中有效，且仅用于开发调试阶段。发布上线时，这一功能必须禁用，且需要确保配置了合法的域名。

下图展示了如何跳过合法域名校验：

7. 关于跨域和 Ajax 的说明

微信小程序的网络请求并不受传统浏览器的跨域限制，因为小程序的网络请求是通过微信的安全沙箱进行的。微信小程序中的 wx.request() 方法与浏览器中的 Ajax 功能类似，但不需要担心跨域问题。

• 跨域问题：在浏览器中，跨域请求是指客户端向与当前页面不同

域名的服务器发出请求，通常会受到浏览器的同源策略限制。而在微信小程序中，由于小程序的网络请求在微信的沙箱内执行，跨域问题并不存在。

• HTTPS 要求：虽然跨域问题不存在，但小程序要求所有请求必须通过 HTTPS 协议进行，以确保数据传输的安全性。

下图展示了跨域和 Ajax 的说明：

总结

微信小程序提供了强大的网络请求功能，开发者可以通过 wx.request() 方法实现 GET、POST 等多种请求类型，用于与服务器进行数据交互。在开发过程中，必须确保所有请求的域名已在小程序后台配置，并且使用 HTTPS 协议。通过页面生命周期函数 onLoad，可以在页面加载时自动请求数据，为用户展示动态的内容。在开发阶段，开发者还可以跳过域名校验功能进行调试，但上线时必须配置合法域名。