小程序 – 网络数据请求

请求限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

    只能请求 HTTPS 类型的接口

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

配置合法域名

配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

配置好后，在开发端中就可以看到合法 request 项了

开发期关闭 https 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

注意：

跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

pages({
	getInfo(){
		wx.request({
			url: 'https://www.unsoft.cn/api/get',
			method: 'GET',
			data: {
				name: 'zs',
				age: '22'
			},
			success: (res) => {
				// 请求成功之后的回调函数
				console.log(res.data)
			}
		})
	}
})

发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求

pages({
	postInfo(){
		wx.request({
			url: 'https://www.unsoft.cn/api/post',
			method: 'POST',
			data: {
				name: 'zs',
				age: '22'
			},
			success: (res) => {
				// 请求成功之后的回调函数
				console.log(res.data)
			}
		})
	}
})

小程序启动初始化数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数。

pages({
	getInfo(){ ... },
	postInfo(){ ... },
	
	onload:function(){
		this.getInfo()
		this.postInfo()
	}
})

onLoad 和其它 api 请前往 api 汇总文章查看。

跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。