前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章主要给大家带来进行网络数据请求的方法，那么接下来我们一起学起来吧！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、网络数据请求的限制要求

出于安全考虑，微信小程序官方对网络数据请求进行了限制具体内容如下

要求使用 https 类型接口
必须添加接口域名至信任列表

1.1 配置合法域名

接下来所用的演示域名是使用 b站up主—黑马老师的教学所用域名，若有侵权，告知必删！

登录微信小程序管理后台
进入开发—开发设置
下拉至服务器域名
点击开始配置验证身份
修改 request 合法域名
添加 https://www.escook.cn

1.2 在微信小程序开发者工具里面查询是否成功

点击右上角详情
选择项目配置

以上即完成了配置合法域名，接下来我们学习一下网络数据请求

二、网络数据请求

2.1 GET

1、GET交互方式是从服务器上获取数据，而并非修改数据，所以GET交互方式是安全的。就像数据库查询一样，从数据库查询数据，并不会影响数据库的数据信息，对数据库来说，也就是安全的。
2、GET交互方式是幂等的，幂等是一个数学概念，幂等函数就是可以使用相同参数重复执行，并且能获得相同结果的函数。在GET交互这里就是，对同一个URL的多个请求，得到的结果是相同的。就像数据库查询，不同的数据库连接对同一个数据库表用相同条件查询时，得到的结果也是一样的。

2.2 POST

1、POST交互是可以修改服务器数据的一种方式，涉及到信息的修改，就会有安全问题。就像数据库的更新，Update一个数据库表时，如果条件没有写对，就可能把不需要修改的数据给修改了，得到的数据就是错误的了。
2、一般的POST交互是必须要用到表单的，但是表单提交的默认方法是GET，如果改为POST方式，就需要修改表单提交时的Method。

三、网络数据请求实操

3.1 发起 GET 请求

打开 logs.wxml

创建一个 button 按钮做触发装置

<button type="primary" bindtap="getinfo">触发按钮</button>

打开 logs.js 对事件 getinfo 进行编写
```
getinfo (){wx.request({url: 'https://www.escook.cn/api/get',method:'GET',data:{name:'xdl',age :'20'},success:(res)=>{console.log(res.data)}
})
},
```
解释说明：首先我们利用 wx.request 将 data 数据传给前面添加的域名，然后利用 console.log() 将data 打印出来显示在调试器中。
事件检验

3.2 发起 POST 请求

新建一个按钮并添加 postinfo 事件

<!--logs.wxml-->
<button type="primary" bindtap="getinfo">触发GET</button>
<text>----------------------------------------------</text>
<button type="primary" bindtap="postinfo">触发POST</button>

在 logs.js 内编辑 postinfo 事件

postinfo (){wx.request({url: 'https://www.escook.cn/api/post',method:'POST',data:{name:'xdl',age :'20'},success:(res)=>{console.log(res.data)}})},

效果展示

3.3 页面加载时请求数据

若希望在页面刚加载时就自动触发 GET 和 POST 事件，我们可以利用在 logs.js 中的 onLoad 函数利用 this.getinfo 和 this.postinfo

打开 logs.js 在 onload 进行如下编辑

onLoad(options) {this.getinfo()
this.postinfo()
}

效果展示

结语

大家每天都要开开心心的喔，让我们一起快乐的学习吧！

【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）相关推荐

微信小程序nginx+uwsgi+django配置的域名问题
域名问题的解决 (1)微信小程序必须有一个独立的域名,如www.123.com,将这个域名与后端服务器绑定后,前端通过urls域名与后端进行通信[注意:urls处在实际应用时只能是域名,不能是ip地址 ...
【微信小程序入门到精通】— window 导航栏配置
目录前言一.全局配置的常用配置项二 .window 导航栏 2.1 navigationBarTitleText 配置项 2.2 下拉刷新的配置总结前言对于目前形式,微信小程序是一个热门, ...
【微信小程序入门到精通】—小程序实战构建售货平台首页
目录前言一.步骤阐述二.新建项目并梳理结构三.配置导航栏四.tabBar 实现五.轮播图实现总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）
目录前言一.tabBar 介绍二.实操(创建 tabBar ) 2.1 基本配置 2.2 详细配置总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
微信小程序入门到精通
常见问题 1.rpx:小程序的尺寸单位,规定屏幕为750rpx,可适配不同分辨率的屏幕 2.本地资源无法通过wxss获取 RE:background-image:可以使用网络图片,或者base64,或 ...
【微信小程序入门到精通】— 项目准备
目录前言一.在app.json中添加页面二.功能基本介绍 2.1 .js(脚本逻辑文件) 2.2 .json(全局配置文件) 2.3 .wxml(微信小程序结构文件) 2.4 .wxss(组件显 ...
【微信小程序入门到精通】— 事件绑定的详细解读
目录前言一.事件绑定导论二.常用事件三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法总结前言对于目前形式,微信小程序是一 ...
【微信小程序入门到精通】— 条件渲染实现方式
目录前言一.wx:if 渲染方式 1.1 wx:if 介绍 1.2 wx:if 实例介绍二.结合 block 的整体条件渲染 2.1 block 组件 2.1 block + wx:if 结合实 ...
【微信小程序入门到精通】— 微信小程序开发工具的安装
目录前言一.注册小程序账号二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具总结前言微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...

【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）

目录

前言