【微信小程序】-- 网络数据请求(十九)

简介: 【微信小程序】-- 网络数据请求(十九)



一、网络数据请求

  前面已经介绍完了页面配置,通过栗子学习了如何单独对页面进行配置。接下来就来讲解一下小程序的网络数据请求。话不多说,让我们原文再续,书接上回吧。

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

  小程序官方出于安全性方面的考虑,对数据接口的请求做出了如下两个限制:

  • 只能请求 HTTPS 类型的接口,无法请求 HTTP 类型接口;
  • 如果要请求某个域名下的接口,必须将接口的域名添加到信任列表中;

  比如通过微信开发者工具,请求百度API相关的接口,需要操作:

详细 --> 项目配置 --> 域名信息 --> request 合法域名

  request 合法域名一开始默认是空的(未设置)。比如要用到百度API的接口,需要将百度API的域名(https://aip.baidubce.com)填写到 request 合法域名即可。当配置成功之后,就可以在自己的小程序中去请求这个域名下的所有接口。

2、配置 request 合法域名

  前面大致了解到了如何配置域名,接下来用栗子来学习一下整个配置过程。这里以自己微信小程序为例,希望请求 https://www.escook.cn/ 域名下的接口,具体步骤为:

登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

  接着往下滑,就能看到服务器域名,默认是没有配置的,需要点击开始配置。

  进行完身份验证之后,就可以配置服务器域名了。

注意事项:

  • 域名只支持 https 协议;
  • 域名不能使用 IP 地址或 localhost;
  • 域名必须经过 ICP 备案;
  • 服务器域名一个月内最多可申请 5 次修改(现在好像只显示还可以修改48次,但之前小程序首页有bug说这48次是不准的,所以还是谨慎修改比较好);

  这样就完成了服务器域名的配置了,可以进入微信开发者工具查看一下是否修改成功。

3、发起 GET 请求

  在微信小程序中,可以通过调用微信小程序提供的 wx.request() 方法,可以发起 GET 数据请求。这里需要注意的一点就是在小程序里面有一个顶级的对象–wx,类似于浏览器里的顶级对象–window,不需要声明也可以使用。具体代码如下:

cshPageTab.wxml

<button type="primary" bindtap="getInfo">发起Get请求</button>

cshPageTab.js

  可以先来学习一下 request函数的参数含义:

参数 含义
url 请求的接口地址,必须基于 https 协议
method 请求方式
data 发送到服务器的数据
success 请求成功之后的回调函数
Page({
  // 发起Get请求
  getInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: "GET",
      data:{
        name: '我是夜阑的狗',
        age: 20
      },
      success: (res) => {
        console.dir(res.data);
      }
    })
  },
})

  其中,res.data 属性才是服务器返回给我们的属性,来看一下实际运行效果:

   从图中可以看到,发给服务器的 data 数据也被原封不动发回来了。

4、发起 POST请求

  在微信小程序中,可以通过调用微信小程序提供的 wx.request() 方法,可以发起 POST数据请求。具体代码如下:

cshPageTab.wxml

<button type="primary" bindtap="postInfo">发起POST请求</button>

cshPageTab.js

Page({
  // 发起Post请求
  postInfo(){
    wx.request({
      // 请求的接口地址,必须基于 https 协议
      url: 'https://www.escook.cn/api/post',
      // 请求方式
      method: "POST",
      // 发送到服务器的数据
      data:{
        name: '我是夜阑的狗',
        age: 20,
        gender: "男"
      },
      // 请求成功之后的回调函数
      success: (res) => {
        console.dir(res.data);
      }
    })
  },
})

  其中,res.data 属性才是服务器返回给我们的属性,来看一下实际运行效果:

  从图中可以看出,运行结果确实符合了期望。

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

  在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 函数

中调用获取数据的函数,因为 onLoad 是页面生命周期中第一个执行的函数,具体代码如下:

cshPageTab.js

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getInfo();
    this.postInfo();
  },
})

  当重新进行编译的时候,onLoad 函数会优先加载,所以写在 onLoad 里的请求操作就会执行,来看一下实际运行效果:

  从图中可以看出,运行结果确实符合了期望。

6、跳过 request 合法域名校验

  在实际开发过程中,如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

  此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项,跳过 request 合法域名的校验。

注意:跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!

7、关于跨域和 Ajax 的说明

  跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小

程序中不存在跨域的问题。

  Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所

以小程序中不能叫做 “发起 Ajax 请求”,而是叫做 “发起网络数据请求”。


总结

  感谢观看,这里就是网络数据请求的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
5天前
|
Java Linux API
统计android设备的网络数据使用量
统计android设备的网络数据使用量
14 0
|
2天前
|
Windows
LabVIEW通过网络传输数据
LabVIEW通过网络传输数据
|
4天前
|
安全 算法 网络安全
网络安全与信息安全:保护您的数据和隐私
【5月更文挑战第8天】随着互联网的普及和技术的快速发展,网络安全和信息安全已经成为我们日常生活中不可或缺的一部分。本文将介绍网络安全漏洞、加密技术和安全意识等方面的知识,帮助您更好地保护自己的数据和隐私。
|
5天前
|
安全 网络协议 网络安全
网络安全与信息安全:保护你的数据,确保你的安全
【5月更文挑战第7天】在数字化的世界中,网络安全和信息安全是至关重要的。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面,帮助读者了解如何保护自己的数据和确保自己的网络安全。
|
14天前
|
监控 安全 Linux
【专栏】Linux中六个常用的网络命令:ping、traceroute、netstat、nmap、ifconfig和ip
【4月更文挑战第28天】本文介绍了Linux中六个常用的网络命令:ping、traceroute、netstat、nmap、ifconfig和ip,以及它们在测试网络连通性、追踪路由、查看网络状态、安全扫描和接口配置等场景的应用。通过学习和运用这些命令,系统管理员和网络爱好者能更有效地诊断和管理网络问题,确保网络稳定运行。
|
4天前
|
域名解析 网络协议 Linux
linux网络配置详解
linux网络配置详解
13 0
|
5天前
|
网络协议 Java Linux
【探索Linux】P.29(网络编程套接字 —— 简单的TCP网络程序模拟实现)
【探索Linux】P.29(网络编程套接字 —— 简单的TCP网络程序模拟实现)
11 0
|
5天前
|
存储 网络协议 算法
【探索Linux】P.28(网络编程套接字 —— 简单的UDP网络程序模拟实现)
【探索Linux】P.28(网络编程套接字 —— 简单的UDP网络程序模拟实现)
11 0
|
5天前
|
网络协议 算法 Linux
【探索Linux】P.27(网络编程套接字 —— UDP协议介绍 | TCP协议介绍 | UDP 和 TCP 的异同)
【探索Linux】P.27(网络编程套接字 —— UDP协议介绍 | TCP协议介绍 | UDP 和 TCP 的异同)
14 0
|
5天前
|
存储 算法 网络协议
【探索Linux】P.26(网络编程套接字基本概念—— socket编程接口 | socket编程接口相关函数详细介绍 )
【探索Linux】P.26(网络编程套接字基本概念—— socket编程接口 | socket编程接口相关函数详细介绍 )
12 0