微信小程序开发 [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
wx.request({ 
2
    url: 'test.php', //仅为示例,并非真实的接口地址
3
    method: "POST",
4
    data: {
5
        param1: '',
6
        param2: ''
7
    },
8
    header: {
9
        'content-type': 'application/json' // 默认值
10
    },
11
    success: function (res) {
12
        console.log(res.data)
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
https://gank.io/api/random/data/福利/{count}
2
 
          
3
请求:GET
4
参数:count(返回的图片数量)

还是接着我们之前的例子,在welcome页面直接增加一个image组件:
1007017-20180621093855910-41389005.png
 
我们提前设置好了动态绑定的参数名称,这意味着我们在welcome.js中的data中要将图片的url传给参数imgUrl:
1007017-20180621093856250-173757691.png
 
上面这个过程注意两点:
  • this的指向性问题,也是JS中经典的容易犯错的引用问题,注意处理
  • wx.request返回的json数据中,会将接口返回的数据封装在re.data属性中

编译一下吧,看看结果:
1007017-20180621093856573-1885223789.jpg
 
欸,不错哦~

下个章节,我们实际做个简单的刷新看妹纸养眼的小程序。

转载于:https://www.cnblogs.com/deng-cc/p/8623777.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值