微信小程序调用接口并循环显示在页面
在开发微信小程序的过程中,有调用接口的情况,(如果是想找免费接口用来测试或者玩的,可以去免费开放接口API找免费的API接口)
本篇文章 调用的接口是笑话大全 https://v.juhe.cn/joke/content/list.php
下面是pages/index/index.js的代码
//请求接口
wx.request({
//这里是你用到的接口
url: 'https://v.juhe.cn/joke/content/list.php',
data: {
//这里是你请求需要发送的数据
key: '**************',//key值需要申请
page: '2',
pagesize: '3',
sort: 'asc',
time: '1418745237',
},
success: function (res) {
//请求成功后的回调
console.log(res.data.result.data)// 服务器回包信息
if(res.statusCode == '200'){
// 赋值
obj.setData({
result_list: res.data.result.data,
})
}else{
console.log("获取失败");
}
}
})
接口返回的值
![](https://img.haomeiwen.com/i13398095/870c592f942a1c0b.png)
最后 我们在页面进行简单循环一下
<view wx:for="{{result_list}}" wx:key="navItems" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.content}}
</view>
简简单单循环一下,就得到下面效果的页面
![](https://img.haomeiwen.com/i13398095/c800e65cf9cb9f31.png)
以上是直接请求接口,如何用get/post提交form数据 调用接口并循环显示在页面,下一篇文章或者直接点击链接访问~