微信小程序开发 [05] wx.request发送请求和妹纸图

1、wx.request

微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下:

wx.request({ 
	url: 'test.php', //仅为示例,并非真实的接口地址
	method: "POST",
	data: {
		param1: '',
		param2: ''
	},
	header: {
		'content-type': 'application/json' // 默认值
	},
	success: function (res) {
		console.log(res.data)
	}
})

14 1

2

3

4

5

6

7

8

9

10

11

12

13

14

值得注意的有如下几点:希望在获取数据之后进行的操作,切记一定要写在success回调中,因为wx.request是异步方法wx.request发送出去的请求头中referer属性是微信设置好的且无法修改(这意味着如果有服务器屏蔽了微信的referer,你无力改变)wx.request只能请求https的url

2、来张妹纸图

现在,我们结合wx.request和第三方的一个api接口,来返回一些妹纸的图片,显示在小程序里。先提供一下接口的说明:

https://gank.io/api/random/data/福利/{count}

请求:GET
参数:count(返回的图片数量)

x 1

2

3

4

还是接着我们之前的例子,在welcome页面直接增加一个image组件: 我们提前设置好了动态绑定的参数名称,这意味着我们在welcome.js中的data中要将图片的url传给参数imgUrl: 上面这个过程注意两点:this的指向性问题,也是JS中经典的容易犯错的引用问题,注意处理wx.request返回的json数据中,会将接口返回的数据封装在re.data属性中
编译一下吧,看看结果: 欸,不错哦~
下个章节,我们实际做个简单的刷新看妹纸养眼的小程序。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注