?HTTP请求是客户端向服务器发送的请求消息,用于获取或操作服务器上的资源。
以下是HTTP请求的主要组成部分:
?HTTP协议定义了多种请求方法,每种方法都有其特定的用途和特点。以下是一些常见的HTTP请求方法及其简要描述:
在开始之前,我们需要先关闭域名校验
如下图,在开发工具的 详情->本地设置 中,勾选不校验合法域名。
微信小程序提供了一个名为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请求的接口
然后在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函数会被自动调用,并将页面的参数(options)传递给这个函数。options参数是一个包含页面参数的对象,其中的每个属性表示一个页面参数,属性名为参数名,属性值为参数值。这样,你可以在页面加载时获取到页面跳转时传递的参数,例如:
Page({
onLoad:function(options) {
console.log(options.id); // 输出页面跳转时传递的id参数
}
})
onLoad函数在小程序的生命周期中起到了至关重要的作用,每次打开页面都会执行。在这个函数中,你可以进行数据初始化、网络请求等操作,例如向服务器请求数据、检查用户权限、检查网络连接状态等。同时,你也可以根据入参信息,展示不同的页面。
如下图,我们将刚刚定义的getInfo,postInfo函数都放入onLoad函数中,当我重新编译进入小程序的这个页面中,这两个函数就会被自动执行。
在前后端分离的web开发中,我们通常需要解决跨域问题,但是小程序在发送请求时不会出现跨域问题。因为其运行环境和工作机制与基于浏览器的Web开发有所不同。