观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列又更新新文章啦,上文我们讲解了微信小程序的全局配置和局部配置,那么今天就让我们来学习微信小程序的数据请求,这可是做小程序交互效果和绑定数据动态获取、变化的重要操作!!
准备好了吗?那我们就发车啦,赶紧拿起小本本把笔记做起来吧!
文章图片
文章目录
-
- 数据请求
-
- 一,限制条件
- 二,配置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合法域名
默认为空。
那么如何添加呢,且看下方。
非常简单,我们只需要用登录微信小程序管理后台,之后就可以在开发–>开发设置–>服务器域名进行修改了。
如果是第一次配置,还需要进行身份验证。
关于域名需要注意的小tips
- 必须是
https
类型 - 不能使用
ip
和localhost
的域名 - 域名需要通过
ICP
备案 - 一个月只能修改五次服务器域名
三,发起GET、POST请求
在微信小程序中,网络数据请求是通过顶级对象
wx
的request()
方法来发送请求的,比如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
协议的接口。不过需要注意的是,上线版本还是需要校验服务器域名,上述只是作为开发者使用。
文章图片
今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!
债见~~
推荐阅读
- 微信小程序|新版微信小程序发布指南
- 面试|【微信小程序】开发入门篇(一)
- 前端|上传图片-微信小程序(那些年的坑记录2022.4)
- 宋宋讲编程|Python自动化办公小程序(实现报表自动化和自动发送到目的邮箱)
- 微信小程序|【小程序】一文读懂微信小程序登录流程及获取手机号
- 小程序|微信小程序剪切图片的功能
- 小程序|微信小程序隐藏滚动条的方法
- 微信小程序|【微信小程序】一文读懂小程序的生命周期和路由跳转
- 前端|Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)