【小程序从0到1】网络数据请求——request合法域名|GET|POST|跨域?Ajax?
欢迎来到我的博客
📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 React/小程序🔥,中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客
本文被专栏【小程序|原力计划】收录
🕹坚持创作✏️,一起学习📖,码出未来👨🏻💻!
上篇文章详细讲解了微信小程序的页面配置,这篇文章将带领大家学习的是小程序的「网络数据请求」
小程序中网络数据请求的限制
处于安全性考虑,小程序官方对于数据接口的请求作出了如下两个限制:
- 只能请求https类型的接口;
- 必须将接口的域名添加到信任列表中
需要将接口的域名添加到图中的request合法域名中。
配置request合法域名
假设需要在自己的微信小程序中,希望请求https://www.escook.cn/
域名下的接口
配置步骤:登录微信小程序管理后台 ⇒ 开发 ⇒ 开发设置 ⇒ 服务器域名 ⇒ 修改request合法域名
⚠️注意:
https://www.escook.cn
是刘龙斌老师提供的域名。
- 域名只支持https协议
- 域名不能使用IP地址或者localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请50次修改
发起GET请求
调用微信小程序提供的
wx.request()
方法,可以发起GET数据请求,示例代码如下:
(在小程序中有一个顶级的对象就是wx
,相当于web开发中的window
,此类对象不需要声明就可以直接使用)
getInfo() {
wx.request({
url: 'https://www.escook.cn/api/get', // 请求的地址,必须基于https协议
method: 'GET',
data: {
name: 'zs',
age: 20
},
success: res => {
console.log(res.data);
}
})
发起POST请求
调用微信小程序提供的
wx.request()
方法,可以发起POST数据请求,示例代码如下:
wx.request({
url: 'https://www.escook.cn/api/post',
method: 'POST',
data: {
name: 'ls',
age: 33
},
success: res => {
console.log(res.data);
}
})
页面刚加载时请求数据 — onLoad
onLoad生命周期函数——监听页面加载
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:
// 生命周期函数——监听页面加载
onLoad() {
this.getInfo()
this.postInfo()
},
这样就可以在页面刚一加载时,就去调用getInfo
/ postInfo
两个方法。
跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口,暂时没有提供https协议的接口。
此时为了不耽误开发进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS版本以及 HTTPS 证书」选项,跳过request合法域名校验。
注意:跳过request合法域名校验的选项,仅限在开发与调试阶段使用!
关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中 不存在跨域问题 !!
Ajax技术的核心是依赖于浏览器中的
XMLHttpRuquest
这个对象,由于小程序的宿主环境是微信客户端,所以小程序不能叫做发起Ajax请求
,而是叫做发起网络数据请求
。
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十