微信小程序开发-网络请求

HTTP请求是客户端向服务器发送的请求消息，用于获取或操作服务器上的资源。微信小程序提供了一个名为wx.request的API函数，用于发起HTTPS网络请求。

A-李碧豪

2177人浏览 · 2024-05-18 14:10:13

A-李碧豪 · 2024-05-18 14:10:13 发布

简介：

🐤HTTP请求是客户端向服务器发送的请求消息，用于获取或操作服务器上的资源。

以下是HTTP请求的主要组成部分：

请求行（Request Line）：包含请求方法（如GET、POST）、请求资源的路径以及HTTP协议版本。请求方法是对资源的操作类型，如GET用于获取资源，POST用于提交数据。
请求头（Headers）：提供客户端和请求的相关信息，如User-Agent（用户代理）、Accept（可接受的内容类型）、Content-Type（内容类型）等。这些信息可以帮助服务器更好地处理请求。
请求体（Body）：在请求一些需要传输数据的操作（如POST）时，请求体中会包含要发送给服务器的数据。并非所有HTTP请求都包含请求体，比如GET请求通常不包含请求体。

🐤HTTP协议定义了多种请求方法，每种方法都有其特定的用途和特点。以下是一些常见的HTTP请求方法及其简要描述：

GET：用于请求服务器发送指定资源。这是最常见的请求方法，通常用于获取网页内容或查询数据。
POST：用于向服务器提交数据，通常会导致服务器状态的改变或产生副作用。例如，用户登录信息或者上传文件通常会使用POST方法。
PUT：用于更新服务器上的资源。如果资源不存在，服务器应该创建它。
DELETE：用于删除服务器上的资源。
PATCH：用于对资源进行部分更新，与PUT不同，PUT通常是完全替换资源。

案例

关闭域名校验

在开始之前，我们需要先关闭域名校验

为了确保所有小程序在运行时的安全性，微信小程序官方要求所有线上版本的小程序必须使用HTTPS协议进行网络通信，不满足条件的域名和协议将无法发出请求。在本地开发环境中，可以通过关闭项目设置中的TLS安全检测来使用非HTTPS地址进行测试。

如下图，在开发工具的详情->本地设置中，勾选不校验合法域名。

🍀Get请求

微信小程序提供了一个名为wx.request的API函数，用于发起HTTPS网络请求。下面是一个使用wx.request发起GET请求的示例：

首先我们使用后端代码编写一个Get请求的接口，如下该接口，接受一个查询字符串name，接口响应姓名是：name

然后在wxml中定义一个按钮，绑定一个函数。

<button bindtap="getInfo">发一个get请求</button>

接着在js文件中定义我们上边绑定的getInfo函数，在下面代码中，method是请求方法，data即是请求的参数，GET请求时放在URL中，POST请求时放在请求体中。

getInfo() {
    wx.request({
      url: 'http://localhost:5105/api/Test/TestGet',
      method: 'GET',
      data: {
        name:'张三'
      },
      success: (res) => {
        console.log(res.data)
      }
    })
  }

当点击请求，请求成功时，回调函数success会被调用。res 参数是一个对象，包含了服务器返回的数据和其他信息。这里使用箭头函数来简化代码，并输出服务器返回的数据 res.data 到控制台。

🍀Post请求

和上面一样，我们先使用后端代码写一个post请求的接口

然后在wxml中定义一个按钮，绑定post请求的函数。

<button bindtap="postInfo">发一个post请求</button>

在js文件中，与get请求不同的是，我们将method属性指定的HTTP 请求的方法换成了post，在这种情况下，wx.request 会将 data 字段中的对象转换为 JSON 字符串，并作为请求体发送给服务器。

  postInfo() {
    wx.request({
      url: 'http://localhost:5105/api/Test/testpost',
      method: 'post',
      data: {
        name:'李四',
        age:21
      },
      success: (res) => {
        console.log(res.data)
      }
    })
  }

🐳生命周期函数onLoad

小程序的onLoad是一个页面生命周期函数，表示页面加载时会触发该函数，通常用于数据的初始化。

在页面加载时，onLoad函数会被自动调用，并将页面的参数（options）传递给这个函数。options参数是一个包含页面参数的对象，其中的每个属性表示一个页面参数，属性名为参数名，属性值为参数值。这样，你可以在页面加载时获取到页面跳转时传递的参数，例如：

Page({  
  onLoad:function(options) {  
    console.log(options.id); // 输出页面跳转时传递的id参数  
  }  
})

onLoad函数在小程序的生命周期中起到了至关重要的作用，每次打开页面都会执行。在这个函数中，你可以进行数据初始化、网络请求等操作，例如向服务器请求数据、检查用户权限、检查网络连接状态等。同时，你也可以根据入参信息，展示不同的页面。

如下图，我们将刚刚定义的getInfo，postInfo函数都放入onLoad函数中，当我重新编译进入小程序的这个页面中，这两个函数就会被自动执行。

🐳关于跨域问题

在前后端分离的web开发中，我们通常需要解决跨域问题，但是小程序在发送请求时不会出现跨域问题。因为其运行环境和工作机制与基于浏览器的Web开发有所不同。

运行环境：小程序的宿主环境不是浏览器，而是特定的应用平台（如微信、支付宝等）的客户端。这些平台为小程序提供了特定的API和框架，使得小程序能够在其内部进行网络通信和数据交互。
跨域策略：跨域问题主要源于浏览器的同源策略（Same-Origin Policy）。该策略要求一个网页中的脚本只能访问与该网页同源的资源。然而，小程序并不受到这一策略的限制，因为它们并不在浏览器中运行。相反，小程序使用的是平台提供的网络通信API，这些API允许小程序在符合一定规则的前提下，与其他域名的服务器进行通信。