⼩程序调⽤天⽓接⼝并且渲染在页⾯过程详解
前两天写了关于组件库 iView Weapp的教程，其实也就是把⽂档上的例⼦拿出来体验了⼀遍，今天写⼀个具体的例⼦，调⽤⼀个免费的天⽓接⼝的api，并且把所获取的内容展⽰在前端的界⾯，前端界⾯与 iView Weapp结合，展⽰的⼀个⼩的demo.
先上效果
开始写代码：
1：打⼀个免费的天⽓接⼝
免费接⼝api：
2：写js代码
写⼀个request请求，把准备好的天⽓接⼝放在url⾥⾯，当请求成功的时候，在控制台打印⼀下返回的res.data数据
url: 'p/weatherApi?city=%E4%B8%8A%E6%B5%B7',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
}
})
这个时候可以看到控制台已经有打印了接⼝数据了
3：接收到了数据之后，是对数据进⾏处理
在请求接⼝成功之后，⽤setData接收数据，并且需在data中声明⼀个接收数据的变量。
4：js写完之后，现在开始写wxml⾥⾯的内容，将数据渲染在界⾯
前⾯说⽤的是组件库 iView Weapp，样式可以⾃⼰选择，我这⾥选了⼀个卡⽚。
在使⽤组件的时候，需要在json⾥⾯引⼊⼀下：
将⾥⾯的代码复制过来，放在wxml，并且根据改成⾃⼰需要的。
<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
<i-card title="{{list.city}}天⽓" extra="{{list.city}}" thumb="i.loli/2017/08/21/599a521472424.jpg">
<view slot="content">
{{item.date}}
{{item.high}}写文章的小程序
{{item.low}}
</view>
<view slot="footer">{{list.ganmao}}</view>
</i-card>
</view>
ok，到这⾥就完成了。
5：贴⼀下完整的代码：
json：
{
"usingComponents": {
"i-card": "../../dist/card/index"
}
}
js:
Page({
data: {
list: []
},
onLoad: function (options) {
url: 'p/weatherApi?city=%E4%B8%8A%E6%B5%B7',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
this.setData({
//第⼀个data为固定⽤法，第⼆个data是json中的data
list: res.data.data
})
}
})
},
})
wxml：
<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
<i-card title="{{list.city}}天⽓" extra="{{list.city}}" thumb="i.loli/2017/08/21/599a521472424.jpg"> <view slot="content">
{{item.date}}
{{item.high}}
{{item.low}}
</view>
<view slot="footer">{{list.ganmao}}</view>
</i-card>
</view>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。