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

本文涉及的产品
.cn 域名,1个 12个月
简介: 【微信小程序】-- 网络数据请求(十九)



一、网络数据请求

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

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 请求”,而是叫做 “发起网络数据请求”。


总结

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

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

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

相关文章
|
5天前
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
16 3
|
2月前
|
安全 算法 网络安全
量子计算与网络安全:保护数据的新方法
量子计算的崛起为网络安全带来了新的挑战和机遇。本文介绍了量子计算的基本原理,重点探讨了量子加密技术,如量子密钥分发(QKD)和量子签名,这些技术利用量子物理的特性,提供更高的安全性和可扩展性。未来,量子加密将在金融、政府通信等领域发挥重要作用,但仍需克服量子硬件不稳定性和算法优化等挑战。
|
2月前
|
存储 安全 网络安全
云计算与网络安全:保护数据的新策略
【10月更文挑战第28天】随着云计算的广泛应用,网络安全问题日益突出。本文将深入探讨云计算环境下的网络安全挑战,并提出有效的安全策略和措施。我们将分析云服务中的安全风险,探讨如何通过技术和管理措施来提升信息安全水平,包括加密技术、访问控制、安全审计等。此外,文章还将分享一些实用的代码示例,帮助读者更好地理解和应用这些安全策略。
|
2月前
|
弹性计算 安全 容灾
阿里云DTS踩坑经验分享系列|使用VPC数据通道解决网络冲突问题
阿里云DTS作为数据世界高速传输通道的建造者,每周为您分享一个避坑技巧,助力数据之旅更加快捷、便利、安全。本文介绍如何使用VPC数据通道解决网络冲突问题。
138 0
|
2天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
21天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
5天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
12 0
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
68 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
506 3
|
3月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
77 0
微信小程序更新提醒uniapp

热门文章

最新文章