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

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



一、网络数据请求

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

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


总结

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

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

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

相关文章
|
9月前
|
机器学习/深度学习 算法 调度
14种智能算法优化BP神经网络(14种方法)实现数据预测分类研究(Matlab代码实现)
14种智能算法优化BP神经网络(14种方法)实现数据预测分类研究(Matlab代码实现)
635 0
|
10月前
|
机器学习/深度学习 数据采集 传感器
【故障诊断】基于matlab BP神经网络电机数据特征提取与故障诊断研究(Matlab代码实现)
【故障诊断】基于matlab BP神经网络电机数据特征提取与故障诊断研究(Matlab代码实现)
299 0
|
8月前
|
机器学习/深度学习 人工智能 算法
【基于TTNRBO优化DBN回归预测】基于瞬态三角牛顿-拉夫逊优化算法(TTNRBO)优化深度信念网络(DBN)数据回归预测研究(Matlab代码实现)
【基于TTNRBO优化DBN回归预测】基于瞬态三角牛顿-拉夫逊优化算法(TTNRBO)优化深度信念网络(DBN)数据回归预测研究(Matlab代码实现)
322 0
|
9月前
|
机器学习/深度学习 数据采集 运维
改进的遗传算法优化的BP神经网络用于电厂数据的异常检测和故障诊断
改进的遗传算法优化的BP神经网络用于电厂数据的异常检测和故障诊断
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
816 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
424 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
473 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4750 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
857 0
微信小程序更新提醒uniapp
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
579 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序