【微信小程序】一文读懂,数据请求

news2025/1/24 8:42:34

🍒观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列又更新新文章啦,上文我们讲解了微信小程序的全局配置和局部配置,那么今天就让我们来学习微信小程序的数据请求,这可是做小程序交互效果和绑定数据动态获取、变化的重要操作!!
🍒准备好了吗?那我们就发车啦,赶紧拿起小本本把笔记做起来吧!

文章目录

    • 数据请求
      • 一,限制条件
      • 二,配置request合法域名
      • 三,发起GET、POST请求
      • 四,页面刚加载请求数据
      • 五,跳过request合法域名校验

数据请求

小伙伴们知道,在web前端开发有数据请求,我们也学习并使用过Ajax请求。而微信小程序也有数据请求,不过,微信小程序的数据请求可不一样,首先web的环境是浏览器,而小程序的环境是微信客户端,web需要考虑跨域问题,小程序不需要考虑跨域的问题。

同时,微信的数据请求不叫Ajax请求,为什么?因为web端的Ajax是基于对象XMLHttpRequest,而微信小程序都没有这个对象,因此微信小程序的数据请求可就不是Ajax请求了,而是叫做网络数据请求,可不要叫错出糗了哦~~

论数据请求的作用,其实一般做交互效果都会有数据请求,传递数据,用户的行为会通过某个参数传递,然后识别,小程序在做出相对应的展现完成业务。数据的动态呈现、数据的初始化、逻辑层内部判断等等都可能会用到数据请求。

一,限制条件

出于安全性的考虑,微信官方对数据请求的接口设置了两个条件,如下。

  • 只能请求HTTPS类型的接口

    这里先对http类型和https类型的区别做简单的讲解:
    HTTP是超文本传输协议,是互联网上应用最为广泛的一种网络协议,而HTTPS相对于HTTP来说,是以安全为目标的HTTP通道,简单来说就是其安全版(添加一个SSL层进行加密),HTTPS需要ca证书,信息不像http明文传输,而是ssl加密传输。

  • 必须将接口域名添加到信任列表中

    简单理解就是,微信小程序需要事先设置通讯域名,小程序只能跟指定的域名进行网络通讯,保证了安全性。

    信任列表我们可以在微信开发者工具中的工具栏–>详情–>项目设置–>request合法域名中查看。

    在这里插入图片描述
    request合法域名默认为空。

    那么如何添加呢,且看下方。

二,配置request合法域名

非常简单,我们只需要用登录微信小程序管理后台,之后就可以在开发–>开发设置–>服务器域名进行修改了。

如果是第一次配置,还需要进行身份验证。

关于域名需要注意的小tips

  • 必须是https类型
  • 不能使用iplocalhost的域名
  • 域名需要通过ICP备案
  • 一个月只能修改五次服务器域名

域名已经会设置啦,那我们应该如何发送请求呢?

三,发起GET、POST请求

在微信小程序中,网络数据请求是通过顶级对象wxrequest()方法来发送请求的,比如GET请求。

结构如下:

wx.request({
	url : "域名", //需要在信任列表中
	method : "GET",
	data : {
		//放请求的数据
	},
	success : (res)=>{
		//请求成功后的调用的回调函数
	}
})

POST请求结构上与GET无差,只需要将method的值改为POST即可,这里博主不多做演示。

四,页面刚加载请求数据

有时候,我们需要实现在页面加载的时候,就进行数据请求,来辅佐渲染页面的初始画面,“不写死”的数据很多是在页面加载的时候就要发生一次数据请求的。

而这个应该如何实现呢,其实我们可以利用页面的onload事件,当页面加载后事件触发,然后我们在里面放事件处理函数,事件处理函数里就可以有我们的数据请求,这样也就实现页面加载时请求数据。

onLoad: function(options){
	//数据请求操作
}

五,跳过request合法域名校验

开发项目时,前后端进度无法确定,有时候会出现,后端小伙伴仅仅提供了http类型的接口,并没有https类型的接口,前端无法调试,会影响到项目的进度。

这时候,我们可以在微信开发者工具中,本地设置里临时开启[开发环境不校验请求域名、TLS 版本及 HTTPS 证书按钮,如下方图所示,开启后,在微信开发者工具或手机打开小程序时,并不会进行服务器域名的校验、TLS版本及HTTPS证书校验,也就意味着我们可以使用http协议的接口。

不过需要注意的是,上线版本还是需要校验服务器域名,上述只是作为开发者使用。

在这里插入图片描述

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!

债见~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

react生命周期详细介绍

目录 挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render componentDidMount 更新:当组件的 props 或 state 发生变化时会触发更新。 componentWillReceive…

教你如何手写一个Promise

想要源码的可以看这里,里面也有一些其他的知识 想要手写一个promise,首先就要了解promise,想必大家都被过一些promise的面试题,知道一些promise的用法,主要考的就是一种异步编程的思想。 了解promise 我们先来看看直…

Node.js——http模块和导出共享

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端 📃个人状态: 在校大学生一枚,已拿 offer(秋招) 🥇推荐学习&…

uni-app 自定义下拉框

如图&#xff1a; html&#xff1a; <view class"row-item"> <view class"lable-tit">性别&#xff1a;</view> <view class"selected-all"> <view class"drop-down-box" click"btnShowHideClick…

JavaScript DOM基础

文章目录前言一、DOM 简介1.1 什么是 DOM1.2 DOM 树二、获取元素2.1 如何获取页面元素2.2 根据 ID 获取2.3 根据标签名获取2.4 通过 HTML5 新增的方法获取2.5 获取特殊元素&#xff08;body&#xff0c;html&#xff09;三、事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步…

Ant Design Pro(5)-7.高级表格ProTable

Ant Design Pro 高级表格ProTable的使用 文章目录Ant Design Pro 高级表格ProTable的使用一. 简介1. 什么是ProTable&#xff1f;2. 何时使用ProTable&#xff1f;二. 使用1. ProTable属性及使用2. ActionRef 手动触发3. Columns 列定义4. 批量操作5. 搜索表单一. 简介 1. 什么…

【Vue】父子组件通信

[Vue]父子组件通信前言父组件向子组件传值法一: props法二: $parent子组件向父组件传值$emit$emit .sync$refsv-model前言 &#x1f6a9;&#x1f6a9;&#x1f6a9; &#x1f48e;个人主页: 阿选不出来 &#x1f4a8;&#x1f4a8;&#x1f4a8; &#x1f48e;个人简介: 一名…

【Javaweb】会话跟踪技术CookieSession

学习目录前言一.会话引入二.Cookie1.Cookie的理解2.Cookie生命周期3.Cookie有效路径4.Cookie使用细节三.Session1.Session基本原理2.Session的理解3.Session基本使用4.Session底层5.Session生命周期前言 纸上得来终觉浅&#xff0c;绝知此事要躬行 一.会话引入 什么是会话&a…

“Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案

报错问题&#xff1a; 在使用vue-cli运行项目的过程中&#xff0c;在VScode中不报错&#xff0c;但在浏览器调试工具中发出 [Vue warn]: Property or method "******" is not defined on the instance but referenced during render. Make sure that this propert…

vue-day01 使用cdn引入使用

vue-day01vue?vue简明例子模板语法1. 使用{{}} Mustache语法将数据绑定到对应的实例2.使用 v-once指令3.v-html指令4.v-bind指令和v-on指令5.动态参数&#xff0c;修饰符&#xff0c;指令缩写动态参数修饰符指令缩写vue? Vue 是一套用于构建用户界面的渐进式框架。与其它大型…

前端不使用 i18n,如何优雅的实现多语言?

前言&#xff1a; 关于ERP管理系统的多语言&#xff0c;或者其他应用的多语言一直是我们比较麻烦的问题&#xff0c;大部分是使用 i18n 在代码里进行配置&#xff0c;如果想要修改语言就要自己去改代码&#xff01; 今天我们分享一下如何不使用 i18n 去实现多语言&#xff0c;用…

web前端面试高频考点——Vue的基本使用(一文掌握Vue最基础的知识点)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

ES6遍历方法,forEach、for...in,for..of

前言 js中遍历方法很多&#xff0c;在ES6新特性中出现了很多新的遍历方法&#xff0c;使遍历数组和对象更加方便&#xff0c;下面开始列举各种方法。 1.遍历对象 1.1.for…in…循环遍历对象自身和继承的可枚举的属性&#xff08;不包括Symbol&#xff0c;因为symbol的实例是…

微信小程序开发入门与实战(数据、事件、条件)

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…

layui 的数据表单的defaultToolbar参数中筛选列,图标,打印,三个功能,调用单独拿出使用

项目场景&#xff1a; 参数之defaultToolbar&#xff1a; 在使用layui开发的过程中&#xff0c;常常会用到 数据表单 这一关键模块&#xff0c;在这里讲一下defaultToolbar:[filter,exports print]-------“头部工具栏右侧图标”&#xff0c;如何将这三个按钮调用出来&#x…

【vscode】vscode常用插件介绍

1、Angular Snippets&#xff08;angular片段&#xff09; 这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。 2、Auto Close Tag&#xff08;自动闭合标签&#xff09; 自动添加 HTML/XML 关闭标记。 3、Auto Rename Tag&#xff08;自动重命名标签&#xff09; 自…

Three.js基础入门系列(九)--导入3D模型

先来学习今天的知识——Three.js导入3D模型 复杂的3D模型&#xff08;比如制作一个飞机模型&#xff09;一般都是用第三方建模工具生成&#xff0c;然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址&#xff1a;https://www.autodesk.com.cn/products/3ds-max/over…

启动vue-element-admin 安装npm install报错npm ERR! code 128npm ERR! An unknown git error occurre

使用vue-element-admin前端项目&#xff0c;前提是有nodejs环境&#xff0c;对于此环境的安装可以参考网上的博客。此博客用于记录启动项目以及遇到的问题、并解决问题的过程。1、介绍vue-element-admin是基于element-ui 的一套后台管理系统集成方案 。功能&#xff1a;https:/…

Vue基础教程(下篇)

&#x1f60a;作者简介&#xff1a;大家好&#xff0c;我是是你的大头呢&#xff0c;一名大三学生&#xff0c;考研备考中。让我们一起加油&#xff0c;一起努力&#xff01; &#x1f9d1;‍&#x1f4bb;博客主页&#xff1a;是你的大头呢 &#x1f970;欢迎关注&#x1f38a…

javascript 中搜索数组的四种方法

前端经常要通过 javaScript 来处理数组中的数据&#xff0c;其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值&#xff0c;这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前&#xff0c;最常用的方法…