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

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



一、网络数据请求

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

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博客。
相关文章
|
4天前
|
安全 网络安全 数据安全/隐私保护
网络安全与信息安全:保护你的数据,保护你的未来
【5月更文挑战第19天】在数字化世界中,网络安全和信息安全的重要性不言而喻。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面的问题,以期帮助读者更好地理解并应对这些挑战。我们将从网络攻击的常见形式开始,然后介绍一些防御策略,包括使用加密技术和提高安全意识等方法。最后,我们将讨论如何通过持续学习和适应来保持在这个快速发展的领域中的竞争力。
18 1
|
6天前
|
安全 网络协议 算法
网络安全与信息安全:保护你的数据,保护你的世界
【5月更文挑战第18天】在数字化的世界中,网络安全和信息安全已经成为我们生活的重要组成部分。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面的内容,帮助读者更好地理解和保护自己的数据。我们将讨论如何识别和防止网络安全威胁,如何使用加密技术来保护信息,以及如何提高自己的安全意识。
|
7天前
|
机器学习/深度学习 人工智能 安全
网络安全与信息安全:保护数据的关键策略
【5月更文挑战第17天】在数字化时代,网络安全和信息安全已成为维护个人和企业资产的核心。本文将深入探讨网络安全漏洞的概念、加密技术的重要性以及提升安全意识的必要性。我们将分析当前网络环境中的安全挑战,介绍最新的加密方法,并分享如何培养强大的安全文化,以减少潜在的网络攻击和数据泄露风险。
|
7天前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
|
9天前
|
安全 网络安全 数据安全/隐私保护
网络安全与信息安全:保护您的数据和隐私
【5月更文挑战第14天】本文将探讨网络安全漏洞、加密技术和安全意识等方面,以帮助读者更好地了解如何保护他们的数据和隐私。我们将讨论各种类型的网络攻击,以及如何使用加密技术来保护信息。此外,我们还将强调培养良好的安全习惯的重要性,以降低遭受网络攻击的风险。
|
9天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
9天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
9天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
9天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
20 0
|
9天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
18 1

热门文章

最新文章