您的当前位置:首页正文

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

2024-11-13 来源:个人技术集锦

简 介:

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

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

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

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

案例

关闭域名校验

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

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

?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开发有所不同。

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