微信小程序中如何详细实现天气接口调用及页面渲染？

本文共计782个文字，预计阅读时间需要4分钟。

前两天写了关于组件库iView Weapp的教程，实际也是将文档上的例子实操了一遍。今天来写一个综合的例子，调用一个免费的天气接口API，并将获取的内容展示在前端界面。

前两天写了关于组件库 iView Weapp的教程，其实也就是把文档上的例子拿出来体验了一遍，今天写一个具体的例子，调用一个免费的天气接口的api，并且把所获取的内容展示在前端的界面，前端界面与 iView Weapp结合，展示的一个小的demo.

先上效果

开始写代码：

1：找打一个免费的天气接口

免费接口api：

www.apiopen.top/api.html#top

www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7

2：写js代码

写一个request请求，把准备好的天气接口放在url里面，当请求成功的时候，在控制台打印一下返回的res.data数据

wx.request({ url: 'www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7', header: { 'content-type': 'application/json' }, success: res => { console.log(res.data) } })

这个时候可以看到控制台已经有打印了接口数据了

3：接收到了数据之后，是对数据进行处理

在请求接口成功之后，用setData接收数据，并且需在data中声明一个接收数据的变量。